> For the complete documentation index, see [llms.txt](https://help.sixshop.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.sixshop.com/learn-sixshop/store-design/style-setup.md).
# 스타일 편집
## 목차
* [스타일 편집이란?](#id-1)
* [스타일 편집](#id-2)
* [스타일 편집 열기](#id-2-1)
* [스타일 편집 메뉴 구성](#id-2-2)
* [페이지 스타일 설정](#id-3)
* [전체 > 공통](#id-3-1.-greater-than)
* [머리글 스타일 설정](#id-4)
* [섹션별 스타일 편집](#id-5)
* [사용자 편집 섹션](#id-6)
* [제목글](#id-6-1)
* [줄글](#id-6-2)
* [보조글](#id-6-3)
* [링크](#id-6-4)
* [선](#id-6-5)
* [버튼](#id-6-6)
* [아이콘](#id-6-7)
* [말풍선](#id-6-8)
* [쪽번호](#id-6-9)
* [맨 위로 버튼](#id-6-10)
* [바닥글 스타일 설정](#id-7)
* [기본 제공 페이지 스타일 설정](#id-8)
* [상품 상세](#id-8-1)
* [장바구니](#id-8-2)
* [로그인](#id-8-3)
* [회원가입](#id-8-4)
* [템플릿 변경하기](#id-9)
* [실험실](#id-10)
## 1. 스타일 편집이란?
전체 상점 웹사이트에 공통적으로 적용되는 스타일 속성을 '스타일 편집'이라고 합니다. 스타일 편집은 고객에게 일관적인 브랜드 테마를 노출하기 위해 필요하며 템플릿 지정 시 템플릿 별 기본 설정값이 자동으로 적용됩니다. 이후 변경 사항은 페이지 내 모든 섹션과 요소에 일괄 적용됩니다.
각 섹션과 요소의 일부 속성은 개별 편집을 통해 상황에 맞게 스타일 등을 변경할 수 있습니다.
## 2. 스타일 편집
### 2-1. 스타일 편집 열기
**Step 1.** 화면 좌측 하단에 위치한 페이지 관리 메뉴(≡) 버튼을 누르면 아래와 같은 화면을 볼 수 있습니다.
**Step 2.** 아래 이미지를 참고하여 \[스타일 편집] 버튼을 눌러주세요.
### 2-2. 스타일 편집 메뉴 구성
| 번 | 설정 항목 |
| - | ----------- |
| 1 | 스타일 편집 항목 |
| 2 | 템플릿 변경하기 버튼 |
## 3. 페이지 스타일 설정
### 3-1. 전체 > 공통
| 설정 항목 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
너비
상점 웹사이트 메뉴 영역(머리글, 바닥글)의 기본 너비를 지정할 수 있습니다.
보통 메뉴 영역의 최대 너비를 1240px로 지정합니다.
넓은
메뉴 영역의 최대 너비를 기본 1800px로 지정하며 하단에 위치한 '수정하기' 체크 박스를 선택하여 최대 너비를 변경할 수 있습니다. 이후 모든 섹션의 너비 값을 '넓은' 으로 바꿀 때 이곳에 지정한 너비가 자동 적용됩니다.
|
|
배경
상점 웹사이트 내 모든 페이지의 배경 색상을 지정할 수 있습니다.
사용자 편집 섹션을 제외한 모든 섹션은 이곳에 지정한 배경이 자동 적용됩니다.
|
|
테두리
상점 웹사이트 내 모든 페이지를 감싸는 테두리를 지정할 수 있습니다.
색상 테두리의 색상을 지정할 수 있습니다.
두께
테두리의 두께를 지정할 수 있습니다.
|
|
기본값으로 돌리기
템플릿 기본 설정으로 초기화 합니다.
|
## 4. 머리글 스타일 설정
[페이지와 메뉴 > 머리글과 바닥글 > 머리글 설정하기](/learn-sixshop/store-design/pages-and-menu.md#5-2) 안내서를 참고하세요.
## 5. 섹션별 스타일 편집
[콘텐츠 구성 요소 > 섹션](/learn-sixshop/store-design/sections-and-elements.md#2) 안내서를 참고하세요.
## 6. 사용자 편집 섹션
사용자 편집 섹션은 사용자가 직접 각종 요소를 추가하여 만들 수 있는 사용자 정의 콘텐츠를 위한 섹션입니다. 아래 내용을 참조하여 사용자 편집 섹션의 공통 스타일을 설정하세요.
| 설정 항목 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
마우스 오버 소셜 링크 아이콘에 마우스를 올렸을 때 기본 색상에서 바뀔 색상을 지정할 수 있습니다.
대표 색상 넣기 사용 \[✔︎] 설정 시 각 소셜 미디어의 오리지널 색상을 자동 적용합니다.
|
|
크기
소셜 링크 아이콘의 크기를 지정할 수 있습니다.
|
### 6-8. 말풍**선**
{% hint style="info" %}
말풍선 메시지를 사용하려면 디자인 편집 페이지에서 머리글 영역을 더블 클릭하고 ’말풍선 넣기’를 \[✔︎] 체크해 주시면 됩니다.
{% endhint %}
\[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 말풍선]에서 말풍선의 스타일 편집이 가능합니다.
설정 항목
말풍선
말풍선의 스타일을 설정할 수 있습니다.
글꼴
말풍선 메시지의 서체를 지정할 수 있습니다.
글자 굵기
말풍선 메시지의 글자 굵기를 지정할 수 있습니다.
글자 크기
말풍선 메시지의 글자 크기를 지정할 수 있습니다.
글자 색상
말풍선 메시지의 글자 색상을 지정할 수 있습니다.
배경 색상
말풍선의 배경 색상을 지정할 수 있습니다.
둥근 모서리
말풍선 모서리의 둥근 정도를 설정할 수 있습니다.
### 6-9. 쪽번호
\[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 쪽번호]에서 쪽번호의 스타일 편집이 가능합니다.
| 설정 항목 |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
색상
기본 현재 보는 페이지를 제외한 모든 페이지의 쪽번호 숫자에 적용될 색상을 지정할 수 있습니다.
선택 현재 보는 페이지의 쪽번호 숫자에 적용될 색상을 지정할 수 있습니다.
|
|
간격
쪽 번호 사이 간격을 지정할 수 있습니다.
|
|
글자
글꼴 서체를 지정할 수 있습니다.
굵기 글자 굵기를 지정할 수 있습니다.
크기 글자 크기를 지정할 수 있습니다.
|
### 6-10. 맨 위로 버튼
\[디자인 편집 > 메뉴와 스타일 편집(왼쪽 하단 ≡ 아이콘) > 스타일 편집 > 맨 위로 버튼]에서 맨 위로 버튼의 스타일 편집이 가능합니다.
| 설정 항목 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
스크롤할 때 맨 위로 버튼 보이기 사용 \[✔︎] 을 선택하면 화면을 스크롤할 때 맨 위로 버튼 화면 우측 하단에 노출됩니다.
|
|
종류
맨 위로 버튼의 버튼 유형을 지정할 수 있습니다.
한글
'맨위로' 라는 문구가 출력됩니다.
영어
'TOP' 이란 문구가 출력됩니다.
아이콘 - 화살표1 / 화살표2 / 화살표3 세가지 유형의 화살표 아이콘을 선택하여 사용할 수 있습니다.
아이콘 + 영어
화살표 아이콘과 'TOP'이란 문구가 함께 출력됩니다.
|
|
색상 맨 위로 버튼의 색상을 지정할 수 있습니다.
배경 버튼의 배경색을 지정할 수 있습니다.
글자 버튼의 글자색을 지정할 수 있습니다.
불투명도 버튼의 투명함을 정할 수 있습니다. 0%는 완전 투명 100%는 완전 불투명한 상태입니다.
경계선 넣기 사용 \[✔︎] 을 선택하면 버튼에 테두리가 자동 적용됩니다.
|
|
여백
버튼의 위치를 지정할 수 있습니다.
오른쪽
화면 오른쪽 간격 설정할 수 있습니다.
아래쪽
화면 아래쪽 간격을 설정할 수 있습니다.
|
|
굵기
맨위로 버튼과 글자의 두께를 얇은, 보통, 두꺼운 중 하나로 선택하여 지정할 수 있습니다.
|
## 7. 바닥글 스타일 설정
[페이지와 메뉴 > 머리글과 바닥글 > 바닥글 설정하기](/learn-sixshop/store-design/pages-and-menu.md#5-4) 안내서를 참고하세요.
## 8. 기본 제공 페이지 스타일 설정
### 8-1. 상품 상세
| 설정 항목 |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
정렬 회원 가입 이름의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다.
|
|
가입하기 버튼
글자 가입하기 버튼의 글자를 14자 이내로 변경할 수 있습니다.
|
|
추천인
안내 글자 추천인 항목의 안내 글자를 25자 이내로 변경할 수 있습니다. \[식스샵 > 고객 > 가입 관리]에서 추천인 항목을 사용 중일 때만 반영됩니다.
|
## 9. 템플릿 변경하기
필요에 따라 현재 사용 중인 템플릿을 다른 템플릿으로 변경하고 싶을 경우가 있습니다. 이때 아래의 안내를 참조하여 진행해주세요.
{% hint style="info" %}
템플릿 변경 후에는 이전 디자인으로 되돌릴 수 없는 점을 유의하여 진행해 주세요.
{% endhint %}
**Step 1.** 좌측 하단의 페이지 관리 메뉴 버튼을 눌러주세요 `단축키: Tab`
**Step 2.** 그 다음 스타일 편집 버튼을 눌러주세요.
**Step 3.** 스타일 편집 패널의 템플릿 변경하기 버튼을 눌러주세요.
**Step 4**. 변경할 템플릿을 선택합니다.
**Step 5.** 선택한 템플릿으로 변경하기 버튼을 클릭합니다.
**Step 6.** 기존 입력한 콘텐츠의 초기화 여부를 선택하세요.
* **초기화하기**: 모든 작업 내역이 삭제되고 템플릿이 변경됩니다.
* **초기화 없이 변경하기**: 작업 내용은 모두 유지하고 선택한 템플릿의 스타일 편집 설정 값으로 변경합니다.
**Step 7.** 이제 변경된 템플릿을 사용하실 수 있습니다.
## 10. 실험실
사용자 편의성을 위한 신규 기능을 실험실로 제공합니다.
{% hint style="info" %}
실험실에서 제공하는 기능은 사전 안내 없이 사라질 수 있습니다.
{% endhint %}
| 설정 항목 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
저장 방지
우클릭 방지 마우스 우클릭 시 이미지 저장을 방지합니다. 이미지를 눌렀을 때 뜨는 팝업 창에서 이미지 저장을 방지합니다.
드래그 방지 마우스로 드래그하여 이미지 저장 및 텍스트 복사를 방지합니다. 모바일에서는 텍스트를 눌렀을 때 드래그를 방지합니다.
※ 접속 환경에 따라 기능이 동작하지 않을 수 있습니다.
|
|
주문
배송 준비 상태일 때 취소 요청 버튼 숨기기 배송 준비 상태의 주문 상세 페이지에서 취소 요청 버튼을 숨길 수 있습니다.
※ 고객이 열어 둔 주문 상세 페이지의 주문 상태가 \[배송 준비]일 때만 적용됩니다. 만약 주문 처리가 빠르게 진행되어 \[결제 완료] 상태로 창을 새로 고침 하지 않았다면, 취소 요청이 인입될 수 있는 점 유의해 주세요.
|
|
회원
등급 안내 페이지 문구 사용하기 마이페이지에 등급 안내 페이지로 이동하는 링크를 제공하여 고객이 빠르게 등급 제도를 살펴보도록 할 수 있습니다.
기능 체크 후, 상점에서 제공 중인 등급 안내 페이지의 주소를 '링크 주소' 항목에 입력합니다. 임시 도메인(sixshop.com/관리자ID) 형식이 아닌 대표 도메인 기반의 주소로 입력해 주시길 바랍니다.
※ 자동 등급 조정 조건 보여주기 기능을 사용 중이어야 링크가 노출됩니다. \[식스샵 > 고객 > 등급 관리]에서 \[자동 등급 조정 정책 보기] 버튼 클릭 후, '자동 등급 조정 조건 보여주기' 사용 여부를 점검해 주세요.
|
|
결제 페이지 로고 이미지
이미지 너비(데스크탑) 기본 값은 150px로 데스크탑 결제 페이지 로고 이미지의 너비를 조정할 수 있습니다.
이미지 너비(모바일) 기본 값은 80px로 모바일 결제 페이지 로고 이미지의 너비를 조정할 수 있습니다.
※ 이미지 너비는 데스크탑에서는 최대 1,000px, 모바일에서는 최대 300px로 설정하는 것을 권장합니다.
|
|
모바일 디자인
상품 목록 섹션 - 좌우 여백 제거
상품 목록 섹션의 좌우 여백을 제거하여 이미지 너비를 화면 가득 채울 수 있습니다.
상품 상세 페이지 - 좌우 여백 제거
상품 상세 페이지의 상품 대표 이미지 및 상세 설명에 포함된 이미지의 좌우 여백을 제거하여 이미지 너비를 화면 가득 채울 수 있습니다.
|
|
애니메이션 효과
머리글 ≡ 메뉴 페이드-인
데스크톱에서의 ≡ 메뉴와 모바일 메뉴가 펼쳐질 때 자연스럽게 나타나는 애니메이션 효과를 적용할 수 있습니다.
※ \[데스크톱 > 머리글 - 공통 > 종류]가 '데스크톱에서 ≡ 메뉴 사용하기'가 아닌 '메뉴 나열하기'라면 데스크톱 메뉴에는 적용되지 않습니다.