식스샵 고객센터
식스샵 웹사이트채팅 상담하기인스타그램개선 요청하기
Search
⌃K
Links

콘텐츠 구성 요소

상점 웹사이트를 통해 고객에게 보여줄 다양한 콘텐츠를 추가하고 제작할 수 있습니다.

목차

1. 콘텐츠 구성 요소란?

디자인 편집 페이지를 통해 상점 웹사이트의 각 페이지에서 보여질 콘텐츠를 구성할 수 있는 섹션과 섹션을 구성하는 요소를 일컫는 말입니다. 아래 안내를 통해 섹션과 요소가 각각 어떤 웹사이트의 콘텐츠를 구성하고 사용될 수 있는지 살펴보세요.

2. 섹션

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

3. 섹션 추가 및 설정하기

디자인 에디터의 기본 사용방법은 에디터 기본 정보에서 보다 상세히 확인하실 수 있습니다.

3-1. 섹션 추가하기

Step 1. 디자인 편집 페이지에서 하단 도구 모음 중 [+ 섹션 추가하기] 버튼(2번)을 클릭해 주세요.
Step 2. 아래와 같은 섹션 추가하기 패널이 보이면 원하는 섹션을 선택하여 페이지 내 콘텐츠 영역에 추가해보세요.
​

3-1. 섹션 설정하기

개별 편집하기 섹션에 포함될 콘텐츠를 추가하거나 관리하고 개별 섹션에 대한 스타일 설정을 하려면 섹션을 더블클릭 하거나 섹션을 선택하면 보이는 태그 아이콘 중 연필 요양의 '개별 편집' 버튼을 누르세요.
공통 스타일 설정하기 동일한 성격의 섹션에 공통적으로 적용되는 스타일 속성 값을 변경하려면 섹션 선택시 보이는 태그 아이콘 중 파레트 모양의 버튼을 누르세요.

4. 메인 배너 섹션

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

고객사 발레시모의 메인배너 섹션 사용 예시
페이지 상단에 배치되며 각 페이지 당 하나씩만 추가할 수 있는 섹션입니다.
페이지 내 콘텐츠를 대표하는 배너를 노출하고 다양한 이벤트 등 상점에서 강조하고자 하는 정보를 고객에게 강조하는 용도로 활용됩니다. 메인 배너 섹션을 잘 활용하면 웹사이트의 분위기나 첫인상에 매우 큰 영향을 끼칠 수 있습니다.
​

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

메인 배너 섹션에 이미지, 색상, 동영상 중 하나의 탭을 선택하여 메인 화면으로 구성할 수 있습니다.
이미지 혹은 색상 탭을 사용하면 여러 개의 배너를 슬라이드 형태로 설정할 수 있고, 동영상 탭을 사용하면 하나의 배너만 화면에 보입니다.

[ 이미지 배너 추가하기 ]

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

