> 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/sections-and-elements.md).

# 콘텐츠 구성 요소

## 목차

* [콘텐츠 구성 요소란?](#id-1)
* [섹션](#id-2)
* [섹션 추가 및 설정하기](#id-3)
  * [섹션 추가하기](#id-3-1)
  * [섹션 설정하기](#id-3-1-1)
* [메인 배너 섹션](#id-4)
  * [메인 배너 섹션이란?](#id-4)
  * [메인 배너 섹션 개별 편집하기](#id-4-2)
  * [메인 배너 섹션 공통 스타일 설정하기](#id-4-3)
  * [모바일 전용 메인 배너 섹션](#id-4-4)
* [상품 목록 섹션](#id-5)
  * [상품 목록 섹션이란?](#id-5-1)
  * [상품 목록 섹션 개별 편집하기](#id-5-2)
  * [상품 목록 섹션 공통 스타일 설정하기](#id-5-3)
  * [상품 목록 섹션의 필터 기능](#id-5-4)
* [상품 슬라이드 섹션](#id-6)
* [갤러리 섹션](#id-7)
* [블로그 섹션](#id-8)
* [지도 섹션](#id-9)
* [인스타그램 섹션](#id-10)
* [사용자 편집 섹션](#id-11)
* [전광판 배너 섹션](#id-13)
* [후기 섹션](#id-14)
  * [후기 섹션 개별 편집하기](#id-14-1)
  * [후기 섹션 공통 스타일 편집하기](#id-14-2)

## 1. 콘텐츠 구성 요소란?

디자인 편집 페이지를 통해 상점 웹사이트의 각 [페이지](/learn-sixshop/store-design/pages-and-menu.md#2)에서 보여질 콘텐츠를 구성할 수 있는 [섹션](/learn-sixshop/store-design/sections-and-elements.md#2)과 섹션을 구성하는 요소를 일컫는 말입니다. 아래 안내를 통해 섹션과 요소가 각각 어떤 웹사이트의 콘텐츠를 구성하고 사용될 수 있는지 살펴보세요.

## 2. 섹션

섹션은 상점 웹사이트의 각 페이지에 블럭처럼 쌓아서 페이지의 목적에 맞는 콘텐츠를 구성할 수 있도록 제공되는 기본 단위 입니다. 각 섹션은 특정한 목적과 콘텍스트(맥락)을 가지고 있으며 현재 식스샵 에디터를 통해 사용할 수 있는 섹션의 종류는 아래와 같습니다.

| 섹션 유형                                                                                                                               |
| ----------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>사용자 편집 섹션</strong> </p><p>페이지 내 콘텐츠를 직접 구성하고자 할 때 빈 섹션 안에 다양한 요소를 직접 추가하여 사용할 수 있으며, 상점 웹사이트 디자인 시 가장 많이 활용됩니다. </p>     |
| <p><strong>메인 배너 섹션</strong></p><p>페이지 최상단에 배치되어 각 페이지에서 보여주는 콘텐츠를 대표하기 위한 배너를 노출하는 섹션입니다.</p>                                      |
| <p><strong>상품 목록 섹션</strong></p><p>상점 웹사이트에 필수적인 구성 요소로 등록한 상품 카테고리를 지정하여 고객에게 상품을 노출 할 수 있는 섹션입니다.</p>                             |
| <p><strong>상품 슬라이드 섹션</strong></p><p>상품 목록 섹션과 유사하나 좌우 슬라이드 방식으로 상품을 조회할 수 있는 섹션으로 인기 상품, 추천 상품 등의 카테고리를 보여줄 때 유용하게 사용할 수 있습니다.</p> |
| <p><strong>갤러리 섹션</strong></p><p>사진과 동영상을 한 곳에서 모아 보여줄 수 있는 갤러리 섹션은 건축, 가구, 디자이너 포트폴리오, 유튜브 재생 목록 등을 제공하고자 할 때 유용하게 사용할 수 있습니다.</p> |
| <p><strong>블로그 섹션</strong></p><p>기본적으로 게시판과 유사하나 고객에게 제공하고자 하는 콘텐츠, 공지, 안내 등을 제공할 때 블로그 형 레이아웃을 통해 제공할 수 있는 섹션입니다.</p>              |
| <p><strong>지도 섹션</strong></p><p>페이지 내에 지도를 보여주고자 할 때 사용할 수 있는 섹션입니다.</p>                                                            |
| <p><strong>인스타그램 섹션</strong></p><p>페이지 내에 인스타그램 피드를 보여주고자 할 때 사용할 수 있는 섹션입니다.</p>                                                   |
| <p><strong>전광판 배너 섹션</strong></p><p>페이지 내 원하는 문구를 움직이는 전광판 형태로 노출할 수 있는 섹션입니다.</p>                                                  |

## 3. 섹션 추가 및 설정하기

디자인 에디터의 기본 사용방법은 [에디터 기본 정보](/learn-sixshop/store-design/edit.md)에서 보다 상세히 확인하실 수 있습니다.

### 3-1. 섹션 추가하기

**Step 1. 디자인 편집 페이지에서 하단 도구 모음 중 \[+ 섹션 추가하기] 버튼(2번)을 클릭해 주세요.**&#x20;

![](/files/-M6prkBaE7ZWqsscwUuw)

**Step 2. 아래와 같은 섹션 추가하기 패널이 보이면 원하는 섹션을 선택하여 페이지 내 콘텐츠 영역에 추가해보세요.**

![](/files/-MBCBn3b7Pgg5h9Mefd4)

### 3-1. 섹션 설정하기

![](/files/-M6u0RtXBZDmY9Hph4Y7)

**개별 편집하기**\
섹션에 포함될 콘텐츠를 추가하거나 관리하고 개별 섹션에 대한 스타일 설정을 하려면 섹션을 더블클릭 하거나 섹션을 선택하면 보이는 태그 아이콘 중 연필 요양의 '개별 편집' 버튼을 누르세요.

**공통 스타일 설정하기**\
동일한 성격의 섹션에 공통적으로 적용되는 스타일 속성 값을 변경하려면 섹션 선택시 보이는 태그 아이콘 중 파레트 모양의 버튼을 누르세요.

## 4. 메인 배너 섹션

### 4-1. 메인 배너 섹션이란?

![고객사 발레시모의 메인배너 섹션 사용 예시](/files/-MBCVNJUVF0Ee4fgISGG)

페이지 상단에 배치되며 각 페이지 당 하나씩만 추가할 수 있는 섹션입니다.

페이지 내 콘텐츠를 대표하는 배너를 노출하고 다양한 이벤트 등 상점에서 강조하고자 하는 정보를 고객에게 강조하는 용도로 활용됩니다. 메인 배너 섹션을 잘 활용하면 웹사이트의 분위기나 첫인상에 매우 큰 영향을 끼칠 수 있습니다.

### 4-2. 메인 배너 섹션 개별 편집하기

메인 배너 섹션에 이미지, 색상, 동영상 중 하나의 탭을 선택하여 메인 화면으로 구성할 수 있습니다.&#x20;

이미지 혹은 색상 탭을 사용하면 여러 개의 배너를 슬라이드 형태로 설정할 수 있고, 동영상 탭을 사용하면 하나의 배너만 화면에 보입니다.  &#x20;

#### &#x20;**\[ 이미지 배너 추가하기 ]**

#### **Step 1. 메인 배너 섹션 개별 편집 패널의 '이미지' 탭을 클릭해 주세요.**

패널 하단의 \[+] 버튼을 클릭하여 이미지를 업로드하고 드래그하여 순서를 변경할 수 있습니다.&#x20;

![](/files/BcYlPKZTviG0W4FJRYxN)

**Step 2. 업로드한 이미지 위에 마우스를 올려 톱니바퀴 모양의 '설정' 버튼을 클릭해 주세요.**&#x20;

![](/files/jK5eoIyOFFxLosZXXDvL)

**Step 3. 이미지 배너에 적용할 설정 항목을 확인해 주세요.**&#x20;

![](/files/WTEC94nxdBtPb9mxE2eS)

| 설정 항목                                                                                                                               |
| ----------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>제목</strong></p><p>메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. </p>                                                    |
| <p><strong>설명</strong></p><p>메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다.  </p>                                                   |
| <p><strong>버튼 글자</strong></p><p>전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다.</p>                           |
| <p><strong>링크 주소</strong></p><p>배너 이미지 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다.</p><p>새 탭에서 열기 사용 \[✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다.</p> |
| <p><strong>배경 위 이미지</strong> </p><p>이미지를 업로드하면 기존에 설정된 이미지 위에 새로운 이미지를 추가할 수 있습니다.</p>                                              |
| <p><strong>배경 위 이미지 위치</strong> </p><p>배경 위 이미지의 위치를 왼쪽과 오른쪽 중에서 설정할 수 있습니다.  </p>                                                  |

#### **\[ 색상 배너 추가하기 ]**

#### **Step 1. 메인 배너 섹션 개별 편집 패널의 '색상' 탭을 클릭해 주세요.**&#x20;

패널 하단의 \[+] 버튼을 클릭하여 색상을 추가하고 색상 썸네일을 드래그하여 순서를 변경할 수 있습니다.&#x20;

![](/files/XCufdZwGXkMC3cQ9gQHz)

#### **Step 2. 업로드한 이미지 위에 마우스를 올려 톱니바퀴 모양의 '설정' 버튼을 클릭해 주세요.**&#x20;

![](/files/VBJaqzQCr8VozQgkOydN)

#### **Step 3. 색상 배너에 적용할 설정 항목을 확인해 주세요.**&#x20;

![](/files/gdWsh4l8AfR681qMRtBv)

| 설정 항목                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>제목</strong></p><p>메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다.  </p>                                               |
| <p><strong>설명</strong></p><p>메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다.  </p>                                               |
| <p><strong>버튼 글자</strong></p><p>전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다.  </p>                     |
| <p><strong>링크 주소</strong></p><p>색상 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다.</p><p>새 탭에서 열기 사용 \[✔]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다. </p> |
| <p><strong>배경 위 이미지</strong> </p><p>이미지를 업로드하면 기존에 설정된 색상 위에 새로운 이미지를 추가할 수 있습니다.</p>                                           |
| <p><strong>배경 위 이미지 위치</strong> </p><p>배경 위 이미지의 위치를 왼쪽과 오른쪽 중에서 설정할 수 있습니다. </p>                                               |
| <p><strong>배경</strong>  </p><p>색상의 배경색을 설정할 수 있습니다.  </p><p>색상 추가 시 기본 배경색은 #5553C0(군청) 입니다.</p>                                |

#### **\[ 동영상 배너 추가하기 ]**

![](https://contents.sixshop.com/uploadedFiles/152/default/image_1463390771084.gif)

**Step 1. 메인 배너 섹션 개별 편집 패널의 '동영상' 탭을 클릭해 주세요.**&#x20;

![](/files/sKKYEN9yW2A5wZHkcfk2)

**Step 2. 파일 업로드 옆 \[…] 버튼을 클릭하여 MP4 동영상 파일을 업로드해 주세요.**&#x20;

![](/files/Y3JeqhnC8ykwGZ5LdLOh)

**Step 3. 동영상 배너에 적용할 설정 항목을 확인해 주세요.** &#x20;

| 설정 항목                                                                                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>MP4 파일</strong>  </p><p>10MB 이하 확장자 MP4 파일을 등록해 주세요. </p><ul><li>MP4 파일 제작 시 크롬, 사파리 등 여러 브라우저에 호환성이 높은 'AVC' 코덱을 적용해 주세요. </li></ul> |
| <p><strong>제목</strong></p><p>메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. </p>                                                                 |
| <p><strong>설명</strong></p><p>메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다. </p>                                                                 |
| <p><strong>버튼 글자</strong></p><p>전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다. </p>                                       |
| <p><strong>링크 주소</strong></p><p>배너 이미지 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다.</p><p>새 탭에서 열기 사용 \[✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다.</p>              |

{% hint style="warning" %}
**\[메인 배너 섹션 동영상 등록 방식 변경 안내]**\
\
2020년 12월 17일부터 메인 배너 섹션 동영상 등록 방식 중 'Youtube / Vimeo URL 등록' 방식이 지원 중단됩니다. \
\
해당 등록 방식 지원이 중단되는 사유는 Youtube 및 Vimeo 등 동영상 스트리밍 서비스 업체의 지속적인 정책 변경과 모바일 미지원 문제로 메인 배너 섹션 동영상 기능이 정상 작동하지 않는 상황이 발생하고 있기 때문입니다.   \
\
문제 해결을 위해 최근 새로운 동영상 업로드 방식인 'MP4 파일 업로드' 방식 추가 업데이트를 진행하였는데요. 더 나은 사용자 경험 제공을 목적으로 문제가 발생하는 'Youtube / Vimeo URL 등록' 방식 지원이 중단되는 점 양해 부탁드립니다. \
\
기존 'Youtube / Vimeo URL 등록' 방식을 사용하는 고객님들의 웹사이트에서는 동영상이 동일하게 노출되나 영상 재생되지 않는 상태로 변경될 수 있습니다. 영상이 재생되지 않거나 다른 영상으로 변경 시에는 'MP4 파일 업로드' 방식을 사용해 주셔야 하는 점 참고 부탁드리겠습니다.&#x20;
{% endhint %}

### 4-3. 메인 배너 섹션 공통 스타일 설정하기

메인 배너 섹션의 [공통 스타일 설정](/learn-sixshop/store-design/style-setup.md) 패널로 이동하거나 메인 배너 섹션 [태그](https://help.sixshop.com/learn-sixshop/store-design/pages/-M6fLeUIuv2SOxYjQKOv#2-1.)의 파레트 모양 아이콘을 눌러 메인 배너 섹션의 공통 스타일을 설정할 수 있습니다.&#x20;

메인 배너 섹션의 크기 설정 방법은 [이미지 설정 가이드](/learn-sixshop/store-design/develop/image-guide.md)를 참고해 주세요. &#x20;

![](/files/-Mj3kTaKff7LO3IFTbEm)

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>종류</strong><br>메인 배너 섹션에 등록된 이미지 혹은 동영상의 노출 방식을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>높이 고정</strong><br>브라우저의 높이를 기준으로 이미지 혹은 동영상을 노출할 수 있습니다.</p><p>높이 고정으로 선택 시 메인 배너 섹션에 제목, 설명, 버튼 설정이 가능합니다.</p></li><li><p><strong>비율 고정</strong><br>설정된 메인 배너 섹션의 너비와 높이를 기준으로 이미지 혹은 동영상을 노출할 수 있습니다.</p><p>비율 고정으로 선택 시 메인 배너 섹션에 제목, 설명, 버튼 설정이 불가합니다.</p><p></p></li><li><p><strong>머리글과 합치기</strong></p><p>사용 \[✔]을 체크하면 머리글이 메인 배너 섹션 위로 투명하게 얹어져 화면에 보입니다.  </p></li></ul>                                                                                                                                                |
| <p><strong>스타일</strong></p><ul><li><p><strong>밝은</strong><br>메인 배너 섹션의 종류가 '높이 고정'일 때, 메인 배너 위에 출력되는 글자가 흰색으로 설정됩니다. </p><p>메인 배너 섹션의 종류가 '비율 고정'이고 '머리글과 합치기' 설정을 했을 때, 머리글 영역에 출력되는 글자가 흰색으로 설정됩니다.<br></p></li><li><p><strong>어두운</strong><br>메인 배너 섹션의 종류가 '높이 고정'일 때, 메인 배너 위에 출력되는 글자가 검은색으로 설정됩니다. </p><p>메인 배너 섹션의 종류가 '비율 고정'이고 '머리글과 합치기' 설정을 했을 때, 머리글 영역에 출력되는 자가 검은색으로 설정됩니다.</p><p></p></li><li><p><strong>커스텀</strong></p><p>메인 배너 섹션의 종류가 '높이 고정'일 때, 메인 배너 위에 출력되는 글자를 원하는 색으로 설정할 수 있습니다. </p><p>메인 배너 섹션의 종류가 '비율 고정'이고 '머리글과 합치기' 설정을 했을 때, 머리글 영역에 출력되는 글자를 원하는 색으로 설정할 수 있습니다.  </p></li></ul>                  |
| <p><strong>높이</strong> (종류: 높이 고정으로 선택 시) </p><p>메인 배너 섹션에 출력되는 이미지 혹은 동영상의 높이를 설정할 수 있습니다. </p><p></p><ul><li><strong>첫 페이지</strong><br>상점 웹사이트의 첫 페이지(홈)에 보여질 메인 배너 섹션의 높이를 설정할 수 있습니다.  <br></li><li><p><strong>그 외 페이지</strong></p><p>상점 웹사이트의 첫 페이지(홈)를 제외한 다른 페이지에 보여질 메인 배너 섹션의 높이를 설정할 수 있습니다.<br></p><ul><li><strong>2/5</strong><br>브라우저의 2/5 사이즈로 메인 배너 섹션 높이가 설정됩니다.   <br></li><li><strong>절반</strong><br> 브라우저의 절반 사이즈로 메인 배너 섹션 높이가 설정됩니다.     <br></li><li><strong>2/3</strong><br>브라우저의 2/3 사이즈로 메인 배너 섹션 높이가 설정됩니다.    <br></li><li><strong>전체 화면</strong><br>브라우저를 꽉 채우도록 메인 배너 섹션 높이가 설정됩니다. </li></ul></li></ul> |
| <p><strong>비율</strong> (종류: 비율 고정으로 선택 시)</p><p>메인 배너 섹션에 출력되는 이미지 혹은 동영상의 너비, 높이 비율을 설정할 수 있습니다. </p><p></p><ul><li><strong>첫 페이지</strong><br>상점 웹사이트의 첫 페이지(홈)에 보여질 메인 배너 섹션의 비율을 설정할 수 있습니다.   </li><li><p><strong>그 외 페이지</strong></p><p>상점 웹사이트의 첫 페이지(홈)를 제외한 다른 페이지에 보여질 메인 배너 섹션의 비율을 설정할 수 있습니다.<br></p><ul><li><strong>2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1</strong></li></ul></li></ul>                                                                                                                                                                                                                          |
| <p><strong>배경 위 색상</strong><br>메인 배너 섹션에 등록된 이미지 위에 덮여 씌워질 배경 색상을 설정할 수 있습니다.<br></p><ul><li><strong>색상</strong><br>메인 배너 섹션 배경 위에 적용될 배경색을 설정할 수 있습니다. <br></li><li><p><strong>불투명도</strong></p><p>메인 배너 섹션 배경 위에 적용될 배경색의 투명도를 설정할 수 있습니다. 0%는 완전 투명 100%는 완전 불투명한 상태입니다.<br></p></li><li><p><strong>스크롤할 때 배경 고정하기</strong> (종류: 높이 고정으로 선택 시) </p><p>사용 \[✔]을 체크하면 화면 스크롤 시 배경은 고정되고 콘텐츠만 위・아래로 이동합니다.</p></li></ul>                                                                                                                                                                                                              |
| <p><strong>안쪽 여백</strong> (종류: 높이 고정으로 선택 시) </p><p>메인 배너 섹션 안쪽의 위쪽, 아래쪽 여백을 설정할 수 있습니다.   <br> </p><ul><li><p><strong>위쪽</strong></p><p>메인 배너 섹션 상단 가장자리와 제목 사이의 여백을 설정할 수 있습니다.  <br></p></li><li><p><strong>아래쪽</strong></p><p>메인 배너 섹션 하단 가장자리와 버튼 사이의 여백을 설정할 수 있습니다.  </p></li></ul>                                                                                                                                                                                                                                                                                                                                            |
| <p><strong>제목 / 설명 / 버튼 위치</strong> (종류: 높이 고정으로 선택 시) </p><p>메인 배너 섹션의 제목 / 설명 / 버튼의 위치, 굵기, 크기, 자간, 줄간격을 설정할 수 있습니다.</p><p></p><ul><li>왼쪽 위 / 왼쪽 중간 / 왼쪽 아래 / 가운데 위 / 가운데 중간 / 가운데 아래 / 오른쪽 위 / 오른쪽 중간 / 오른쪽 아래</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>제목 / 설명 / 버튼 정렬</strong> (종류: 높이 고정으로 선택 시) </p><p>메인 배너 섹션의 제목 / 설명 / 버튼의 정렬을 설정할 수 있습니다.<br></p><ul><li>왼쪽 / 가운데 / 오른쪽</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| <p><strong>제목 / 설명 / 버튼 여백</strong> (종류: 높이 고정으로 선택 시) </p><p>메인 배너 섹션의 제목 / 설명 / 버튼 사이의 여백을 설정할 수 있습니다. <br> </p><ul><li><p><strong>제목 아래 여백</strong> </p><p>제목과 설명 사이의 여백을 설정할 수 있습니다. <br></p></li><li><p><strong>설명 아래 여백</strong> </p><p>설명과 버튼 사이의 여백을 설정할 수 있습니다. </p></li></ul>                                                                                                                                                                                                                                                                                                                                               |
| <p><strong>제목</strong> (종류: 높이 고정으로 선택 시) </p><p>메인 배너 섹션 위에 출력되는 제목글의 스타일 속성을 설정할 수 있습니다. </p><p></p><ul><li><strong>글꼴</strong><br>제목글의 글꼴을 설정할 수 있습니다.<br></li><li><strong>굵기</strong><br>제목글의 글자 굵기를 설정할 수 있습니다. <br></li><li><strong>크기</strong><br>제목글의 크기를 설정할 수 있습니다. <br></li><li><p><strong>자간</strong></p><p>제목글 글자 사이의 간격을 설정할 수 있습니다. </p><p></p></li><li><p><strong>줄간격</strong> </p><p>제목글과 제목글 사이의 간격을 설정할 수 있습니다. </p></li></ul>                                                                                                                                                                                     |
| <p><strong>설명</strong> (종류: 높이 고정으로 선택 시) </p><p>메인 배너 섹션 위에 출력되는 설명글의 스타일 속성을 설정할 수 있습니다. </p><p></p><ul><li><strong>글꼴</strong><br>설명글의 글꼴을 설정할 수 있습니다.<br></li><li><strong>굵기</strong><br>설명글의 글자 굵기를 설정할 수 있습니다. <br></li><li><strong>크기</strong><br>설명글의 크기를 설정할 수 있습니다. <br></li><li><p><strong>자간</strong></p><p>설명글 글자 사이의 간격을 설정할 수 있습니다. </p><p></p></li><li><p><strong>줄간격</strong></p><p>설명글과 설명글 사이의 간격을 설정할 수 있습니다.  </p></li></ul>                                                                                                                                                                                     |
| <p><strong>버튼</strong>(종류: 높이 고정으로 선택 시) <br>메인 배너 섹션 위에 출력되는 버튼의 스타일 속성을 설정할 수 있습니다. <br></p><ul><li><p><strong>버튼 크기</strong></p><p>버튼 크기를 작게 / 보통 / 크게 중에서 설정할 수 있습니다.<br></p></li><li><p><strong>글자 크기</strong></p><p>버튼의 글자 크기를 설정할 수 있습니다.    </p></li></ul>                                                                                                                                                                                                                                                                                                                                                                    |
| <p><strong>네비게이션</strong></p><p>메인 배너 섹션에 여러 이미지가 보여질 때 이전 / 다음 이미지로 이동할 수 있는 버튼 유형을 설정할 수 있습니다. </p><p></p><ul><li><strong>없음</strong><br>네비게이션을 노출하지 않습니다. <br></li><li><strong>화살표</strong><br>화살표 모양의 네비게이션이 노출됩니다. <br></li><li><p><strong>점</strong></p><p>점(도트) 모양의 네비게이션이 노출됩니다. </p></li></ul>                                                                                                                                                                                                                                                                                                                               |
| <p><strong>전환 효과</strong></p><p>메인 배너 섹션에 여러 이미지가 보여질 때 이전 / 다음 이미지로 이동 시 적용할 전환 효과를 설정할 수 있습니다.  </p><p></p><ul><li><strong>밝기 변화</strong><br></li><li><p><strong>자동 재생하기</strong></p><p>사용 \[✔]을 체크하면 설정한 재생 간격(초) 마다 메인 화면 이미지가 자동으로 재생됩니다<strong>.</strong><br></p><ul><li><p><strong>마우스 올릴 때 일시 정지하기</strong></p><p>사용 \[✔]을 체크하면 메인 배너 섹션 이미지 위에 마우스를 올렸을 때 자동 재생을 잠시 멈춥니다. </p></li></ul></li></ul>                                                                                                                                                                                                                           |

### 4-4. 모바일 전용 메인 배너 섹션

메인 배너 섹션의 경우 모바일 전용 메인 배너 섹션 기능을 이용하여 데스크탑과 모바일에 각각 다른 이미지를 등록할 수 있습니다.

{% hint style="info" %}
모바일 전용 메인 배너 섹션 권장 사이즈: 가로 기준 840 \~ 1,440px &#x20;
{% endhint %}

#### **\[모바일 전용 메인 배너 설정하기]**

#### **Step 1. 모바일 뷰포트로 전환해 주세요.**&#x20;

디자인 편집 페이지 오른쪽 하단의 뷰포트 설정 버튼을 클릭하면 모바일 뷰포트로 전환이 됩니다. `단축키: Ctrl + Shift + M`

![](/files/-MiZWMPWtaAH75PjoM2n)

#### **Step 2.** 메인 배너 섹션을 더블 클릭하고 모바일 전용 메인 배너 사용하기를 '사용'으로 클릭해 주세요. &#x20;

![](/files/-MiZWOE6HkzjQ1uC40np)

#### **Step 3.** 패널 하단의 \[+] 버튼을 클릭하여 이미지를 업로드해 주세요. &#x20;

사용하지 않을 이미지가 등록되어 있다면 해당 이미지 위에 마우스를 올린 후 휴지통 모양의 '삭제' 버튼을 클릭하여 삭제해 주세요.&#x20;

![](/files/-MiZWPuHgsCJQ7ndLCpT)

#### **\[모바일 메인 배너 섹션의 높이와 비율 설정하기]**

* **메인 배너 섹션의 종류가 높이 고정인 경우**

  \[모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 '높이' 조정이 가능합니다.&#x20;

* **메인 배너 섹션의 종류가 비율 고정인 경우**\
  \[모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 '비율'이 조정이 가능합니다.&#x20;

메인 배너 섹션의 종류별 이미지 설정 방법이 궁금하다면 [메인 배너 섹션의 크기](/learn-sixshop/store-design/develop/image-guide.md#5) 안내서를 확인해 주세요.&#x20;

## 5. 상품 목록 섹션

### 5-1. 상품 목록 섹션이란?

![고객사 SETSETSET의 상품 목록 섹션 사용예](/files/-MBCUplGRMe77Wws0URr)

상품 목록 섹션 온라인 쇼핑몰을 만드는데 가장 중요한 구성 요소로써 [상점 관리자 > 상품](https://www.sixshop.com/dashboard/shop-products)에 추가한 상품을 상점 웹사이트 내에서 보여주고자 할 때 사용할 수 있는 섹션입니다. 상품 목록 섹션은 페이지마다 하나씩 추가할 수 있으며 [메뉴](/learn-sixshop/store-design/pages-and-menu.md) 구성을 어떻게 하느냐에 따라서 고객이 상품을 살펴보는 방식을 다양하게 제공할 수 있습니다.

### 5-2. 상품 목록 섹션 개별 편집하기

상품 목록 섹션에서 상품을 보여주려면 상점 관리자에 상품이 추가되어 있어야 하며, 해당 상품이 카테고리로 분류되어야 합니다. 상품 등록 방법을 확인하고 싶으시다면 [상품 > 상품 추가하기](/learn-sixshop/store-manager/products.md#2) 안내서를 참고해 주세요.&#x20;

#### **\[ 상품 추가하기 ]**

상품 목록 섹션 더블 클릭 혹은 상품 목록 섹션 클릭 후 노출되는 펜 모양 아이콘(개별 편집)을 클릭하면 개별 편집 패널이 노출됩니다. '카테고리' 탭에서 상품 카테고리를 선택하면 상점에 카테고리에 해당하는 상품이 노출됩니다.&#x20;

<figure><img src="/files/iTs8IjOj92eoLOuggRZ2" alt=""><figcaption></figcaption></figure>

#### **\[ 상품 목록 섹션 노출 설정하기 ]**

상품 목록 섹션 더블 클릭 혹은 상품 목록 섹션 클릭 후 노출되는 펜 모양 아이콘(개별 편집)을 클릭하면 개별 편집 패널이 노출됩니다. '디자인' 탭에서 아래 설정 항목을 확인할 수 있습니다.&#x20;

<figure><img src="/files/qrUL5XGZqdBM8OxpUshs" alt=""><figcaption></figcaption></figure>

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>열</strong> </p><p>한 줄에 몇개의 상품을 보여줄지 설정할 수 있습니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>페이지당 상품 개수</strong></p><p>한 페이지에 몇개의 상품을 보여줄지 설정할 수 있습니다. 지정 개수보다 상품이 많은 경우 목록 하단에 쪽번호가 보이며 쪽번호를 눌러 다음 페이지로 이동할 수 있습니다.</p><p></p><ul><li><p><strong>스타일 편집값으로 돌리기</strong></p><p><a href="/pages/-M7qQfyuCCCEKHo3pjYJ#5-2">상점 공통 스타일</a>에 지정한 기본 상품 개수로 초기화 합니다.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>필터 옵션</strong></p><ul><li><strong>필터 보이기</strong><br>'카테고리' 탭에서 지정한 카테고리 필터가 보여집니다. <br></li><li><p><strong>전체 필터 보이기</strong></p><p>'카테고리' 탭에서 지정한 카테고리 외에 모든 상품을 한 번에 볼 수 있는 '전체' 필터가 보여집니다.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>정렬 필터</strong><br>사용 \[✔︎] 선택 시 정렬 필터가 보여집니다. 정렬 조건별 사용 여부를 선택할 수 있으며 정렬 조건의 순서를 드래그 방식으로 변경할 수 있습니다. </p><p></p><ul><li><strong>기본순</strong><br>\[식스샵 > 상품 > 전체]의 전체 상품을 기준으로 상위 노출된 상품부터 순서대로 노출됩니다. <br></li><li><strong>높은가격순</strong><br>할인가, 등급 할인, 할인 행사가 반영된 가격을 기준으로 가격이 높은 상품부터 순서대로 노출됩니다. <br></li><li><strong>낮은가격순</strong><br>할인가, 등급 할인, 할인 행사가 반영된 가격을 기준으로 가격이 낮은 상품부터 순서대로 노출됩니다. <br></li><li><strong>최신등록순</strong><br>상품 등록 시점을 기준으로 최신 등록한 상품부터 순서대로 노출됩니다. </li><li><strong>평점높은순</strong><br>평점 평균이 높은 상품부터 순서대로 노출됩니다.<br></li><li><strong>후기많은순</strong><br>후기가 많은 상품부터 순서대로 노출됩니다. 후기 연동으로 늘어난 후기 개수는 반영되지 않습니다. <br></li><li><strong>할인율순</strong><br>할인가, 등급 할인, 할인 행사가 반영된 할인율을 기준으로 할인율이 높은 상품부터 순서대로 노출됩니다.</li></ul> |
| <p><strong>진열 옵션</strong></p><ul><li><strong>품절 상품 맨 뒤로 진열하기</strong><br>품절 상품 맨 뒤로 진열하기를 사용\[✔︎]으로 설정하면 품절된 상품이 자동으로 맨 뒤 페이지에 진열됩니다.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

### 5-3. 상품 목록 섹션 공통 스타일 설정하기

[공통 스타일 설정](/learn-sixshop/store-design/style-setup.md#2) 패널로 이동하거나 섹션 [태그](/learn-sixshop/store-design/edit.md#2-1)의 파레트 모양 아이콘을 눌러 상품 목록 섹션의 공통 스타일을 설정할 수 있습니다.

![](/files/FUyUc4Ye03KC6EzXfnZL)

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>너비</strong><br>상품 목록 섹션 내 상품 썸네일 영역의 너비를 설정할 수 있습니다. </p><p></p><ul><li><p><strong>좁은</strong><br>화면의 너비는 960px 로 고정됩니다.</p><p></p></li><li><p><strong>보통</strong><br>화면의 너비는 1200px 로 고정됩니다.  </p><p></p></li><li><p><strong>넓은</strong></p><p>화면의 너비는 <a href="https://help.sixshop.com/learn-sixshop/store-design/style-setup#3-1-greater-than">전체 > 공통</a> 설정의 최대 너비(기본 1800px)로 고정됩니다.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| <p><strong>열</strong><br>한 줄에 몇 개의 상품을 보여줄지 설정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>페이지당 상품 개수</strong><br>한 페이지에 노출할 수 있는 상품의 최대 개수를 설정할 수 있습니다. </p><p>전체 상품 수가 지정된 상품 수보다 많으면 페이지로 나뉘며, 하단에 쪽 번호가 함께 노출됩니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| <p><strong>썸네일</strong></p><p>상품 목록 섹션에 노출되는 썸네일의 스타일 속성을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>비율</strong> </p><p>상품 썸네일의 비율을 원본 / 2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1 중 선택할 수 있습니다.<br></p></li><li><p><strong>종류</strong><br>상품 목록 섹션에 노출되는 썸네일의 종류를 설정할 수 있습니다.<br></p><ul><li><strong>기본</strong> <br>썸네일을 하나의 대표 이미지로 노출할 수 있습니다.</li></ul><p></p><ul><li><strong>슬라이드</strong><br>썸네일 위의 좌우 화살표를 클릭하면 이전 / 다음 이미지로 넘어가는 슬라이드 방식으로 다수의 대표 이미지를 노출할 수 있습니다. </li></ul><p></p></li><li><p><strong>전환 효과</strong><br>상품 목록 섹션의 썸네일 종류가 '슬라이드'일 때 이전 / 다음 이미지로 이동 시 적용할 전환 효과를 설정할 수 있습니다. <br></p><ul><li><strong>밀어내기</strong></li><li><strong>밝기 변화</strong></li></ul></li></ul><p></p><ul><li><p><strong>모양</strong> </p><p>상품 썸네일의 모양을 사각형 / 둥근 모서리 / 원형 중 선택할 수 있습니다. </p><p></p></li><li><p><strong>둥근 모서리</strong></p><p>상품 썸네일의 모양을 '둥근 모서리'로 선택한 경우 모서리의 둥근 정도를 설정할 수 있습니다.  </p><p></p><ul><li><p><strong>전체</strong></p><p>각 모서리의 둥근 정도를 모두 동일하게 조정할 수 있습니다.</p><p> </p></li><li><p><strong>개별</strong></p><p>각 모서리의 둥근 정도를 서로 다르게 조정할 수 있습니다.</p></li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                 |
| <p><strong>테두리 넣기</strong> </p><p>'테두리 넣기'를 사용\[✔︎]으로 체크하면 상품 썸네일에 테두리가 노출되며 테두리의 스타일 속성을 설정할 수있습니다. </p><p></p><ul><li><p><strong>색상</strong> </p><p>테두리의 색상을 설정할 수 있습니다. </p><p></p></li><li><p><strong>두께</strong> </p><p>테두리의 두께를 설정할 수 있습니다. </p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>간격</strong><br>상품 썸네일 간 가로, 세로 간격을 설정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| <p><strong>필터</strong></p><p>상품 목록 섹션에서 카테고리를 선택한 경우 노출되는 필터의 스타일 속성을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>스타일</strong> </p><p>필터의 스타일을 글자 / 알약 전체 / 알약 / 밑줄 중에서 설정할 수 있습니다. </p></li><li><p><strong>위치</strong></p><p>필터의 위치를 위 / 왼쪽 / 오른쪽 중에서 설정할 수 있습니다. </p><p></p></li><li><p><strong>너비</strong></p><p>필터의 너비를 설정할 수 있습니다.</p><p></p></li><li><p><strong>정렬</strong></p><p>필터의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 설정할 수 있습니다. </p><p></p></li><li><p><strong>기본 색상</strong></p><p>필터의 기본 색상을 설정할 수 있습니다.</p><p></p></li><li><p><strong>선택 색상</strong></p><p>선택된 필터의 색상을 설정할 수 있습니다.</p></li><li><strong>여백</strong><br>필터와 상품 목록 사이의 여백을 설정할 수 있습니다. <br></li><li><p><strong>간격</strong><br>필터 항목 간 간격을 설정할 수 있습니다.</p><p></p></li><li><p><strong>글꼴</strong></p><p>필터의 글꼴을 설정할 수 있습니다.<br></p></li><li><p><strong>굵기</strong></p><p>필터의 글자 굵기를 설정할 수 있습니다. </p><p></p></li><li><p><strong>크기</strong></p><p>필터의 크기를 설정할 수 있습니다. <br></p></li><li><p><strong>자간</strong></p><p>필터 글자 사이의 간격을 설정할 수 있습니다. </p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>상품 이름 / 가격 / 보조 설명</strong></p><p>상품 목록 섹션에 노출되는 상품의 이름, 가격, 보조 설명의 노출 방식을 설정할 수 있습니다.  </p><p></p><ul><li><p><strong>위치</strong> (상품 목록 섹션의 썸네일 종류: 기본)<br>상품 목록 섹션의 썸네일 종류가 '기본'일 때 상품 이름 / 가격 / 보조 설명의 위치를 설정할 수 있습니다.</p><ul><li>썸네일 아래</li><li>썸네일 중앙 (마우스 올릴 때)<br></li></ul></li><li><p><strong>정렬</strong></p><ul><li>왼쪽 / 가운데 / 오른쪽</li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>마우스 오버 효과</strong></p><p>상품 목록 섹션의 썸네일 종류가 '기본'일 때 상품 썸네일 위에 마우스를 올리면 보일 효과를 설정할 수 있습니다.</p><p></p><ul><li><strong>없음</strong></li><li><strong>밝기 변화</strong></li><li><strong>확대하기</strong></li><li><p><strong>다음 썸네일 보이기</strong></p><p>마우스를 올리면 해당 상품에 등록된 두 번째 상품의 이미지가 화면에 보입니다.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| <p><strong>상품 이름</strong><br>상품 목록 섹션에 노출되는 상품 이름의 스타일 속성을 설정할 수 있습니다.</p><p></p><ul><li><strong>색상</strong><br>상품 이름의 색상을 설정할 수 있습니다. <br></li><li><p><strong>글꼴</strong></p><p>상품 이름의 글꼴을 설정할 수 있습니다.<br></p></li><li><strong>굵기</strong><br>상품 이름의 글자 굵기를 설정할 수 있습니다. <br></li><li><p><strong>크기</strong><br>상품 이름의 크기를 설정할 수 있습니다. </p><p></p></li><li><p><strong>자간</strong></p><p>상품 이름 글자 사이의 간격을 설정할 수 있습니다. </p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| <p><strong>가격</strong><br>상품 목록 섹션에 노출되는 상품 가격의 스타일 속성을 설정할 수 있습니다.  <br></p><ul><li><strong>색상</strong><br>상품 가격의 색상을 설정할 수 있습니다. <br></li><li><strong>글꼴</strong><br>상품 가격의 글꼴을 설정을 할 수 있습니다.<br></li><li><p><strong>굵기</strong><br>상품 가격의 글자 굵기를 설정할 수 있습니다.</p><p></p></li><li><strong>크기</strong><br>상품 가격의 크기를 설정할 수 있습니다. <br></li><li><p><strong>자간</strong></p><p>상품 가격 글자 사이의 간격을 설정할 수 있습니다.    </p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| <p><strong>보조 설명</strong><br>'보조 설명 보이기'를 사용\[✔︎]으로 체크하면 상품 목록 섹션에 보조 설명이 노출되며 보조 설명의 스타일 속성을 설정할 수 있습니다. </p><p></p><ul><li><strong>색상</strong> <br>보조 설명의 글자 색상을 설정할 수 있습니다.<br></li><li><p><strong>글꼴</strong> </p><p>보조 설명의 글꼴을 설정할 수 있습니다. <br></p></li><li><strong>굵기</strong><br>보조 설명의 글자 굵기를 설정할 수 있습니다.<br></li><li><strong>크기</strong><br>보조 설명 크기를 설정할 수 있습니다.<br></li><li><p><strong>자간</strong></p><p>보조 설명 글자 사이의 간격을 설정할 수 있습니다. </p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| <p> <strong>후기 평점 보이기</strong> <br>'후기 평점 보이기'를 사용\[✔︎]으로 체크하면 상품 목록 섹션에 후기 평점이 노출되며 후기 평점의 스타일 속성을 설정할 수 있습니다. </p><ul><li><strong>글자 크기</strong> <br>후기 평점의 글자 크기를 설정할 수 있습니다.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| <p><strong>장바구니 담기</strong><br><strong>'</strong>장바구니 버튼 보이기'를 사용\[✔︎]으로 체크하면 상품 목록 섹션에 장바구니 담기 버튼이 노출되며 장바구니 담기 버튼의 스타일 속성을 설정할 수 있습니다. 단, 품절된 상품 혹은 가격 대체 문구가 설정된 상품에는 장바구니 담기 버튼이 노출되지 않습니다.</p><ul><li><strong>버튼 크기</strong><br>장바구니 담기 버튼의 크기를 작게 / 보통 / 크게 중 선택할 수 있습니다. </li><li><strong>글자 크기</strong><br>장바구니 담기 버튼 내의 글자 크기를 설정할 수 있습니다. </li><li><strong>아이콘 종류</strong><br>장바구니 담기의 아이콘을 카트 - 면 / 카트 - 테두리 / 쇼핑백 - 면 / 쇼핑백 - 테두리 중 선택할 수 있습니다.</li><li><strong>글자</strong><br>장바구니 담기 버튼의 글자를 변경할 수 있습니다.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>배지</strong></p><p>상품 목록 섹션에 노출되는 배지의 스타일 속성을 설정할 수 있습니다.  </p><p></p><ul><li><p><strong>위치</strong></p><ul><li>왼쪽 위 / 왼쪽 중간 / 왼쪽 아래 / 가운데 위 / 가운데 중간 / 가운데 아래 / 오른쪽 위 / 오른쪽 중간 / 오른쪽 아래<br></li></ul></li><li><p><strong>모양</strong></p><ul><li>원 / 정사각형 / 직사각형<br></li></ul></li><li><strong>너비</strong><br>배지의 너비를 설정할 수 있습니다. <br></li><li><strong>높이</strong><br>배지의 모양이 '직사각형'인 경우 높이를 설정할 수 있습니다.<br></li><li><p><strong>할인 색상</strong><br>'상품 > 편집하기 > 배지 - 기본(할인 및 품절)' 선택이 된 배지의 할인 색상을 설정할 수 있습니다. </p><p></p></li><li><strong>품절 색상</strong><br><strong>'</strong>상품 > 편집하기 > 배지 - 기본(할인 및 품절)' 선택이 된 배지의 품절 색상을 설정할 수 있습니다.  <br></li><li><p><strong>신상품 색상</strong></p><p>'상품 > 편집하기 > 배지 - 신상품' 선택이 된 배지의 색상을 설정할 수 있습니다.</p><p></p></li><li><p><strong>베스트 색상</strong> <br>'상품 > 편집하기 > 배지 - 베스트' 선택이 된 배지의 색상을 설정할 수 있습니다.</p><p></p></li><li><p><strong>MD추천 색상</strong> <br>'상품 > 편집하기 > 배지 - MD추천' 선택이 된 배지의 색상을 설정할 수 있습니다.</p><p></p></li><li><strong>직접 입력 색상</strong><br><strong>'</strong>상품 > 편집하기 > 배지 - 직접 입력' 선택이 된 배지의 색상을 설정할 수 있습니다.<br></li><li><p><strong>좌우 여백</strong></p><p>배지의 좌우 여백을 설정할 수 있습니다. <br></p></li><li><strong>상하 여백</strong><br>배지의 상하 여백을 설정할 수 있습니다. <br></li><li><strong>글꼴</strong><br>배지의 글꼴을 설정할 수 있습니다. <br></li><li><strong>굵기</strong><br>배지의 글자 굵기를 설정할 수 있습니다.<br></li><li><strong>크기</strong><br>배지의 글자 크기를 설정할 수 있습니다. <br></li><li><p><strong>자간</strong></p><p>배지 글자 사이의 간격을 설정할 수 있습니다.</p></li></ul> |
| <p><strong>언어</strong></p><p>배지에 표기될 단어의 언어를 설정할 수 있습니다. 단, <strong>'</strong>상품 > 편집하기 > 배지 - 직접 입력'을 통해 만든 배지는 언어 설정과 관계없이 입력한 대로 노출됩니다. <br></p><ul><li><strong>한국어</strong><br>'할인', '품절', '신상품', '베스트', 'MD추천' 등의 단어로 표기됩니다.<br></li><li><p><strong>영어</strong></p><p>'SALE', 'SOLD OUT', 'NEW', 'BEST', 'MD PICK' 등의 단어로 표기됩니다.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |

#### **\[모바일에서 배지 설정하기]**

모바일 화면에서 배지 노출 방식을 설정할 수 있습니다.\
Step 1\~2.의 이미지는 [여기](#undefined-10)에서 확인해 주세요.

**Step 1. 우측 하단의 모니터 모양 아이콘을 클릭하고 \[모바일] 버튼을 클릭해 주세요.**

**Step 2. \[좌측 하단 메뉴(≡) > 스타일 편집 > 상품 목록 섹션]으로 이동해 주세요.**

**Step 3. 배지의 설정을 변경해 주세요.**

<figure><img src="/files/QlyJoIaiErgQAxcsohsB" alt=""><figcaption></figcaption></figure>

### 5-4. 상품 목록 섹션의 필터 기능&#x20;

상품 목록 섹션에서 상품 카테고리를 아래의 이미지와 같이 필터로 노출할 수 있습니다.&#x20;

![](/files/-MdUO674tgaQlgZUgaEA)

####

#### **\[** 데스크탑에서 필터 보이기 설정하기 **]**

#### **Step 1. 상품 목록 섹션 영역을 클릭하고 우측 상단에 노출되는 연필 모양의 개별 편집 버튼을 클릭해 주세요.**&#x20;

![](/files/-MdUO7d6dzs0X1CFpWuK)

#### **Step 2. 상품 목록 섹션 패널의 '디자인'탭에서 '필터 보이기'를 \[✓] 체크해 주세요.**

필터 위치 조정 및 상세 설정 방법을 확인하려면 [필터 기능 활용해 보기](/learn-sixshop/store-design/develop/products-menu.md#3) 안내서를 참고해 주세요.&#x20;

![](/files/-MdUO9CXJTo7ZkMAgy8j)

#### **\[ 모바일에서 필터 종류 설정하기 ]**

모바일 화면에서 필터가 노출되는 방식을 설정할 수 있습니다. &#x20;

#### Step 1. 우측 하단의 모니터 모양 아이콘을 클릭하고 \[모바일] 버튼을 클릭해 주세요. &#x20;

모바일 편집 모드로 전환된 화면을 확인하실 수 있습니다.&#x20;

![](/files/DsVOuPRgrmtk9delanXz)

#### Step 2. \[좌측 하단 메뉴(≡) > 스타일 편집 > 상품 목록 섹션]으로 이동해 주세요.&#x20;

![](/files/Bwkp8Lc0jsn8mybKxmmM)

#### Step 3. 필터 종류를 선택해 주세요.&#x20;

* 필터 종류가 '드롭다운'인 경우 전체(All)를 클릭하면 모든 필터를 확인할 수 있습니다.&#x20;

![](/files/ZQCSXVTfrTZSdF1MCiQK)

* 필터 종류가 '나열'인 경우 모든 필터가 화면에 노출됩니다.

![](/files/3Yfa4pdiVyToLWXAXepG)

* 필터 종류가 '가로 스크롤'인 경우 나열 상태에서 가로로 필터가 노출되며, 스크롤이 가능합니다.

![](/files/tKuJmp593b8dkehqzXv0)

* 필터 종류가 '줄바꿈'인 경우 모든 필터가 줄바꿈 형식으로 화면에 노출됩니다.&#x20;

![](/files/2CrjDXFOag7IdDHvISLm)

## 6. 상품 슬라이드 섹션

### 6-1. 상품 슬라이드 섹션이란?

![](/files/-MBCj7e2FS8517dC3P5x)

상품 목록 섹션과 유사하나 좌우 슬라이드 방식으로 상품을 조회할 수 있는 섹션으로 인기 상품, 추천 상품 등의 카테고리를 보여줄 때 유용하게 사용할 수 있습니다.

### 6-2. 상품 슬라이드 섹션 개별 편집하기

상품 슬라이드 섹션에서 상품을 보여주려면 상점 관리하기에 상품 등록이 되어 있고, 해당 상품이 카테고리로 분류되어 있어야 합니다. 상품 등록 방법을 확인하고 싶으시다면 [상품 > 상품 추가하기](/learn-sixshop/store-manager/products.md#2) 안내서를 참고해 주세요.&#x20;

#### **\[ 상품 추가하기 ]**

상품 슬라이드 섹션 개별 편집 패널의 '카테고리' 탭에서 화면에 출력할 상품 카테고리를 선택해 주세요.&#x20;

![](/files/-MjcggeFRZ8zqKSjmkwO)

#### **\[ 상품 슬라이드 섹션 제목 설정하기 ]**

**Step1. \[스타일 편집 > 상품 슬라이드섹션]에서 '섹션 제목 노출하기'를 사용\[✔︎]으로 체크해 주세요.**&#x20;

![](/files/-MjcgoTs4grNQElGtBRz)

**Step 2. 상품 슬라이드 섹션 개별 편집 패널의 '섹션 제목' 탭에서 아래 설정 항목을 확인해 주세요.**

![](/files/-MjcgrhgKkA1kjzLITg_)

| 설정 항목                                                                                                                                                            |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>섹션 제목 (기본 비활성화 상태)</strong></p><p>상품 슬라이드 섹션의 제목을 노출하여 상품에 대한 정보 전달 용도로 활용할 수 있습니다. </p><p>최초 제목 노출 활성화 시 기본 입력값은 '놓치면 안 되는 베스트 상품들! 🏆 '로 노출됩니다.</p> |
| <p><strong>링크 주소</strong> </p><p>상품 슬라이드 섹션 제목에 링크 연동이 가능합니다. URL 입력 시 제목 옆에 화살표가 노출되고, 제목을 눌러 해당 링크로 이동할 수 있습니다.</p>                                            |

#### **\[ 상품 슬라이드 섹션 디자인 설정하기 ]**

상품 슬라이드 섹션 개별 편집 패널의 '디자인' 탭에서 아래 설정 항목을 확인해 주세요.

![](/files/-MjchBhQ8LzF8rv16-uk)

| 설정 항목                                                                                                                       |
| --------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>배경</strong> </p><p>상품 슬라이드 섹션의 배경 지정이 가능합니다. </p>                                                                |
| <p><strong>열</strong></p><p>한 줄에 몇 개의 상품을 보여줄지 지정할 수 있습니다. </p>                                                             |
| <p><strong>상품 개수</strong></p><p>상품 슬라이드 섹션 내에 몇 개의 상품을 보여줄지 지정할 수 있습니다.</p><p>지정한 '열' 상품 개수의 5배를 넘지 않게 설정하는 것을 추천합니다.</p>   |
| <p><strong>전환할 때 넘어가는 썸네일 개수</strong></p><p>좌우 화살표 버튼을 눌러 이동할 때 한 번에 몇 개의 상품을 넘겨 보여줄지 정할 수 있습니다.</p>                        |
| <p><strong>스타일 편집값으로 돌리기</strong></p><p><a href="/pages/-M7qQfyuCCCEKHo3pjYJ#5-2">상점 공통 스타일</a>에 지정한 기본 상품 개수로 초기화합니다. </p> |

### 6-3. 상품 슬라이드 섹션 공통 스타일 설정하기

[공통 스타일 설정](/learn-sixshop/store-design/style-setup.md#2) 패널로 이동하거나 섹션 [태그](/learn-sixshop/store-design/edit.md#2-1)의 파레트 모양 아이콘을 눌러 상품 슬라이드 섹션의 공통 스타일을 설정할 수 있습니다.

![](/files/sBZuMIVOpVupQNqNvv5F)

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>너비</strong><br>상품 슬라이드 섹션 내 상품 썸네일 영역의 너비를 지정할 수 있습니다.</p><p></p><ul><li><strong>좁은</strong><br>너비가 960px 로 화면에 보입니다.  <br></li><li><strong>보통</strong><br>너비가 1200px 로 화면에 보입니다. <br></li><li><strong>넓은</strong><br><a href="/pages/-M7qQfyuCCCEKHo3pjYJ#3-1-greater-than">전체 > 공통</a> 설정의 최대 너비(기본 1800px) 로 화면에 보입니다. </li></ul>                                                                                                                                                                                                                                                            |
| <p><strong>열</strong><br>상품 슬라이드 섹션에서 한 줄에 몇 개의 상품을 보여줘야 할지 1개\~6개 사이에서 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| <p><strong>상품 개수</strong><br>상품 슬라이드 섹션에 노출할 상품의 수를 정할 수 있습니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>썸네일</strong></p><p>상품 슬라이드 섹션에 노출되는 썸네일의 스타일 속성을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>비율</strong> </p><p>상품 썸네일의 비율을 원본 / 2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1 중 선택할 수 있습니다.</p><p></p></li><li><p><strong>모양</strong> </p><p>상품 썸네일의 모양을 사각형 / 둥근 모서리 / 원형 중 선택할 수 있습니다. </p><p></p></li><li><p><strong>둥근 모서리</strong> </p><p>상품 썸네일의 모양을 '둥근 모서리'로 선택한 경우 모서리의 둥근 정도를 설정할 수 있습니다.  </p><p></p><ul><li><p><strong>전체</strong></p><p>각 모서리의 둥근 정도를 모두 동일하게 조정할 수 있습니다.</p><p> </p></li><li><p><strong>개별</strong></p><p>각 모서리의 둥근 정도를 서로 다르게 조정할 수 있습니다.</p></li></ul></li></ul> |
| <p><strong>테두리 넣기</strong> </p><p>'테두리 넣기'를 사용\[✔︎]으로 체크하면 상품 썸네일에 테두리가 노출되며 테두리의 스타일 속성을 설정할 수있습니다. </p><p></p><ul><li><p><strong>색상</strong> </p><p>테두리의 색상을 설정할 수 있습니다. </p><p></p></li><li><p><strong>두께</strong> </p><p>테두리의 두께를 설정할 수 있습니다. </p></li></ul>                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>간격 넣기</strong></p><p>'간격 넣기'를 사용\[✔︎]으로 체크하면 상품 썸네일 사이에 간격이 노출됩니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| <p><strong>안쪽 여백</strong><br>상품 슬라이드 섹션 안쪽의 위쪽, 아래 여백 조정을 할 수 있습니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>섹션 제목</strong></p><p>'섹션 제목 노출하기'를 사용\[✔︎]으로 체크하면 상품 슬라이드 섹션의 제목을 설정할 수 있습니다. 섹션 제목의 글꼴, 굵기, 크기, 자간, 줄간격, 색상을 지정할 수 있습니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| <p><strong>상품 이름 / 가격 / 보조 설명</strong> </p><p>상품의 이름, 가격, 보조 설명을  어떤 방식으로 노출할지 지정할 수 있습니다.</p><p></p><ul><li><p><strong>위치</strong></p><ul><li>썸네일 아래</li><li>썸네일 중앙 (마우스 올릴 때)<br></li></ul></li><li><p><strong>정렬</strong></p><ul><li>왼쪽 / 가운데 / 오른쪽</li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                 |
| <p><strong>상품 이름</strong></p><p>화면에 출력되는 상품 이름의 글자 크기를 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| <p><strong>가격</strong><br>화면에 출력되는 상품 가격의 글자 크기를 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>보조 설명</strong> <br>상품 목록 섹션의 공통 스타일 편집에서 '보조 설명 보이기'를 사용\[✔︎]으로 체크하면 면 상품 슬라이드 섹션에 출력되는 보조 설명의 글자 크기를 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>후기 평점 보이기</strong> <br>'후기 평점 보이기'를 사용\[✔︎]으로 체크하면 상품 목록 섹션에 후기 평점이 노출되며 후기 평점의 스타일 속성을 설정할 수 있습니다. </p><ul><li><strong>글자 크기</strong> <br>후기 평점의 글자 크기를 설정할 수 있습니다.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                  |
| <p><strong>장바구니 담기</strong><br><strong>'</strong>장바구니 버튼 보이기'를 사용\[✔︎]으로 체크하면 상품 목록 섹션에 노출되는 장바구니 담기 버튼의 스타일 속성을 설정할 수 있습니다. </p><ul><li><strong>버튼 크기</strong><br>장바구니 담기 버튼의 크기를 작게 / 보통 / 크게 중 선택할 수 있습니다. </li><li><strong>글자 크기</strong><br>장바구니 담기 버튼 내의 글자 크기를 설정할 수 있습니다. </li><li><strong>아이콘 종류</strong><br>장바구니 담기의 아이콘을 카트 - 면 / 카트 - 테두리 / 쇼핑백 - 면 / 쇼핑백 - 테두리 중 선택할 수 있습니다. </li><li><strong>글자</strong><br>장바구니 담기 버튼의 글자를 변경할 수 있습니다.</li></ul>                                                                                                                                            |
| <p><strong>배지</strong></p><p>상품 슬라이드 섹션에 출력되는 배지의 스타일 속성을 지정할 수 있습니다. 설정 항목을 제외한 나머지는 상품 목록 섹션의 배지 설정을 계승합니다.<br></p><ul><li><strong>너비</strong><br>배지의 너비를 지정할 수 있습니다.<br></li><li><strong>좌우 여백</strong> <br>배지의 좌우 여백을 지정할 수 있습니다.<br></li><li><strong>상하 여백</strong><br>배지의 상하 여백을 지정할 수 있습니다.<br></li><li><strong>글자 크기</strong><br>배지의 글자 크기를 지정할 수 있습니다. </li></ul>                                                                                                                                                                                                                                 |
| <p><strong>전환할 때 넘어가는 썸네일 개수</strong></p><p>상품 슬라이드를 좌우로 이동 시 썸네일을 몇 개씩 넘겨줄지 지정할 수 있습니다.</p><p></p><ul><li><p><strong>자동 재생하기</strong></p><p>선택하면 지정한 재생 간격(초) 마다 슬라이드가 자동으로 이동합니다.</p><p></p></li><li><p><strong>마우스를 올릴 때 일시 정지하기</strong></p><p>상품 슬라이드 위에 마우스를 올리면 슬라이드 이동이 잠시 멈추게 됩니다.</p></li></ul>                                                                                                                                                                                                                                                                                                  |
| <p><strong>이전 / 다음 화살표</strong></p><p>상품 슬라이드를 좌우로 이동할 수 있는 이동 버튼의 출력 여부와 스타일을 지정할 수 있습니다.<br></p><ul><li><strong>이전 / 다음 화살표 보이기</strong><br>사용 \[✔︎]을 체크하면 이전 / 다음 화살표 버튼을 화면에 출력합니다.<br></li><li><p><strong>기본 색상</strong><br>화살표의 기본 색상을 지정할 수 있습니다.</p><p></p></li><li><p><strong>마우스 오버 색상</strong></p><p>화살표에 마우스를 올렸을 때 변경될 색상을 지정할 수 있습니다.</p></li></ul>                                                                                                                                                                                                                                          |
| <p><strong>마우스 오버 효과</strong></p><p>상품 슬라이드의 상품 썸네일 위에 마우스를 올리면 보여질 효과를 지정할 수 있습니다.</p><p></p><ul><li><strong>없음</strong></li><li><strong>밝기 변화</strong></li><li><p><strong>다음 썸네일 보이기</strong></p><p>마우스를 올리면 해당 상품에 등록된 두 번째 상품의 이미지가 화면에 보입니다. </p></li></ul>                                                                                                                                                                                                                                                                                                                                           |

## 7. 갤러리 섹션

![고객사 일러스트레이터 키츠의 갤러리 섹션 사용예](/files/-MBCm9JVYq5KDMUvxEV7)

### 7-1. 갤러리 섹션 개별 편집하기

![](/files/GQ1XwplAIhgHUTMVlixY)

\
**\[ 이미지 추가하기 ]**\
\
**Step 1.** 패널 하단의 '+ 이미지' 버튼을 눌러 이미지를 업로드 하고 이미지를 드래그 하여 순서를 변경할 수 있습니다.

**Step 2.** 업로드한 이미지 위에 마우스를 올리면 보이는 톱니바퀴 모양의 설정 버튼을 눌러주세요.

![](/files/-MBCnRZ2ETjBhlG_ZIHj)

**Step 3.** 아래 이미지 설정 패널에서 배너에 포함할 내용을 지정해주세요.

![](/files/V5lvokSmSTUh4p5bOEWw)

| 설정 항목                                                                                                                      |
| -------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>제목</strong></p><p>갤러리 썸네일에 노출할 제목 글입니다.</p>                                                                     |
| <p><strong>설명</strong></p><p>갤러리 썸네일에 노출할 설명 글입니다.</p>                                                                     |
| <p><strong>버튼</strong> <strong>글자</strong>  <br>갤러리 썸네일에 노출할 버튼 글자입니다.</p>                                                 |
| <p><strong>링크 주소</strong></p><p>이미지를 누르면 이동할 경로를 지정할 수 있습니다.</p><p>새 탭에서 열기 사용 \[✔︎] 을 선택하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다.</p> |

\
\&#xNAN;**\[ 동영상 추가하기 ]**

**Step 1.** 패널 하단의 '+ 동영상' 버튼을 눌러 이미지를 업로드 하고 이미지를 드래그 하여 순서를 변경할 수 있습니다.

**Step 2.** 동영상 설정 패널의 영상 주소에 Youtube, Vimeo 동영상 주소를 입력해주세요.

**Step 3.** 갤러리 목록에 보여질 썸네일을 설정하면 더욱 보기 좋습니다.

![](/files/-MBCpHareHaJGg14hXCR)

\
\&#xNAN;**\[ 갤러리 섹션 노출 설정하기 ]**

![](/files/-MBCqIQ68GuFt5-fr11e)

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>종류</strong></p><p>갤러리의 노출 방식을 지정할 수 있습니다.</p><p></p><ul><li><p><strong>격자</strong></p><p>격자형으로 이미지와 동영상 썸네일이 좌우, 위 아래로 나열되어 보여집니다.</p><p></p></li><li><p><strong>슬라이드</strong></p><p>한 줄에 지정한 개수의 썸네일이 보이며 좌우로 이동할 수 있는 버튼이 보여집니다.</p><p></p></li><li><p><strong>비대칭</strong></p><p>격자형과 유사한 방식이나 썸네일의 비율이 다르게 보여집니다.</p></li></ul>                                                                                                                       |
| <p><strong>너비</strong></p><p>갤러리 섹션 내 콘텐츠 영역의 너비를 지정할 수 있습니다.</p><p></p><ul><li><strong>좁은</strong><br>너비가 960px 로 화면에 보여집니다.<br></li><li><strong>보통</strong><br>너비가 1200px 로 화면에 보여집니다.<br></li><li><strong>넓은</strong><br><a href="/pages/-M7qQfyuCCCEKHo3pjYJ#3-1-greater-than">전체 > 공통</a> 설정의 최대 너비(기본 1800px) 로 화면에 보여집니다.<br></li><li><p><strong>꽉찬</strong></p><p>화면 너비에 콘텐츠를 꽉 채워 출력합니다.</p></li></ul>                                                      |
| <p><strong>배경</strong></p><p>갤러리 섹션의 배경색을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                            |
| <p><strong>썸네일 비율</strong></p><p>갤러리 섹션 내 이미지와 동영상 썸네일의 비율을 지정할 수 있습니다.</p><p></p><ul><li>2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1</li></ul>                                                                                                                                                                                                                                                                                                                   |
| <p><strong>썸네일 모양</strong><br>갤러리 섹션 내 이미지와 동영상 썸네일의 모양을 지정할 수 있습니다. <br></p><ul><li><p><strong>모양</strong> </p><p>썸네일의 모양을 사각형 / 둥근 모서리 / 원형 중 선택할 수 있습니다. </p><p></p></li><li><p><strong>둥근 모서리</strong> </p><p>썸네일의 모양을 '둥근 모서리'로 선택한 경우 모서리의 둥근 정도를 설정할 수 있습니다.  </p><p></p><ul><li><p><strong>전체</strong></p><p>각 모서리의 둥근 정도를 모두 동일하게 조정할 수 있습니다.</p><p> </p></li><li><p><strong>개별</strong></p><p>각 모서리의 둥근 정도를 서로 다르게 조정할 수 있습니다.<br></p></li></ul></li></ul> |
| <p><strong>테두리 넣기</strong> </p><p>'테두리 넣기'를 사용\[✔︎]으로 체크하면 썸네일에 테두리가 노출되며 테두리의 스타일 속성을 설정할 수있습니다. </p><p></p><ul><li><p><strong>색상</strong> </p><p>테두리의 색상을 설정할 수 있습니다. </p><p></p></li><li><p><strong>두께</strong> </p><p>테두리의 두께를 설정할 수 있습니다.  </p></li></ul>                                                                                                                                                                                                       |
| <p><strong>썸네일 배경</strong></p><p>썸네일 뒤쪽 배경 색을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>썸네일 클릭할 때</strong></p><p>썸네일을 클릭할 때 실행할 액션을 지정할 수 있습니다.</p><p></p><ul><li><strong>변화 없음</strong><br></li><li><strong>팝업창으로 확대하기</strong><br>전체 팝업 화면에서 확대된 이미지를 볼 수 있습니다.<br></li><li><strong>링크 열기</strong><br>지정한 링크를 바로 열 수 있습니다.</li></ul>                                                                                                                                                                                                            |
| <p><strong>간격</strong></p><p>썸네일 사이의 간격을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                             |
| <p><strong>글자 위치</strong></p><p>썸네일 위에 보이는 글자의 위치를 지정할 수 있습니다.</p><p></p><ul><li>왼쪽 위 / 왼쪽 중간 / 왼쪽 아래 / 가운데 위 / 가운데 중간 / 가운데 아래 / 오른쪽 위 / 오른쪽 중간 / 오른쪽 아래</li></ul>                                                                                                                                                                                                                                                                                                  |
| <p><strong>글자 최대 너비</strong></p><p>썸네일 위에 보이는 글자의 최대 너비를 썸네일 기준으로 설정할 수 있습니다. 너비를 넘어가는 글자는 생략됩니다.</p>                                                                                                                                                                                                                                                                                                                                                                |
| <p><strong>글자 정렬</strong></p><p>썸네일 위에 보이는 글자의 정렬 방식을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                |
| <p><strong>글자 배경</strong></p><p>썸네일 위에 보이는 글자에 배경색을 넣거나 배경 테두리를 넣을 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                       |
| <p><strong>글자 색상</strong></p><p>썸네일 위에 보이는 글자의 색상을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>글자 크기</strong></p><p>썸네일 위에 보이는 제목, 설명의 글자 크기를 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                            |
| <p><strong>버튼 크기</strong> </p><p>썸네일 위에 보이는 버튼의 크기와 버튼 글자 크기를 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>마우스 오버 효과</strong></p><p>갤러리 내 썸네일 위에 마우스를 올리면 보여질 효과를 선택할 수 있습니다.</p><p></p><ul><li><strong>없음</strong><br></li><li><p><strong>배경 변화</strong><br>썸네일에 마우스를 올리면 썸네일 배경색이 살짝 비추는 효과를 제공할 수 있습니다.<br></p><ul><li><strong>마우스 올릴 때 썸네일 배경</strong><br>마우스를 올릴 때 비출 배경색을 지정할 수 있습니다.<br></li></ul></li><li><p><strong>확대하기</strong></p><p>썸네일에 마우스를 올리면 썸네일 이미지가 확대되어 보이는 효과를 제공할 수 있습니다.</p></li></ul>                                                       |
| <p><strong>표시 선택</strong></p><p>썸네일 위에 제목 / 설명을 출력하는 방식을 지정할 수 있습니다.</p><p></p><ul><li><p><strong>제목 / 설명 보이기</strong><br>사용 \[✔︎] 을 선택하면 썸네일 위에 제목 / 설명을 출력합니다.<br></p><ul><li><p><strong>마우스 올릴 때만 제목 설명 보이기</strong></p><p>사용 \[✔︎] 을 선택하면 마우스를 올렸을 때만 썸네일 위에 제목/설명을 출력합니다.</p></li></ul></li></ul>                                                                                                                                                               |

### 7-2. 갤러리 섹션 공통 스타일 설정하기

[공통 스타일 설정](/learn-sixshop/store-design/style-setup.md#2) 패널로 이동하거나 섹션 [태그](/learn-sixshop/store-design/edit.md#2-1)의 파레트 모양 아이콘을 눌러 갤러리 섹션의 공통 스타일을 설정할 수 있습니다.

![](/files/-MB6rUFdSazxaotZJ1f9)

| 설정 항목                                                                                                                                                                                                                                                                                                                         |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>제목</strong><br>갤러리 섹션 내 항목 별 제목 문장의 스타일 속성을 지정할 수 있습니다.</p><p></p><ul><li><strong>글꼴</strong><br>서체를 지정할 수 있습니다.<br></li><li><strong>굵기</strong><br>글자 굵기를 지정할 수 있습니다.<br></li><li><strong>자간</strong><br>글자의 자간을 지정할 수 있습니다.<br></li><li><p><strong>줄간격</strong></p><p>제목 줄과 설명 사이의 간격을 조정할 수 있습니다.</p></li></ul> |
| <p><strong>설명</strong><br>갤러리 섹션 내 항목 별 설명 문장의 스타일 속성을 지정할 수 있습니다.</p><p></p><ul><li><strong>글꼴</strong><br>서체를 지정할 수 있습니다.<br></li><li><strong>굵기</strong><br>글자 굵기를 지정할 수 있습니다.<br></li><li><strong>자간</strong><br>글자의 자간을 지정할 수 있습니다.<br></li><li><p><strong>줄간격</strong></p><p>제목 줄과 설명 사이의 간격을 조정할 수 있습니다.</p></li></ul> |
| <p><strong>스타일</strong><br>갤러리 섹션 내 항목을 선택했을 때 보이는 전체 팝업 화면의 배경 색상을 지정할 수 있습니다.</p><p></p><ul><li>밝은 / 어두운</li></ul>                                                                                                                                                                                                          |

## 8. 블로그 섹션

![고객사 문토의 블로그 섹션 사용예](/files/-MBHOnJ6Wb3ocShQBlUX)

### 8-1. 블로그 섹션 개별 편집하기

**\[ 게시글 연결하기 ]**

블로그 섹션 개별 편집 패널의 '카테고리' 탭에서 화면에 출력할 게시글 카테고리를 선택하세요.

![](/files/-MBHXn6ebTA3iLT84CZc)

\
\&#xNAN;**\[ 게시글 노출 방식 설정하기 ]**

![](/files/-MBH_jn-a3SvU04o0RdC)

| 설정 항목                                                                                                                                                                                                                |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>종류</strong><br>블로그 섹션의 레이아웃 노출 방식을 지정할 수 있습니다.</p><p></p><ul><li><strong>격자</strong><br>격자형으로 썸네일이 나열되어 화면에 보여집니다.<br></li><li><strong>나열</strong><br>블로그 게시글 내용 요약이 최신 순으로 위에서 아래로 나열되어 보여집니다.</li></ul> |
| <p><strong>열</strong> (종류: 격자 선택 시)<br>위의 종류 속성을 격자로 지정할 경우 한 줄에 몇개의 게시글 썸네일이 보여질지 지정할 수 있습니다.</p>                                                                                                                   |
| <p><strong>페이지당 글 개수</strong></p><p>한 페이지에 몇개의 게시글을 보여줄지 지정할 수 있습니다. 지정된 개수를 넘어가는 게시글이 존재하는 경우 쪽번호로 나누어 조회 할 수 있습니다.</p>                                                                                             |
| <p><strong>필터 보이기</strong> </p><p>사용 \[✔︎] 선택 시 앞서 지정한 블로그 카테고리를 섹션에 보여줄 수 있습니다.</p><p></p><ul><li><p><strong>전체 필터 보이기</strong></p><p>사용 \[✔︎] 선택 시 지정한 모든 카테고리의 게시글을 한 번에 볼 수 있는 '전체' 필터 항목을 노출합니다.</p></li></ul>  |

### 8-2. 블로그 섹션 공통 스타일 설정하기

[공통 스타일 설정](/learn-sixshop/store-design/style-setup.md#2) 패널로 이동하거나 섹션 [태그](/learn-sixshop/store-design/edit.md#2-1)의 파레트 모양 아이콘을 눌러 블로그 섹션의 공통 스타일을 설정할 수 있습니다.

![](/files/-MB6vecfS765t3vYD3Bb)

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>게시글 제목</strong><br>블로그 게시글의 제목 출력 방식을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| <p><strong>사이드바</strong><br>블로그 출력 유형이 '나열'일 경우 게시글 목록 옆에 카테고리, 최근글, 검색창을 노출할 수 있습니다. </p><p></p><ul><li><p><strong>사이드바 보이기</strong><br>사용 \[✔︎] 을 선택하면 사이드바가 화면에 출력됩니다.<br></p><ul><li><strong>사이드바에서 필터 보이기</strong><br>사용 \[✔︎] 을 선택하면 블로그 카테고리가 사이드바에 출력됩니다.<br></li><li><strong>위치</strong><br>사이드바의 위치를 게시글 목록의 왼쪽 혹은 오른쪽으로 지정할 수 있습니다.<br></li><li><strong>선택 색상</strong><br>사이드바 내 글자색을 지정할 수 있습니다.</li></ul></li></ul>                                                                                                                                                                                                                                 |
| <p><strong>페이지당 글 개수</strong><br>한 페이지에 몇 개의 블로그 게시글을 보여줄지 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| <p><strong>언어</strong></p><p>화면에 기본 출력되는 버튼 이름 등 언어를 지정할 수 있습니다.</p><p></p><ul><li><p><strong>한국어</strong></p><p>전체, 카테고리, 최근 글, 검색, 댓글, 좋아요<br></p></li><li><p><strong>영어</strong></p><p>All, CATEGORIES, RECENT POSTS, SEARCH, COMMENTS, LIKES</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>너비</strong> (격자형 블로그 전용)</p><p>블로그 출력 유형 '격자'형에만 적용되며 게시글 목록의 너비를 지정할 수 있습니다.</p><p></p><ul><li><strong>좁은</strong><br>너비가 960px 로 화면에 보여집니다.<br></li><li><strong>보통</strong><br>너비가 1200px 로 화면에 보여집니다.<br></li><li><strong>넓은</strong><br><a href="/pages/-M7qQfyuCCCEKHo3pjYJ#3-1-greater-than">전체 > 공통</a> 설정의 최대 너비(기본 1800px) 로 화면에 보여집니다.</li></ul>                                                                                                                                                                                                                                                                                            |
| <p><strong>열</strong> (격자형 블로그 전용)</p><p>한 줄에 몇개의 게시글이 보이질 설정할 수 있습니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| <p><strong>썸네일</strong> (격자형 블로그 전용)</p><p>목록에 보이는 썸네일 사이즈를 설정할 수 있습니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| <p><strong>간격</strong> (격자형 블로그 전용)</p><p>썸네일 사이의 간격을 설정할 수 있습니다. </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>필터</strong> (격자형 블로그 전용)</p><p>필터의 출력 방식과 스타일 속성을 설정할 수 있습니다. </p><p></p><ul><li><p><strong>위치</strong></p><ul><li>위 / 왼쪽 / 오른쪽<br></li></ul></li><li><p><strong>정렬</strong></p><ul><li>왼쪽 / 가운데 / 오른쪽</li></ul><p></p></li><li><strong>여백</strong><br>필터와 상품 목록 사이의 간격을 지정할 수 있습니다.<br></li><li><strong>간격</strong><br>필터 항목간 간격을 지정할 수 있습니다.<br></li><li><p><strong>글꼴</strong></p><p>필터 항목의 서체를 지정할 수 있습니다.<br></p></li><li><p><strong>굵기</strong></p><p>필터 항목의 글자 두께를 지정할 수 있습니다.<br></p></li><li><p><strong>크기</strong></p><p>필터 항목의 글자 크기를 지정할 수 있습니다.<br></p></li><li><p><strong>자간</strong></p><p>필터 항목의 글자 사이의 간격을 지정할 수 있습니다.</p></li></ul> |
| <p><strong>제목 / 등록일</strong> (격자형 블로그 전용)<br>제목과 등록일의 정렬 방식을 지정할 수 있습니다.<br></p><ul><li>왼쪽 / 가운데 / 오른쪽</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| <p><strong>제목</strong> (격자형 블로그 전용)<br>제목의 글자 스타일 속성을 지정할 수 있습니다.</p><p></p><ul><li><strong>색상</strong><br>글자의 색상을 지정할 수 있습니다.<br></li><li><strong>글꼴</strong><br>서체를 지정할 수 있습니다.<br></li><li><strong>굵기</strong><br>글자 굵기를 지정할 수 있습니다.<br></li><li><strong>크기</strong><br>글자 크기를 지정할 수 있습니다.<br></li><li><p><strong>자간</strong></p><p>글자의 자간을 지정할 수 있습니다.</p></li></ul>                                                                                                                                                                                                                                                                                         |
| <p><strong>등록일</strong> (격자형 블로그 전용)<br>등록일 글자 스타일 속성을 지정할 수 있습니다.</p><p></p><ul><li><strong>색상</strong><br>글자의 색상을 지정할 수 있습니다.<br></li><li><strong>글꼴</strong><br>서체를 지정할 수 있습니다.<br></li><li><strong>굵기</strong><br>글자 굵기를 지정할 수 있습니다.<br></li><li><strong>크기</strong><br>글자 크기를 지정할 수 있습니다.<br></li><li><p><strong>자간</strong></p><p>글자의 자간을 지정할 수 있습니다.</p></li></ul>                                                                                                                                                                                                                                                                                        |
| <p><strong>마우스 오버 효과</strong></p><p>블로그 섹션의 게시글 항목 위에 마우스를 올렸을 때 적용될 (트랜지션) 효과를  지정할 수 있습니다.</p><p></p><ul><li><strong>없음</strong></li><li><strong>밝기 변화</strong></li><li><p><strong>확대하기</strong></p><p>게시글 대표 썸네일이 있을 경우 마우스를 올리면 해당 이미지가 확대되어 보입니다.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                             |

## 9. 지도 섹션

{% hint style="info" %}
지도 섹션을 사용하기 위해서는 [카카오 앱 키 등록](https://help.sixshop.com/learn-sixshop/store-manager/store-settings#8-2)이 먼저 진행되어야 합니다.
{% endhint %}

### 9-1. 지도 섹션 개별 편집하기

위 안내에 따라 카카오 앱 키 등록을 마치고 나면 아래와 같이 지도를 설정할 수 있는 패널을 확인할 수 있습니다.&#x20;

\
**\[ 주소 입력하기 ]**

주소를 입력하면 화면에 지도가 출력됩니다.

![](/files/-MBHh_LBqZbcYMw2fTZf)

\
\&#xNAN;**\[ 지도 노출 방식 설정하기 ]**

![](/files/-MBHjMPLAZxbG91WX9VP)

| 설정 항목                                                                                                            |
| ---------------------------------------------------------------------------------------------------------------- |
| <p><strong>높이</strong><br>지도의 높이를 지정할 수 있습니다.</p>                                                                |
| <p><strong>너비</strong><br>지도의 너비를 지정할 수 있습니다.</p>                                                                |
| <p><strong>표시 선택</strong></p><ul><li>지형도 보이기</li><li>스카이뷰 버튼 보이기</li><li>확대 / 축소 버튼 보이기</li><li>설명 보이기</li></ul> |

## 10. 인스타그램 섹션

{% hint style="danger" %}
**원활한 이용을 위하여 인스타그램 계정의 비즈니스(프로페셔널) 전환이 필요합니다.**\
[인스타그램 프로페셔널 계정 인증하기](https://help.sixshop.com/learn-sixshop/store-design/sections-and-elements/instagram) 안내서를 참고하여 진행해 주세요.
{% endhint %}

### 10-1. 인스타그램 섹션 개별 편집하기

**Step 1.** 계정 연결하기 버튼을 눌러주세요.

![](/files/-MBI8WwW1Vq7P1zqTdaD)

**Step 2.** 고객님의 인스타그램 계정과 식스샵과의 연동을 위해 '승인' 버튼을 눌러주세요.

![](/files/-MBIAUehBltvzCzTfD5x)

**Step 3.** 정상적으로 연동되면 아래와 같이 고객님의 인스타그램 피드가 화면에 노출됩니다.

![](/files/-MBICwUe0N8vsWr1aZxy)

\
\&#xNAN;**\[ 인스타그램 섹션 노출 설정하기 ]**

![](/files/-MBIDHiChVaVDzqV-wOb)

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                          |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>종류</strong></p><ul><li><p><strong>격자</strong></p><p>격자형으로 이미지 썸네일이 좌우, 위 아래로 나열되어 보여집니다.</p><p></p></li><li><p><strong>슬라이드</strong></p><p>한 줄에 지정한 개수의 썸네일이 보이며 좌우로 이동할 수 있는 버튼이 보여집니다.</p><p></p></li><li><p><strong>비대칭</strong></p><p>격자형과 유사한 방식이나 썸네일의 비율이 다르게 보여집니다.</p></li></ul>                                                                                                           |
| <p><strong>너비</strong><br>인스타그램 섹션 내 이미지 썸네일 노출 영역의 너비를 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>열</strong><br>한 줄에 몇개의 이미지 썸네일이 보여질지 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                |
| <p><strong>썸네일 개수</strong></p><p>총 몇개의 인스타그램 이미지 썸네일을 보여줄지 결정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                     |
| <p><strong>배경</strong></p><p>인스타그램 섹션의 배경 색상을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                  |
| <p><strong>썸네일 비율</strong></p><p>인스타그램 이미지 썸네일 출력 사이즈의 비율을 지정할 수 있습니다.<br></p><ul><li><strong>2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1</strong></li></ul>                                                                                                                                                                                                                                                |
| <p><strong>썸네일 배경</strong></p><p>썸네일 뒤쪽 배경 색을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                  |
| <p><strong>간격</strong></p><p>썸네일 사이의 간격을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                                                                                       |
| <p><strong>간격</strong> (종류: 슬라이드 선택 시)</p><ul><li>사용 / 사용 안 함</li></ul>                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>무한 순환</strong> (종류: 슬라이드 선택 시)</p><p>좌우 이동 버튼을 눌렀을 때 지정한 총 개수를 다 보면 다시 처음 이미지부터 슬라이드가 이어질 수 있게 합니다.</p>                                                                                                                                                                                                                                                                                             |
| <p><strong>자동 재생</strong> (종류: 슬라이드 선택 시)</p><p>지정한 재생 간격마다 다음 슬라이드로 이동합니다. <br></p><ul><li><p><strong>마우스 올릴 때 일시 정지하기</strong></p><p>사용 \[✔︎] 설정 시 인스타그램 섹션에 마우스를 올리면 자동 재생을 잠시 멈춥니다.</p></li></ul>                                                                                                                                                                                                          |
| <p><strong>전환할 때 넘어가는 썸네일 개수</strong> (종류: 슬라이드 선택 시)</p><p>좌우 이동 버튼을 누르거나 자동 재생으로 슬라이드를 넘길 때 몇 개씨 넘길지 정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                          |
| <p><strong>마우스 오버 효과</strong></p><p>갤러리 내 썸네일 위에 마우스를 올리면 보여질 효과를 선택할 수 있습니다.</p><p></p><ul><li><strong>없음</strong><br></li><li><p><strong>배경 변화</strong><br>썸네일에 마우스를 올리면 썸네일 배경색이 살짝 비추는 효과를 제공할 수 있습니다.<br></p><ul><li><strong>마우스 올릴 때 썸네일 배경</strong><br>마우스를 올릴 때 비출 배경색을 지정할 수 있습니다.<br></li></ul></li><li><p><strong>확대하기</strong></p><p>썸네일에 마우스를 올리면 썸네일 이미지가 확대되어 보이는 효과를 제공할 수 있습니다.</p></li></ul> |

{% hint style="info" %}
인스타그램 섹션 연동 해제는 인스타그램 섹션 개별 설정에서 연동된 인스타그램 계정 우측 \[X] 버튼을 클릭하면 됩니다. 해제 시 연동했던 인스타그램 개인 정보는 즉시 삭제됩니다.
{% endhint %}

## 11. 사용자 편집 섹션

### 11-1. 사용자 편집 섹션이란?

![고객사 아보 프렌즈의 사용자 편집 섹션 사용예](/files/-MBDSlNe_6G1Hupvf7ST)

사용자 편집 섹션은 웹사이트에 브랜드 스토리 등 다양한 콘텐츠를 담기 위해 사용할 수 있는 직접 편집 가능한 섹션입니다.

### 11-2. 사용자 편집 섹션 개별 편집하기

![](/files/-MBIIccNFMIYs-e-zZ2V)

| 설정 항목                                                                                                                                                                                                                                                                                                                                         |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>너비</strong><br>사용자 편집 섹션 내 상품 썸네일 영역의 너비를 지정할 수 있습니다.</p><p></p><ul><li><strong>좁은</strong><br>너비가 960px 로 화면에 보여집니다.<br></li><li><strong>보통</strong><br>너비가 1200px 로 화면에 보여집니다.<br></li><li><strong>넓은</strong><br><a href="/pages/-M7qQfyuCCCEKHo3pjYJ#3-1-greater-than">전체 > 공통</a> 설정의 최대 너비(기본 1800px) 로 화면에 보여집니다.</li></ul> |
| <p><strong>단</strong><br>사용자 편집 섹션의 단을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                        |
| <p><strong>배경</strong><br>사용자 편집 섹션의 배경 색상을 지정할 수 있습니다.</p>                                                                                                                                                                                                                                                                                   |
| <p><strong>배경 이미지</strong></p><p>사용자 편집 섹션의 배경 이미지를 지정할 수 있습니다.</p><p></p><ul><li><p><strong>스크롤할 때 배경 고정하기</strong></p><p>화면을 마우스 스크롤하여 이동해도 배경은 고정된 상태로 이동하지 않습니다.</p></li></ul>                                                                                                                                                            |

## 12. 요소

사용자 편집 섹션에서 다양한 요소를 추가하여 원하는 컨텐츠를 자유롭게 구성할 수 있습니다.

### 12-1. 요소 추가 방법 및 종류

**Step 1.** 사용자 편집 섹션을 선택한 후 하단의 요소 추가하기 버튼을 누르세요.

**Step 2.** 요소 추가하기 패널에 보이는 여러 요소를 사용자 편집 섹션에 추가하고 마우스로 끌어당겨 위치를 지정하세요

![](/files/-MBSkwwj1jMQ2y0NES2W)

| 요소 유형                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>공백</strong></p><p>위 아래 간격을 띄워야 할 때 사용할 수 있으며 사용자 편집 섹션에 추가한 뒤 마우스로 드래그하여 높이 조절을 할 수 있습니다.<br></p><ul><li><p><strong>개별 편집 패널</strong></p><ul><li><p><strong>높이</strong></p><p>높이를 픽셀 단위로 지정할 수 있습니다.</p></li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| <p><strong>제목글</strong></p><p>콘텐츠의 제목, 부제목 등에 해당하는 글자를 입력할 수 있는 요소입니다. 검색 엔진에서 제목글 요소를 사용하여 글자를 입력할 경우 검색 엔진에서 제목으로 인식할 수 있습니다.</p><p></p><ul><li><p><strong>텍스트 속성 바</strong></p><p>글자 크기, 색상, 두께, 기울기, 밑줄, 정렬 방식, 링크 등 텍스트 속성을 변경할 수 있습니다.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| <p><strong>줄글</strong></p><p>제목이 아닌 설명 등 내용에 해당하는 글을 입력할 수 있는 요소입니다.</p><p></p><ul><li><p><strong>텍스트 속성 바</strong></p><p>글자 크기, 색상, 두께, 기울기, 밑줄, 정렬 방식, 링크 등 텍스트 속성을 변경할 수 있습니다.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| <p><strong>이미지</strong></p><p>사용자 편집 섹션에 이미지를 추가할 수 있습니다.</p><p></p><ul><li><p><strong>개별 편집 패널</strong></p><ul><li><p><strong>설정</strong></p><ul><li><p><strong>이미지 업로드</strong></p><p>이미지를 업로드할 수 있습니다.<br></p></li><li><p><strong>링크 주소</strong></p><p>이미지에 링크를 추가할 수 있습니다.</p></li></ul><p></p></li><li><p><strong>디자인</strong></p><ul><li><p><strong>너비</strong> </p><p>이미지의 너비를 % 단위로 지정할 수 있습니다.<br></p></li><li><p><strong>비율</strong></p><p>이미지 출력시 너비, 높이 비율을 지정할 수 있습니다.<br></p></li><li><p><strong>정렬</strong></p><p>원본 비율이 아닌 경우 이미지의 중심점을 지정할 수 있습니다.</p></li></ul></li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| <p><strong>동영상</strong></p><p>사용자 편집 섹션에 동영상을 추가할 수 있습니다.</p><p></p><ul><li><p><strong>개별 편집 패널</strong></p><ul><li><p><strong>영상 주소</strong></p><p>Youtube, Vimeo URL을 추가하여 영상을 출력할 수 있습니다.<br></p></li><li><p><strong>썸네일</strong></p><p>처음 로딩시 보여줄 썸네일을 별도로 설정할 수 있습니다.<br></p></li><li><p><strong>자동 재생</strong></p><p>사용 \[✔︎] 선택 시 화면 로딩 후 영상이 자동 재생됩니다.<br></p></li><li><p><strong>반복 재생</strong></p><p>사용 \[✔︎] 선택 시 영상이 반복 재생됩니다.<br></p></li><li><p><strong>음소거</strong></p><p>사용 \[✔︎] 선택 시 영상이 음소거 처리됩니다.</p></li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| <p><strong>선</strong></p><p>사용자 편집 섹션에 구분선을 추가할 수 있습니다.</p><p></p><ul><li><p><strong>개별 편집 패널</strong></p><ul><li><p><strong>너비</strong></p><p>선의 너비를 % 단위로 지정할 수 있습니다.</p><p></p></li><li><p><strong>정렬</strong></p><p>선의 정렬 방식을 선택할 수 있습니다.<br></p></li><li><p><strong>색상</strong></p><p>선 색상을 지정할 수 있습니다.</p></li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>슬라이드</strong></p><p>사용자 편집 섹션에 이미지를 좌우로 이동하며 볼 수 있는 요소입니다.</p><p></p><ul><li><p><strong>이미지</strong><br>슬라이드에 보여질 이미지를 추가하고 설정할 수 있습니다.</p><ul><li><strong>제목</strong><br>슬라이드에 보여질 제목을 지정할 수 있습니다.<br></li><li><strong>설명</strong><br>슬라이드에 보여질 설명을 입력할 수 있습니다.<br></li><li><strong>링크</strong><br>주소 슬라이드를 누르면 이동할 링크를 설정할 수 있습니다.<br></li></ul></li><li><p><strong>디자인</strong><br>슬라이드의 출력 방식을 설정할 수 있습니다.<br></p><ul><li><p><strong>비율</strong></p><p>슬라이드 너비, 높이 비율을 지정할 수 있습니다.<br></p></li><li><p><strong>글자 정렬</strong></p><p>슬라이드에 보이는 제목, 설명의 정렬 방식을 지정할 수 있습니다.<br></p></li><li><strong>글자 크기</strong><br>슬라이드에 보이는 제목, 설명의 글자 크기를 지정할 수 있습니다.<br></li><li><strong>자동 재생</strong><br>사용 \[✔︎] 선택 시 슬라이드가 자동으로 넘어가도록 설정할 수 있습니다.<br></li><li><p><strong>전환 효과</strong></p><p>이미지 슬라이드의 전환효과를 설정할 수 있습니다.<br></p></li><li><strong>표시 선택</strong><br>슬라이드에 보이는 요소의 노출 여부를 선택할 수 있습니다.</li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| <p><strong>버튼</strong></p><p>사용자 편집 섹션에 버튼 모양의 링크를 추가할 수 있습니다.</p><p></p><ul><li><p><strong>설정</strong></p><ul><li><strong>글자</strong><br>버튼 글자를 입력할 수 있습니다.  <br></li><li><strong>링크 주소</strong><br>버튼을 클릭하면 이동할 경로를 설정할 수 있습니다.<br>새 탭에서 열기 사용 \[✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다. </li></ul><p></p></li><li><p><strong>디자인</strong></p><ul><li><p><strong>종류</strong></p><p>버튼 스타일을 설정할 수 있습니다. <br></p></li><li><p><strong>정렬</strong></p><p>버튼 글자의 정렬 방식을 설정할 수 있습니다. </p><p></p></li><li><p><strong>색상</strong></p><p>버튼의 색상을 설정할 수 있습니다.  <br></p></li><li><p><strong>크기</strong></p><p>버튼의 크기를 설정할 수 있습니다.</p><p></p></li><li><p><strong>글자 크기</strong></p><p>버튼의 글자 크기를 설정할 수 있습니다.  </p></li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>아이콘</strong></p><p>사용자 편집 섹션에 화면에 아이콘을 노출해야 할 경우 사용할 수 있습니다.</p><p></p><ul><li><p><strong>설정</strong></p><p>입력창에 해당하는 정보 혹은 URL을 입력하면 아이콘을 보여줄 수 있습니다.<br></p></li><li><p><strong>디자인</strong></p><ul><li><strong>정렬</strong><br>아이콘 그룹의 정렬 방식을 지정할 수 있습니다.<br></li><li><p><strong>색상</strong></p><p>아이콘의 색상 속성을 설정할 수 있습니다.</p></li></ul></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| <p><strong>폼</strong></p><p>사용자 편집 섹션에 상점 웹사이트 방문자가 상점 관리자에게 이메일을 보낼 수 있는 폼을 만들 수 있습니다. 폼으로 보낸 이메일은 <a href="https://www.sixshop.com/store-setting/email">\[식스샵 > 상점 설정 > 이메일]</a>에 설정한 '관리자 수신 주소'로 수신됩니다.</p><p></p><ul><li><p><strong>항목</strong><br>아래 항목을 추가할 수 있습니다.<br></p><ul><li><strong>단답</strong><br>한 줄로 된 글자를 입력할 수 있습니다.<br></li><li><strong>장문</strong><br>여러 줄의 글을 입력할 수 있습니다.<br></li><li><strong>이메일</strong><br>이메일 주소를 입력할 수 있습니다.<br></li><li><strong>전화번호</strong><br>전화번호를 입력할 수 있습니다.<br></li><li><strong>날짜</strong><br>날짜를 입력할 수 있습니다.<br></li><li><strong>단일 선택</strong><br>하나의 옵션을 선택할 수 있습니다.<br></li><li><strong>복수 선택</strong><br>다수의 옵션을 선택할 수 있습니다.</li></ul><p></p><ul><li><strong>목록 선택</strong><br>옵션이 많을 경우 선택 상자를 통해 옵션을 선택할 수 있습니다.<br></li></ul></li><li><p><strong>설정</strong></p><ul><li><strong>이름</strong><br>폼의 제목을 입력할 수 있으며 상점 관리자에게 이메일 전송시 포함됩니다.<br></li><li><strong>버튼 글자</strong><br>정보 입력을 완료할 때 누르는 버튼의 글자를 지정할 수 있습니다.<br></li><li><strong>개인정보 수집 및 이용 동의</strong><br>폼을 통해 수집하는 정보 중 개인 정보가 포함되어 있을 경우 사용 \[✔︎] 을 선택하세요.<br></li><li><strong>개인정보 수집 및 이용 내용</strong><br>약관 동의를 위해 확인해야 할 개인정보 수집 및 이용 정책을 기입해주세요.<br></li></ul></li><li><p><strong>디자인</strong></p><ul><li><strong>글자 색상</strong><br>폼 입력창 제목 글자의 색상을 설정할 수 있습니다.<br></li><li><strong>버튼 종류</strong><br>버튼의 스타일을 지정할 수 있습니다.</li></ul><p></p><ul><li><strong>버튼 정렬</strong><br>버튼 글자의 정렬 방식을 지정할 수 있습니다.<br></li><li><p><strong>버튼 색상</strong></p><p>버튼의 색상을 설정할 수 있습니다.</p></li></ul></li></ul> |
| <p><strong>지도</strong></p><p>사용자 편집 섹션에 지도를 추가할 수 있습니다.</p><ol start="9"><li><a href="https://help.sixshop.com/learn-sixshop/store-design/sections-and-elements#id-9">지도 섹션 안내를 참고하세요.</a></li></ol>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

## 13. 전광판 배너 섹션&#x20;

전광판 배너 섹션을 추가하여 노출하고 싶은 문구를 움직이는 전광판 배너로 만들 수 있습니다. \
전광판 배너 섹션은 머리글과 메인 배너 섹션의 하단, 바닥 글의 상단에 노출할 수 있습니다. &#x20;

![](/files/-MgmY0dVbEYZx_YKIAVk)

### 13-1. 전광판 배너 섹션 개별 편집하기&#x20;

#### **\[ 문구 및 링크 설정하기 ]**&#x20;

전광판 배너 섹션을 더블 클릭하면 아래와 같이 문구와 링크 주소를 입력할 수 있는 패널이 노출됩니다.&#x20;

![](/files/-MgmXeZfK8xzXCkpFtgz)

{% hint style="info" %}
**\[ 이모지 사용 단축키 ]**\
이모지를 활용하면 전광판 배너 섹션을 훨씬 다채롭게 꾸며볼 수 있습니다.\
이모지란?👀 그림 형태로 사람과 사물을 표현하는 일종의 이모티콘입니다.😉\\

Windows : 윈도우키 + ; (세미콜론) &#x20;
\
Mac: Ctrl + ⌘ + space&#x20;
{% endhint %}

#### \[ 바깥 여백 설정하기 ]

전광판 배너 섹션을 더블 클릭 > 디자인 버튼을 클릭하면 아래와 같이 바깥 여백(섹션 사이 간격)을 설정할 수 있는 패널이 노출됩니다.&#x20;

![](/files/-MgmXg6uOsF3XkJoej8l)

### 13-2. 전광판 배너 섹션 공통 스타일 설정하기

\[디자인 편집 > 좌측 하단 ≡ > 스타일 편집 > 전광판 배너 섹션]에서 전광판 배너 섹션의 공통 스타일을 설정할 수 있습니다.&#x20;

![](/files/-MgmXmKQxh372Y3VKwi4)

| 설정 항목                  |
| ---------------------- |
| <p><strong>색상</strong> |

</p><p>전광판 배너에 노출할 문구와 배경 색상을 변경할 수 있습니다.</p>                               |
| <p><strong>글자</strong>
</p><p>전광판 배너에 노출된 문구의 글꼴, 굵기, 크기, 자간을 변경할 수 있습니다.</p>                      |
| <p><strong>문구 사이 간격</strong>
</p><p>입력한 문구 사이의 간격을 설정 가능합니다.</p>                                   |
| <p><strong>안쪽 여백</strong>
</p><p>문구와 배너 위아래 사이의 간격을 조정할 수 있습니다.</p>                                |
| <p><strong>경계선 넣기</strong>
</p><p>전광판 배너에 테두리를 넣을 수 있습니다.</p>                                      |
| <p><strong>좌우 스크롤 속도</strong>
</p><p>정지, 느림, 보통, 빠름 4가지로 속도를 조정할 수 있습니다.</p>                       |
| <p><strong>마우스 올릴 때 일시 정지하기</strong>
</p><p>데스크톱에서 배너 위로 마우스 커서 위치 시 배너의 움직임이 멈추도록 설정할 수 있습니다.</p> |
| <p><strong>좌우 스크롤 방향</strong>
</p><p>문구가 움직이는 방향을 설정할 수 있습니다. (왼쪽→오른쪽, 오른쪽→왼쪽)</p>                 |

## 14. 후기 섹션 <a href="#id-14" id="id-14"></a>

후기 섹션은 등록된 후기 중 원하는 후기를 선택하여 원하는 페이지에 노출할 수 있는 섹션입니다. 아직 후기가 없는 상태라면 [후기 게시판을 추가](https://help.sixshop.com/learn-sixshop/store-design/pages/-LziixET4LfXmG_qfEJm#1.)하고, 상품 후기가 등록된 이후 후기 섹션을 이용해 주세요.

![](/files/AHcdKjVj999FQHlA8dqd)

### 14-1. 후기 섹션 개별 편집하기 <a href="#id-14-1" id="id-14-1"></a>

#### \[ 후기 불러오기 ] <a href="#undefined-1" id="undefined-1"></a>

#### Step1. 후기 섹션을 추가해 주세요. <a href="#step1.-." id="step1.-."></a>

디자인 편집 페이지 하단의 \[+ 섹션 추가하기] 버튼을 클릭한 후 후기 섹션을 클릭하여 후기 섹션을 추가할 수 있습니다.

#### Step2. 후기 섹션을 더블 클릭하면 나타나는 설정 창에서 \[후기 추가하기]를 클릭해 주세요. <a href="#step2.-." id="step2.-."></a>

후기 섹션에 아직 불러온 후기가 없을 때는 샘플 후기가 노출되며, 샘플 후기는 실제 사이트에 노출되지 않습니다.

![](/files/uk0n4CgwxCMPoQ7EyIVJ)

#### Step3. \[후기 불러오기]를 클릭해 주세요. <a href="#step3.-." id="step3.-."></a>

![](/files/haZTt8vwyemClDu6rSOW)

#### Step4. 후기 섹션에 노출할 후기를 선택하고 \[저장]을 클릭해 주세요. <a href="#step4.-." id="step4.-."></a>

![](/files/MKY82lrr6jZ6o1iRaO85)

#### Step5. \[완료] 버튼을 클릭하면 설정이 완료됩니다. <a href="#step5.-." id="step5.-."></a>

​

#### \[ 후기 관리하기 ] <a href="#undefined-2" id="undefined-2"></a>

후기 섹션을 더블 클릭하면 나타나는 설정 창에서 \[후기 관리하기]를 클릭하여 후기를 관리할 수 있습니다.

* **후기 내용 수정하기**

후기 내용을 수정하고 \[저장]을 클릭하면 후기 섹션에 노출될 후기 내용을 수정할 수 있습니다.상품 상세페이지, 후기 게시판에 노출되는 원본 후기 내용은 변경되지 않습니다.

![](/files/2aJKQCuz2ZswJFjM11hp)

* **후기 노출 순서 변경하기**

'≡' 아이콘을 클릭한 상태로 드래그하여 후기 섹션에 노출되는 후기 순서를 조정할 수 있습니다.

![](/files/Imp3g5dSjJJQInrSk3RU)

* **상품 사진으로 바꾸기**

'상품 사진으로 바꾸기'를 \[✔︎] 체크하면 후기 이미지 대신 상품 대표 이미지가 노출됩니다.

![](/files/oxTtomKRYkT0I61FBryJ)

#### \[ 후기 노출 방식 설정하기 ] <a href="#undefined-3" id="undefined-3"></a>

후기 섹션을 더블 클릭하면 나타나는 설정 창에서 \[디자인]을 클릭하면 후기 노출 방식을 설정할 수 있습니다.

![](/files/lt6xZeZXIXadnY9pmA66)

<table><thead><tr><th>설정 항목</th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><p><strong>종류</strong> </p><p>후기 섹션의 노출 방식을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>격자</strong></p><p>후기 썸네일이 격자형으로 나열되어 화면에 보입니다.</p></li><li><p><strong>슬라이드</strong></p><p>후기 썸네일이 좌우로 이동하며 화면에 보입니다.</p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>너비</strong> </p><p>후기 섹션 내 콘텐츠 영역의 너비를 설정할 수 있습니다.</p><p></p><ul><li><p><strong>좁은</strong></p><p>너비가 960p로 화면에 보입니다.</p></li><li><p><strong>보통</strong>  </p><p>너비가 1,200px 로 화면에 보입니다.</p></li><li><p><strong>넓은</strong></p><p>너비가 전체 > 공통 설정의 최대 너비(기본 1,800px)로 화면에 보입니다. </p></li><li><p><strong>꽉 찬</strong></p><p>너비가 꽉 찬 형태로 화면에 보입니다.</p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>전체 배경</strong></p><p>후기 섹션의 전체 배경 색상과 불투명도를 설정할 수 있습니다.</p><p></p><ul><li><p><strong>색상</strong></p><p>후기 섹션의 전체 배경 색상을 설정할 수 있습니다.</p></li><li><p><strong>불투명도</strong></p><p>후기 섹션 전체 배경 색상의 불투명도를 설정할 수 있습니다. </p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>안쪽 여백</strong></p><p>후기 섹션의 위쪽, 아래쪽 여백을 설정할 수 있습니다.</p></td><td></td><td></td></tr><tr><td><p><strong>열</strong></p><p>한 줄에 몇 개의 후기 썸네일을 보여줄지 설정할 수 있습니다. </p></td><td></td><td></td></tr><tr><td><p><strong>후기 개수</strong></p><p>후기 섹션에 총 몇 개의 후기 썸네일을 보여줄지 설정할 수 있습니다. </p></td><td></td><td></td></tr><tr><td><p><strong>후기 간 간격</strong> </p><p>후기 썸네일 간 간격을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>가로</strong> </p><p>후기 썸네일 간 좌우 간격을 설정할 수 있습니다.</p></li><li><p><strong>세로 (격자형 후기 섹션 전용)</strong></p><p>후기 썸네일 간 상하 간격을 설정할 수 있습니다.</p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>후기 안쪽 여백</strong></p><p>후기 섹션 안쪽의 후기 컨텐츠 좌우, 상하 여백을 설정할 수 있습니다. </p></td><td></td><td></td></tr><tr><td><p><strong>후기 배경</strong></p><p>후기 섹션의 후기 배경 색상과 모서리의 둥근 정도를 설정할 수 있습니다. </p><ul><li><p><strong>색상</strong></p><p>후기 배경 색상을 설정할 수 있습니다.</p></li><li><p><strong>둥근 모서리</strong> </p><p>후기 배경 모서리의 둥근 정도를 설정할 수 있습니다. </p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>내용 정렬</strong></p><p>후기 평점, 후기 내용, 글쓴이, 상품으로 이동 버튼의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 선택할 수 있습니다.</p></td><td></td><td></td></tr><tr><td><p><strong>후기 사진 보이기</strong></p><p>'후기 사진 보이기'를 사용[✔︎]으로 체크하면 후기 사진이 노출되며, 후기 사진의 스타일 속성을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>비율</strong> </p><p>후기 사진의 비율을 2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1 중 선택할 수 있습니다.</p></li><li><p><strong>너비</strong> </p><p>후기 사진의 너비를 설정할 수 있습니다.</p></li><li><p><strong>정렬</strong> </p><p>후기 사진의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 선택할 수 있습니다. </p><p>후기 사진의 너비를 100% 보다 작게 설정한 상태에서만 작동합니다.</p></li><li><p><strong>아래 여백</strong></p><p>후기 사진과 후기 평점 사이의 여백을 설정할 수 있습니다. </p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>후기 평점 보이기</strong></p><p>'후기 평점 보이기'를 사용[✔︎]으로 체크하면 후기 평점이 노출되며, 후기 평점의 스타일 속성을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>크기</strong> </p><p>후기 평점의 크기를 설정할 수 있습니다.</p></li><li><p><strong>간격</strong></p><p>후기 평점 사이의 간격을 설정할 수 있습니다.</p></li><li><p><strong>아래 여백</strong></p><p>후기 평점과 후기 내용 사이의 여백을 설정할 수 있습니다.</p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>후기 내용 보이기</strong></p><p>'후기 내용 보이기'를 사용[✔︎]으로 체크하면 후기 내용이 노출되며, 후기 내용의 스타일 속성을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>크기</strong> </p><p>후기 내용의 글자 크기를 설정할 수 있습니다.</p></li><li><p><strong>색상</strong> </p><p>후기 내용의 글자 색상을 설정할 수 있습니다.</p></li><li><p><strong>아래 여백</strong></p><p>후기 내용과 글쓴이 사이의 여백을 설정할 수 있습니다.</p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>글쓴이 보이기</strong></p><p>'글쓴이 보이기'를 사용[✔︎]으로 체크하면 글쓴이가 노출되며, 글쓴이 스타일 속성을 설정할 수 있습니다.</p><p></p><ul><li><p><strong>크기</strong> </p><p>글쓴이의 글자 크기를 설정할 수 있습니다.</p></li><li><p><strong>색상</strong> </p><p>글쓴이의 글자 색상을 설정할 수 있습니다.</p></li><li><p><strong>아래 여백</strong></p><p>글쓴이와 상품으로 이동 버튼 사이의 여백을 설정할 수 있습니다.</p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>상품으로 이동 버튼 보이기</strong></p><p>'상품으로 이동 버튼 보이기'<br><br>사용 [✔]을 체크하면 상품으로 이동하는 버튼이 노출되며, 버튼 글자 크기와 버튼에 노출할 문구를 설정할 수 있습니다. 삭제된 상품의 후기인 경우 버튼 클릭 시 '현재 구매 불가한 상품입니다.' 알림이 노출됩니다.</p><p></p><ul><li><p><strong>버튼 크기</strong></p><p>상품으로 이동하는 버튼의 크기를 작게 / 보통 / 크게 중에서 설정할 수 있습니다.<br></p></li><li><p><strong>글자 크기</strong></p><p>상품으로 이동하는 버튼의 글자 크기를 설정할 수 있습니다. </p></li><li><p><strong>상품 보러 가기</strong></p><p>상품으로 이동하는 버튼에 노출할 문구를 직접 입력할 수 있습니다. </p></li></ul></td><td></td><td></td></tr><tr><td><p><strong>무한 순환 (슬라이드형 후기 섹션 전용)</strong></p><p>무한 순환을 사용[✔︎]으로 체크하면 좌우 이동 버튼을 눌렀을 때 지정한 총개수를 다 보고 다시 처음 썸네일부터 슬라이드가 이어질 수 있게 합니다.</p></td><td></td><td></td></tr><tr><td><p><strong>자동 재생</strong> <strong>(슬라이드형 후기 섹션 전용)</strong></p><p>자동 재생을 사용[✔︎]으로 체크하면 지정한 재생 간격마다 다음 슬라이드로 이동합니다.</p><ul><li><strong>마우스 올릴 때 일시 정지하기</strong></li></ul><p>사용[✔︎]으로 체크하면 후기 섹션에 마우스를 올리면 자동 재생을 잠시 멈춥니다. </p><p></p></td><td></td><td></td></tr><tr><td><p><strong>전환할 때 넘어가는 후기 개수 (슬라이드형 후기 섹션 전용</strong>)</p><p>후기 슬라이드를 좌우로 이동할 때 썸네일을 몇 개씩 넘겨 보여줄지 지정할 수 있습니다.</p></td><td></td><td></td></tr><tr><td><p><strong>표시 선택</strong> <strong>(슬라이드형 후기 섹션 전용</strong>)</p><p>'이전 / 다음 화살표 보이기'를 설정할 수 있습니다.</p></td><td></td><td></td></tr></tbody></table>

​

### 14-2. 후기 섹션 공통 스타일 편집하기 <a href="#id-14-2" id="id-14-2"></a>

\[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 후기 섹션]에서 후기 섹션의 공통 스타일을 설정할 수 있습니다.

![](/files/lZIAcTNHwwHBBit7HxDo)

<table><thead><tr><th>설정 항목</th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><p><strong>후기</strong> <strong>내용</strong></p><ul><li><p><strong>글꼴</strong> </p><p>후기 내용 글자의 글꼴을 설정할 수 있습니다.</p></li><li><p><strong>굵기</strong> </p><p>후기 내용 글자의 굵기를 설정할 수 있습니다.</p></li><li><p><strong>자간</strong> </p><p>후기 내용 글자 사이의 간격을 설정할 수 있습니다.</p></li><li><strong>줄간</strong>후기 내용 사이의 줄간격을 설정할 수 있습니다.</li></ul></td><td></td><td></td></tr><tr><td><p><strong>글쓴이</strong> </p><ul><li><p><strong>글꼴</strong> </p><p>글쓴이 글자의 글꼴을 설정할 수 있습니다.</p></li><li><p><strong>굵기</strong> </p><p>글쓴이 글자의 굵기를 설정할 수 있습니다.</p></li><li><p><strong>자간</strong></p><p>글쓴이 글자의 굵기를 설정할 수 있습니다.</p></li></ul></td><td></td><td></td></tr></tbody></table>