스타일 편집 및 개별 편집 수정


쇼핑몰 디자인의 핵심인 스타일 편집 기능은 주로 글꼴 설정, 색 변경 등 눈에 보이는 디자인 위주의 설정을 일괄적으로 담당합니다. 섹션이나 요소의 태그 부분에 있는 팔레트 모양 아이콘이나 스타일 편집 메뉴를 통해 설정할 수 있습니다.
스타일 편집은,
구성품(섹션 & 요소)의 디자인 항목의 설정 & 변경하고
모든 페이지에 흩어져 있는 동일 구성품(섹션 & 요소)에
일괄적으로 디자인을 적용하는 것 입니다.

개별 편집 > 스타일 편집 의 우선 순위로 디자인 설정 값이 지정되는데요.
사용자가 직접 변경한 사항을 기본값으로 되돌리고 싶을 경우,
각 패널에 보이는 버튼을 통해 되돌릴 수 있습니다.

스타일 편집 값은 사용 중인 템플릿의 기본값으로 초기화되고,
개별 편집값은 지금 설정된 스타일 편집 값으로 초기화 됩니다.
2개의 경로를 통해 진입하고 수정할 수 있어요.


첫 번째.
좌측 하단의 [ ≡ ] 메뉴 버튼 혹은, 키보드의 [tab] 키를 누른 후,
좌측 메뉴 가장 아래 있는 [스타일 편집] 버튼을 통해 진입하는 방법과
두 번째.
특정 섹션 & 요소의 [스타일 편집] 버튼을 통해 진입하는 방법이 있습니다.

또 다른 팁을 알려드리자면,
두개의 어떤 경로를 통해 진입해도 뒤로가기 버튼을 통해,
다른 영역의 스타일 편집으로 이동할 수 있습니다.
스타일 편집은 크게 4개의 영역을 기준으로
28개 구성품 (섹션 및 요소)의 디자인을 관리할 수 있고
동일 구성품(섹션 & 요소)에 일괄적으로 디자인을 적용 할 수 있습니다.

전체_공통 영역의 스타일 편집 시 적용 영역입니다
스타일 편집 이름 | 안내 |
공통 | 1.너비: 사이트의 너비 (최대 너비 및 좌우 여백) 설정할 수 있어요.
2.배경: 사이트 배경 색상을 설정할 수 있어요.
3.테두리: 사이트 테두리 색상을 설정할 수 있어요. |

머리글_공통 영역의 스타일 편집 시 적용 영역입니다

머리글_로고 영역의 스타일 편집 시 적용 영역입니다

머리글_메뉴 영역의 스타일 편집 시 적용 영역입니다

머리글_장바구니/로그인/상품 검색 영역의 스타일 편집 시 적용 영역입니다

머리글_아이콘 영역의 스타일 편집 시 적용 영역입니다
스타일 편집 이름 | 안내 |
공통 | 1.배치: 로고와 사이트 내비게이션의 배치를 설정할 수 있어요. 2.배경: 머리글 배경 색상을 설정할 수 있어요. 3.여백: 머리글 높낮이 여백을 설정할 수 있어요. 4.경계선 넣기:머리글 경계선을 설정할 수 있어요. 5.스크롤할 때: 스크롤 시 머리글 노출 타입을 설정할 수 있어요. |
로고 | 1.상점 이름: 글자 타입의 로고의 글꼴을 설정할 수 있어요. 2.이미지: 이미자 타입의 로고 너비를 설정 할 수 있어 요. |
메뉴 | 1.색상: 사이트 내비게이션 메뉴의 글자색상을 설정할 수 있어요.
2.간격: 사이트 내비게이션 메뉴간의 간격을 설정할 수 있어요.
3.글자: 사이트 내비게이션 메뉴의 글꼴을 설정할 수 있어요. |
장바구니/로그인/상품 검색 | 1.장바구니 종류: 아이콘 타입을 설정할 수 있어요.
2.로그인 종류: 아이콘 타입을 설정할 수 있어요.
3.상품 검색 종류: 아이콘 타입을 설정할 수 있어요.
4.아이콘: 아이콘 형태 디자인을 설정할 수 있어요.
5.색상: 아이콘 타입의 노출 색상을 설정할 수 있어요.
6.간격: 아이콘 간의 너비를 설정할 수 있어요.
7.글자: 아이콘 타입 글자로 설정한 경우, 글꼴을 설정할 수 있어요.
*해당 영역은, 개별 편집 기능이 없습니다. |
아이콘 | 1.종류: 아이콘 모양을 설정할 수 있어요.
2.색상: 아이콘의 색상을 설정할 수 있어요.
3.간격: 아이콘 간의 너비를 설정할 수 있어요.
4.크키: 아이콘의 크기를 설정할 수 있어요. |
세 번째 영역은,
본문 영역이고 16개의 구성품 (섹션 및 요소)의 디자인을 관리할 수 있어요.

본문_메인 배너 섹션을 머리글과 합쳐, 머리글의 글자색이 메인 배너의 스타일과 동일하게 적용됐어요.

위 화면에서 스크롤 아래로 이동 시, 머리글이 다시 원래 설정값으로 적용된 모습입니다.