패널 하단의 [+] 버튼을 클릭하여 이미지를 업로드하고 드래그하여 순서를 변경할 수 있습니다.
Step 2. 업로드한 이미지 위에 마우스를 올려 톱니바퀴 모양의 '설정' 버튼을 클릭해 주세요.
Step 3. 이미지 배너에 적용할 설정 항목을 확인해 주세요.
설정 항목
제목
메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다.
설명
메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다.
버튼 글자
전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다.
링크 주소
배너 이미지 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다.
새 탭에서 열기 사용 [✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다.
배경 위 이미지
이미지를 업로드하면 기존에 설정된 이미지 위에 새로운 이미지를 추가할 수 있습니다.
배경 위 이미지 위치
배경 위 이미지의 위치를 왼쪽과 오른쪽 중에서 설정할 수 있습니다.
​

[ 색상 배너 추가하기 ]

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

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

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

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

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

[ 동영상 배너 추가하기 ]

Step 1. 메인 배너 섹션 개별 편집 패널의 '동영상' 탭을 클릭해 주세요.
Step 2. 파일 업로드 옆 […] 버튼을 클릭하여 MP4 동영상 파일을 업로드해 주세요.
Step 3. 동영상 배너에 적용할 설정 항목을 확인해 주세요.
설정 항목
MP4 파일
10MB 이하 확장자 MP4 파일을 등록해 주세요.
  • MP4 파일 제작 시 크롬, 사파리 등 여러 브라우저에 호환성이 높은 'AVC' 코덱을 적용해 주세요.
제목
메인 배너 섹션에 노출할 제목을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다.
설명
메인 배너 섹션에 노출할 설명을 입력할 수 있습니다. 엔터로 줄 바꿈이 가능합니다.
버튼 글자
전환을 위한 버튼을 추가하고자 할 때 버튼 글자를 입력할 수 있습니다. 버튼 노출을 원하지 않는다면 입력하지 않아도 됩니다.
링크 주소
배너 이미지 또는 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다.
새 탭에서 열기 사용 [✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다.
[메인 배너 섹션 동영상 등록 방식 변경 안내] 2020년 12월 17일부터 메인 배너 섹션 동영상 등록 방식 중 'Youtube / Vimeo URL 등록' 방식이 지원 중단됩니다. 해당 등록 방식 지원이 중단되는 사유는 Youtube 및 Vimeo 등 동영상 스트리밍 서비스 업체의 지속적인 정책 변경과 모바일 미지원 문제로 메인 배너 섹션 동영상 기능이 정상 작동하지 않는 상황이 발생하고 있기 때문입니다. 문제 해결을 위해 최근 새로운 동영상 업로드 방식인 'MP4 파일 업로드' 방식 추가 업데이트를 진행하였는데요. 더 나은 사용자 경험 제공을 목적으로 문제가 발생하는 'Youtube / Vimeo URL 등록' 방식 지원이 중단되는 점 양해 부탁드립니다. 기존 'Youtube / Vimeo URL 등록' 방식을 사용하는 고객님들의 웹사이트에서는 동영상이 동일하게 노출되나 영상 재생되지 않는 상태로 변경될 수 있습니다. 영상이 재생되지 않거나 다른 영상으로 변경 시에는 'MP4 파일 업로드' 방식을 사용해 주셔야 하는 점 참고 부탁드리겠습니다.
​

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

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

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

메인 배너 섹션의 경우 모바일 전용 메인 배너 섹션 기능을 이용하여 데스크탑과 모바일에 각각 다른 이미지를 등록할 수 있습니다.
모바일 전용 메인 배너 섹션 권장 사이즈: 가로 기준 840 ~ 1,440px
​

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

Step 1. 모바일 뷰포트로 전환해 주세요.

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

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

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

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

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

메인 배너 섹션의 종류에 따라 모바일 전용 메인 배너 섹션의 높이와 비율 설정 방법이 다릅니다.
모바일 메인 배너 섹션의 종류를 확인하려면 디자인 편집 페이지 오른쪽 하단의 뷰포트 설정 버튼을 눌러 모바일 뷰포트로 전환해 주세요. 단축키: Ctrl + Shift + M
[모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 확인하실 수 있습니다.
  • 메인 배너 섹션의 종류가 높이 고정인 경우
    모바일 전용 메인 배너 섹션의 높이를 데스크탑의 높이와 다르게 설정할 수 있습니다.
    [모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 높이 조정이 가능합니다.
    ​
  • 메인 배너 섹션의 종류가 비율 고정인 경우 데스크탑에서 설정한 메인 배너 섹션의 비율과 동일하게 설정됩니다. [데스크탑 뷰포트 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]에서 비율이 조정이 가능합니다.
메인 배너 섹션의 종류별 이미지 설정 방법이 궁금하다면 메인 배너 섹션의 크기 안내서를 확인해 주세요.
​

5. 상품 목록 섹션

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

고객사 SETSETSET의 상품 목록 섹션 사용예
상품 목록 섹션 온라인 쇼핑몰을 만드는데 가장 중요한 구성 요소로써 상점 관리자 > 상품에 추가한 상품을 상점 웹사이트 내에서 보여주고자 할 때 사용할 수 있는 섹션입니다. 상품 목록 섹션은 페이지마다 하나씩 추가할 수 있으며 메뉴 구성을 어떻게 하느냐에 따라서 고객이 상품을 살펴보는 방식을 다양하게 제공할 수 있습니다.
​

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

상품 목록 섹션에서 상품을 보여주려면 상점 관리자에 상품이 추가되어 있어야 하며, 해당 상품이 카테고리로 분류되어야 합니다. 상품 등록 방법을 확인하고 싶으시다면 상품 > 상품 추가하기 안내서를 참고해 주세요.

[ 상품 추가하기 ]

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

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

상품 목록 섹션 더블 클릭 혹은 상품 목록 섹션 클릭 후 노출되는 펜 모양 아이콘(개별 편집)을 클릭하면 개별 편집 패널이 노출됩니다. '디자인' 탭에서 아래 설정 항목을 확인할 수 있습니다.
설정 항목
열
한 줄에 몇개의 상품을 보여줄지 설정할 수 있습니다.
페이지당 상품 개수
한 페이지에 몇개의 상품을 보여줄지 설정할 수 있습니다. 지정 개수보다 상품이 많은 경우 목록 하단에 쪽번호가 보이며 쪽번호를 눌러 다음 페이지로 이동할 수 있습니다.
​
  • 스타일 편집값으로 돌리기
    ​상점 공통 스타일에 지정한 기본 상품 개수로 초기화 합니다.
필터 옵션
  • 필터 보이기 '카테고리' 탭에서 지정한 카테고리 필터가 보여집니다.
  • 전체 필터 보이기
    '카테고리' 탭에서 지정한 카테고리 외에 모든 상품을 한 번에 볼 수 있는 '전체' 필터가 보여집니다.
정렬 필터 사용 [✔︎] 선택 시 정렬 필터가 보여집니다. 정렬 조건별 사용 여부를 선택할 수 있으며 정렬 조건의 순서를 드래그 방식으로 변경할 수 있습니다.
​
  • 기본순 [식스샵 > 상품 > 전체]의 전체 상품을 기준으로 상위 노출된 상품부터 순서대로 노출됩니다.
  • 높은가격순 할인가, 등급 할인, 할인 행사가 반영된 가격을 기준으로 가격이 높은 상품부터 순서대로 노출됩니다.
  • 낮은가격순 할인가, 등급 할인, 할인 행사가 반영된 가격을 기준으로 가격이 낮은 상품부터 순서대로 노출됩니다.
  • 최신등록순 상품 등록 시점을 기준으로 최신 등록한 상품부터 순서대로 노출됩니다.
  • 평점높은순 평점 평균이 높은 상품부터 순서대로 노출됩니다.
  • 후기많은순 후기가 많은 상품부터 순서대로 노출됩니다. 후기 연동으로 늘어난 후기 개수는 반영되지 않습니다.
  • 할인율순 할인가, 등급 할인, 할인 행사가 반영된 할인율을 기준으로 할인율이 높은 상품부터 순서대로 노출됩니다.
진열 옵션
  • 품절 상품 맨 뒤로 진열하기 품절 상품 맨 뒤로 진열하기를 사용[✔︎]으로 설정하면 품절된 상품이 자동으로 맨 뒤 페이지에 진열됩니다.
​

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

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

5-4. 상품 목록 섹션의 필터 기능

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

​

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

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

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

필터 위치 조정 및 상세 설정 방법을 확인하려면 필터 기능 활용해 보기 안내서를 참고해 주세요.
​

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

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

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

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

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

Step 3. 필터 종류를 선택해 주세요.

  • 필터 종류가 '드롭다운'인 경우 전체(All)를 클릭하면 모든 필터를 확인할 수 있습니다.
  • 필터 종류가 '나열'인 경우 모든 필터가 화면에 노출됩니다.
  • 필터 종류가 '가로 스크롤'인 경우 나열 상태에서 가로로 필터가 노출되며, 스크롤이 가능합니다.
  • 필터 종류가 '줄바꿈'인 경우 모든 필터가 줄바꿈 형식으로 화면에 노출됩니다.
​

6. 상품 슬라이드 섹션

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

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

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

상품 슬라이드 섹션에서 상품을 보여주려면 상점 관리하기에 상품 등록이 되어 있고, 해당 상품이 카테고리로 분류되어 있어야 합니다. 상품 등록 방법을 확인하고 싶으시다면 상품 > 상품 추가하기 안내서를 참고해 주세요.

[ 상품 추가하기 ]

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

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

Step1. [스타일 편집 > 상품 슬라이드섹션]에서 '섹션 제목 노출하기'를 사용[✔︎]으로 체크해 주세요.
Step 2. 상품 슬라이드 섹션 개별 편집 패널의 '섹션 제목' 탭에서 아래 설정 항목을 확인해 주세요.
설정 항목
섹션 제목 (기본 비활성화 상태)
상품 슬라이드 섹션의 제목을 노출하여 상품에 대한 정보 전달 용도로 활용할 수 있습니다.
최초 제목 노출 활성화 시 기본 입력값은 '놓치면 안 되는 베스트 상품들! 🏆 '로 노출됩니다.
링크 주소
상품 슬라이드 섹션 제목에 링크 연동이 가능합니다. URL 입력 시 제목 옆에 화살표가 노출되고, 제목을 눌러 해당 링크로 이동할 수 있습니다.
​

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

상품 슬라이드 섹션 개별 편집 패널의 '디자인' 탭에서 아래 설정 항목을 확인해 주세요.
설정 항목
배경
상품 슬라이드 섹션의 배경 지정이 가능합니다.
열
한 줄에 몇 개의 상품을 보여줄지 지정할 수 있습니다.
상품 개수
상품 슬라이드 섹션 내에 몇 개의 상품을 보여줄지 지정할 수 있습니다.
지정한 '열' 상품 개수의 5배를 넘지 않게 설정하는 것을 추천합니다.
전환할 때 넘어가는 썸네일 개수
좌우 화살표 버튼을 눌러 이동할 때 한 번에 몇 개의 상품을 넘겨 보여줄지 정할 수 있습니다.
스타일 편집값으로 돌리기
​상점 공통 스타일에 지정한 기본 상품 개수로 초기화합니다.
​

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

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

7. 갤러리 섹션

고객사 일러스트레이터 키츠의 갤러리 섹션 사용예

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

[ 이미지 추가하기 ] Step 1. 패널 하단의 '+ 이미지' 버튼을 눌러 이미지를 업로드 하고 이미지를 드래그 하여 순서를 변경할 수 있습니다.
Step 2. 업로드한 이미지 위에 마우스를 올리면 보이는 톱니바퀴 모양의 설정 버튼을 눌러주세요.
Step 3. 아래 이미지 설정 패널에서 배너에 포함할 내용을 지정해주세요.
설정 항목
제목
갤러리 썸네일에 노출할 제목 글입니다.
설명
갤러리 썸네일에 노출할 설명 글입니다.