스타일 편집
상점의 여러 페이지에 공통적으로 적용되는 스타일 편집 설정에 대해 알아보겠습니다.
전체 상점 웹사이트에 공통적으로 적용되는 스타일 속성을 '스타일 편집'이라고 합니다. 스타일 편집은 고객에게 일관적인 브랜드 테마를 노출하기 위해 필요하며 템플릿 지정 시 템플릿 별 기본 설정값이 자동으로 적용됩니다. 이후 변경 사항은 페이지 내 모든 섹션과 요소에 일괄 적용됩니다.
각 섹션과 요소의 일부 속성은 개별 편집을 통해 상황에 맞게 스타일 등을 변경할 수 있습니다.
Step 1. 화면 좌측 하단에 위치한 페이지 관리 메뉴(≡) 버튼을 누르면 아래와 같은 화면을 볼 수 있습니다.
Step 2. 아래 이미지를 참고하여 [스타일 편집] 버튼을 눌러주세요.
.png?alt=media&token=36399fc3-cff6-4941-87fb-40a629203a33)
.png?alt=media&token=821148cd-885f-4b55-b32b-2ca33515aefd)
번 | 설정 항목 |
1 | 스타일 편집 항목 |
2 | 템플릿 변경하기 버튼 |
.png?alt=media&token=a808fed9-d83b-438e-a86e-5d7d25e4ecd4)
설정 항목 |
너비 상점 웹사이트 메뉴 영역(머리글, 바닥글)의 기본 너비를 지정할 수 있습니다.
|
배경 상점 웹사이트 내 모든 페이지의 배경 색상을 지정할 수 있습니다. 사용자 편집 섹션을 제외한 모든 섹션은 이곳에 지정한 배경이 자동 적용됩니다. |
테두리 상점 웹사이트 내 모든 페이지를 감싸는 테두리를 지정할 수 있습니다.
|
기본값으로 돌리기 템플릿 기본 설정으로 초기화 합니다. |
사용자 편집 섹션은 사용자가 직접 각종 요소를 추가하여 만들 수 있는 사용자 정의 콘텐츠를 위한 섹션입니다. 아래 내용을 참조하여 사용자 편집 섹션의 공통 스타일을 설정하세요.
설정 항목 |
너비
사용자 편집 섹션의 제목 출력 방식을 지정할 수 있습니다.
|
간격
사용자 편집 섹션의 단을 나눈 경우 단 사이의 간격을 지정할 수 있습니다. |
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 제목글]에서 제목글의 스타일 편집이 가능합니다.
설정 항목 |
색상
사용자 편집 섹션에 추가되는 제목글의 글자 색상을 지정할 수 있습니다. |
글자
|
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 줄글]에서 줄글의 스타일 편집이 가능합니다.
설정 항목 |
색상
사용자 편집 섹션에 추가되는 줄글의 글자 색상을 지정할 수 있습니다. |
글자
|
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 보조글]에서 보조글의 스타일 편집이 가능합니다.
설정 항목 |
색상
사용자 편집 섹션에 추가되는 보조글의 글자 색상을 지정할 수 있습니다. |
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 링크]에서 링크의 스타일 편집이 가능합니다.
설정 항목 |
색상
사용자 편집 섹션에서 링크가 적용된 글자의 색상을 지정할 수 있습니다. |
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 선]에서 선의 스타일 편집이 가능합니다.
설정 항목 |
선
사용자 편집 섹션에서 들어가는 선 요소의 색상을 지정할 수 있습니다. |
[디자인 편집 > 좌측 하단 메뉴(≡) > 스타일 편집 > 버튼]에서 버튼 스타일 편집이 가능합니다.
설정 항목 |
종류
버튼 스타일을 설정할 수 있습니다.
|
모양
버튼 모양을 설정할 수 있습니다.
|
색상
버튼의 색상을 설정할 수 있습니다. |
크기 버튼의 크기를 작게 / 보통 / 크게 중에서 설정할 수 있습니다. |
테두리
버튼의 종류가 '테두리' 일 때 테두리의 두께를 설정할 수 있습니다. |
글자
|
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 아이콘]에서 아이콘의 스타일 편집이 가능합니다.
설정 항목 |
종류
|
색상
|
크기 소셜 링크 아이콘의 크기를 지정할 수 있습니다. |
말풍선 메시지를 사용하려면 디자인 편집 페이지에서 머리글 영역을 더블 클릭하고 ’말풍선 넣기’를 [✔︎] 체크해 주시면 됩니다.
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 말풍선]에서 말풍선의 스타일 편집이 가능합니다.
설정 항목 |
|---|
말풍선 말풍선의 스타일을 설정할 수 있습니다.
|
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 쪽번호]에서 쪽번호의 스타일 편집이 가능합니다.
설정 항목 |
색상
|
간격 쪽 번호 사이 간격을 지정할 수 있습니다. |
글자
|
[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 맨 위로 버튼]에서 맨 위로 버튼의 스타일 편집이 가능합니다.
설정 항목 |
스크롤할 때 맨 위로 버튼 보이기
사용 [✔︎] 을 선택하면 화면을 스크롤할 때 맨 위로 버튼 화면 우측 하단에 노출됩니다. |
종류 맨 위로 버튼의 버튼 유형을 지정할 수 있습니다.
|
색상
맨 위로 버튼의 색상을 지정할 수 있습니다.
|
여백 버튼의 위치를 지정할 수 있습니다.
|
굵기 맨위로 버튼과 글자의 두께를 얇은, 보통, 두꺼운 중 하나로 선택하여 지정할 수 있습니다. |
설정 항목 |
공통
|
대표 이미지
상품 상세 페이지 상단에 노출되는 상품 대표 이미지의 속성을 설정할 수 있습니다.
|
상품 이름 상품 상세 페이지의 상품 이름의 글자 크기를 설정할 수 있습니다.
후기 평점 보이기 사용 [✔]을 체크하면 상품 이름 하단에 후기 평점이 노출됩니다. |
가격 상품 상세 페이지의 상품 가격 크기를 설정할 수 있습니다. |
옵션 상품 옵션 선택 박스의 배치 방식을 아래로 / 옆으로 중에서 설정할 수 있습니다. |
요약 설명
상품 요약 설명의 노출 방식을 설정할 수 있습니다.
|
상세 설명 상품 상세 설명의 노출 방식을 설정할 수 있습니다.
|
네비게이션
사용 [✔]을 체크하면 상품 공통 정보, 상품 상세 설명, 관련 상품, 후기, 질문 등 상품 상세 페이지를 구성하는 각 영역으로 바로 이동할 수 있도록 설정할 수 있습니다.
|
후기와 질문 / 관련 상품 상품 상세 페이지에 노출되는 상세 설명 이외 섹션의 제목 스타일 속성을 설정할 수 있습니다.
|
후기와 질문 상품 상세 페이지에 노출되는 후기와 질문의 스타일 속성을 설정할 수 있습니다.
|
관련 상품 [상품 > 상품 고급 설정 > 관련 상품]에서 설정한 관련 상품의 스타일 속성을 설정할 수 있습니다.
|
구매하기 버튼
구매하기 버튼의 글자를 변경할 수 있습니다. |
장바구니 버튼
장바구니 버튼의 글자를 변경할 수 있습니다. |
설정 항목 |
장바구니 이름
|
장바구니 설명
|
삭제하기 버튼
|
구매하기 버튼
|
필요에 따라 현재 사용 중인 템플릿을 다른 템플릿으로 변경하고 싶을 경우가 있습니다. 이때 아래의 안내를 참조하여 진행해주세요.
템플릿 변경 후에는 이전 디자인으로 되돌릴 수 없는 점을 유의하여 진행해 주세요.
Step 1. 좌측 하단의 페이지 관리 메뉴 버튼을 눌러주세요
단축키: TabStep 2. 그 다음 스타일 편집 버튼을 눌러주세요.
Step 3. 스타일 편집 패널의 템플릿 변경하기 버튼을 눌러주세요.
Step 4. 변경할 템플릿을 선택합니다.
Step 5. 선택한 템플릿으로 변경하기 버튼을 클릭합니다.
Step 6. 기존 입력한 콘텐츠의 초기화 여부를 선택하세요.
- 초기화하기: 모든 작업 내역이 삭제되고 템플릿이 변경됩니다.
- 초기화 없이 변경하기: 작업 내용은 모두 유지하고 선택한 템플릿의 스타일 편집 설정 값으로 변경합니다.
Step 7. 이제 변경된 템플릿을 사용하실 수 있습니다.
Last modified 4mo ago