본문_메인 배너의 높이 고정 시 적용 화면 입니다.

본문_메인 배너의 비율 고정 시 적용 화면 입니다.
스타일 편집 이름 | 안내 |
메인 배너 섹션 | 1.종류: 메인 배너 사이즈를 설정할 수 있어요.
*머리글과 합치기를 사용하여,
강렬한 첫인상 페이지를 만들 수 있어요.
2.스타일: 메인 배너 글자 색상을 설정할 수 있어요.
*메인 배너의 글자 색상은 2가지 타입으로만 제공되니,
이미지와 글자의 대비를 신경써주세요~
3.높이: 메인 배너 사이즈를 설정할 수 있어요.
*높이 고정: 메인 배너가 보이는 화면에서,
얼만큼 보여줄지 설정할 수 있어요.
*비율 고정: 화면 크기 관계없이 메인 배너의 비율을 동일하게
유지할 수 있어요.
글자를 포함하고 있는 배경을 사용할 때
화면 크기에 따라 가려지는 부분 없이, 같은 비율로
보여줄 수 있습니다.
다만,
비율 고정으로 사용 시
모바일 버전에서 글자가 배너 밖으로 넘어가는
상황이 발생할 수 있기에,
제목과 설명을 입력할 수 없습니다.
4.정렬: 제목과 설명글의 좌/우 정렬을 설정할 수 있어요.
5.배경: 배경 색상 및 불투명도 및
스크롤 시 배경 고정하기 기능을 설정할 수 있어요.
6.제목: 글꼴을 설정할 수 있어요.
*글자 색상 변경은 안 되는 것 잊지 않으셨죠?
7.설명: 글꼴을 설정할 수 있어요.
8.버튼: 글자 크기를 설정할 수 있어요.
9.내비게이션: 여러 개의 배너를 사용할 경우
슬라이딩 배너 표기를 위한 타입을 설정할 수 있고,
다중 배너 사용 시 자동 재생 여부 등도 설정할 수 있어요. |

본문_상품 목록 섹션의, 필터 디자인 편집을 설정한 화면 입니다.

본문_상품 목록 섹션의, 언어 타입 변경 시 적용되는 영역입니다.
스타일 편집 이름 | 안내 |
상품 목록 섹션 | 1.너비:상품 목록 영역의 너비를 설정할 수 있어요.
2.열: 상품 노출 열의 개수를 설정할 수 있어요. *단, 개별 편집으로 설정한 값이 존재할 경우 디자인 설정 값 우선순위에 따라 개별 편집에서 설정한 값이 우선 적용됩니다.
3.페이지당 상품 개수: 상품 노출 개수를 설정할 수 있고, 개별 편집으로 설정한 값이 있을 경우 스타일 편집값에 설정한 내용은 반영되지 않습니다.
4.썸네일: 상품 썸네일의 노출 비율을 설정할 수 있어요.
5.간격: 상품 목록의 썸네일 간격을 설정할 수 있어요.
6.필터: 상품 목록 내비게이션 메뉴의 글꼴 및 스타일을 설정할 수 있어요.
7.상품 이름/가격: 위치 및 정렬을 설정할 수 있어요.
8.상품 이름: 글꼴을 설정할 수 있어요.
9.가격: 글꼴을 설정할 수 있어요.
10.배지: 상품 목록 썸네일에 노출하는 배지 아이콘의 디자인 및 글꼴을 설정할 수 있어요.
11.마우스 오버 효과: 상품 목록 썸네일에 마우스 오버 시 효과를 설정할 수 있어요.
12.언어: 필터의 전체를 사용할 경우, 언어 타입을 설정할 수 있어요. |

본문_상품 슬라이드 섹션의 스타일 편집값을 적용한 화면입니다.
스타일 편집 이름 | 안내 |
상품 슬라이드 섹션 | 1.너비: 상품 슬라이드 영역의 너비를 설정할 수 있어요.
2.열: 상품 노출 열의 개수를 설정할 수 있어요. *단, 개별 편집으로 설정한 값이 존재할 경우 디자인 설정 값 우선순위에 따라개별 편집에서 설정한 값이 우선 적용됩니다.
3.상품 개수 : 상품 노출 개수를 설정할 수 있고, 개별 편집으로 설정한 값이 있을 경우 스타일 편집값에 설정한 내용은 반영되지 않습니다.
4.썸네일: 상품 썸네일의 노출 비율을 설정할 수 있어요.
*간격 넣기를 설정하면, 상품 썸네일의 고정 간격이 설정되요. 5.상품 이름/가격: 위치 및 정렬을 설정할 수 있어요.
6.상품 이름: 글자 크기를 설정할 수 있어요. 7.가격: 글자 크기를 설정할 수 있어요. 8.배지:상품 슬라이드 썸네일에 노출하는 배지 아이콘의 여백 및 글 자 크기를 설정할 수 있어요. 9.전환할 때 넘어가는 썸네일 개수: 이전/다음 버튼 클릭 시 노출되는 상품개 수를 설정할 수 있어요. 10.이전/다음 화살표: 슬라이드 상품이 많을 경우 화살표 추가 및 색상을 설정 |