콘텐츠 구성 요소

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

목차

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. 패널 하단의 [+] 버튼을 클릭하여 이미지를 업로드해 주세요.

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

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

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

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

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

메인 배너 섹션의 종류별 이미지 설정 방법이 궁금하다면 메인 배너 섹션의 크기 안내서를 확인해 주세요.

5. 상품 목록 섹션

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

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

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' 등의 단어로 표기됩니다.

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

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

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

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

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

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. 아래 이미지 설정 패널에서 배너에 포함할 내용을 지정해주세요.

설정 항목

제목

갤러리 썸네일에 노출할 제목 글입니다.

설명

갤러리 썸네일에 노출할 설명 글입니다.

버튼 글자 갤러리 썸네일에 노출할 버튼 글자입니다.

링크 주소

이미지를 누르면 이동할 경로를 지정할 수 있습니다.

새 탭에서 열기 사용 [✔︎] 을 선택하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다.

[ 동영상 추가하기 ]

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

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

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

[ 갤러리 섹션 노출 설정하기 ]

설정 항목

종류

갤러리의 노출 방식을 지정할 수 있습니다.

  • 격자

    격자형으로 이미지와 동영상 썸네일이 좌우, 위 아래로 나열되어 보여집니다.

  • 슬라이드

    한 줄에 지정한 개수의 썸네일이 보이며 좌우로 이동할 수 있는 버튼이 보여집니다.

  • 비대칭

    격자형과 유사한 방식이나 썸네일의 비율이 다르게 보여집니다.

너비

갤러리 섹션 내 콘텐츠 영역의 너비를 지정할 수 있습니다.

  • 좁은 너비가 960px 로 화면에 보여집니다.

  • 보통 너비가 1200px 로 화면에 보여집니다.

  • 넓은 전체 > 공통 설정의 최대 너비(기본 1800px) 로 화면에 보여집니다.

  • 꽉찬

    화면 너비에 콘텐츠를 꽉 채워 출력합니다.

배경

갤러리 섹션의 배경색을 지정할 수 있습니다.

썸네일 비율

갤러리 섹션 내 이미지와 동영상 썸네일의 비율을 지정할 수 있습니다.

  • 2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1

썸네일 모양 갤러리 섹션 내 이미지와 동영상 썸네일의 모양을 지정할 수 있습니다.

  • 모양

    썸네일의 모양을 사각형 / 둥근 모서리 / 원형 중 선택할 수 있습니다.

  • 둥근 모서리

    썸네일의 모양을 '둥근 모서리'로 선택한 경우 모서리의 둥근 정도를 설정할 수 있습니다.

    • 전체

      각 모서리의 둥근 정도를 모두 동일하게 조정할 수 있습니다.

    • 개별

      각 모서리의 둥근 정도를 서로 다르게 조정할 수 있습니다.

테두리 넣기

'테두리 넣기'를 사용[✔︎]으로 체크하면 썸네일에 테두리가 노출되며 테두리의 스타일 속성을 설정할 수있습니다.

  • 색상

    테두리의 색상을 설정할 수 있습니다.

  • 두께

    테두리의 두께를 설정할 수 있습니다.

썸네일 배경

썸네일 뒤쪽 배경 색을 지정할 수 있습니다.

썸네일 클릭할 때

썸네일을 클릭할 때 실행할 액션을 지정할 수 있습니다.

  • 변화 없음

  • 팝업창으로 확대하기 전체 팝업 화면에서 확대된 이미지를 볼 수 있습니다.

  • 링크 열기 지정한 링크를 바로 열 수 있습니다.

간격

썸네일 사이의 간격을 지정할 수 있습니다.

글자 위치

썸네일 위에 보이는 글자의 위치를 지정할 수 있습니다.

  • 왼쪽 위 / 왼쪽 중간 / 왼쪽 아래 / 가운데 위 / 가운데 중간 / 가운데 아래 / 오른쪽 위 / 오른쪽 중간 / 오른쪽 아래

글자 최대 너비

썸네일 위에 보이는 글자의 최대 너비를 썸네일 기준으로 설정할 수 있습니다. 너비를 넘어가는 글자는 생략됩니다.

글자 정렬

썸네일 위에 보이는 글자의 정렬 방식을 지정할 수 있습니다.

글자 배경

썸네일 위에 보이는 글자에 배경색을 넣거나 배경 테두리를 넣을 수 있습니다.

글자 색상

썸네일 위에 보이는 글자의 색상을 지정할 수 있습니다.

글자 크기

썸네일 위에 보이는 제목, 설명의 글자 크기를 지정할 수 있습니다.

버튼 크기

썸네일 위에 보이는 버튼의 크기와 버튼 글자 크기를 지정할 수 있습니다.

마우스 오버 효과

갤러리 내 썸네일 위에 마우스를 올리면 보여질 효과를 선택할 수 있습니다.

  • 없음

  • 배경 변화 썸네일에 마우스를 올리면 썸네일 배경색이 살짝 비추는 효과를 제공할 수 있습니다.

    • 마우스 올릴 때 썸네일 배경 마우스를 올릴 때 비출 배경색을 지정할 수 있습니다.

  • 확대하기

    썸네일에 마우스를 올리면 썸네일 이미지가 확대되어 보이는 효과를 제공할 수 있습니다.

표시 선택

썸네일 위에 제목 / 설명을 출력하는 방식을 지정할 수 있습니다.

  • 제목 / 설명 보이기 사용 [✔︎] 을 선택하면 썸네일 위에 제목 / 설명을 출력합니다.

    • 마우스 올릴 때만 제목 설명 보이기

      사용 [✔︎] 을 선택하면 마우스를 올렸을 때만 썸네일 위에 제목/설명을 출력합니다.

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

공통 스타일 설정 패널로 이동하거나 섹션 태그의 파레트 모양 아이콘을 눌러 갤러리 섹션의 공통 스타일을 설정할 수 있습니다.

설정 항목

제목 갤러리 섹션 내 항목 별 제목 문장의 스타일 속성을 지정할 수 있습니다.

  • 글꼴 서체를 지정할 수 있습니다.

  • 굵기 글자 굵기를 지정할 수 있습니다.

  • 자간 글자의 자간을 지정할 수 있습니다.

  • 줄간격

    제목 줄과 설명 사이의 간격을 조정할 수 있습니다.

설명 갤러리 섹션 내 항목 별 설명 문장의 스타일 속성을 지정할 수 있습니다.

  • 글꼴 서체를 지정할 수 있습니다.

  • 굵기 글자 굵기를 지정할 수 있습니다.

  • 자간 글자의 자간을 지정할 수 있습니다.

  • 줄간격

    제목 줄과 설명 사이의 간격을 조정할 수 있습니다.

스타일 갤러리 섹션 내 항목을 선택했을 때 보이는 전체 팝업 화면의 배경 색상을 지정할 수 있습니다.

  • 밝은 / 어두운

8. 블로그 섹션

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

[ 게시글 연결하기 ]

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

[ 게시글 노출 방식 설정하기 ]

설정 항목

종류 블로그 섹션의 레이아웃 노출 방식을 지정할 수 있습니다.

  • 격자 격자형으로 썸네일이 나열되어 화면에 보여집니다.

  • 나열 블로그 게시글 내용 요약이 최신 순으로 위에서 아래로 나열되어 보여집니다.

(종류: 격자 선택 시) 위의 종류 속성을 격자로 지정할 경우 한 줄에 몇개의 게시글 썸네일이 보여질지 지정할 수 있습니다.

페이지당 글 개수

한 페이지에 몇개의 게시글을 보여줄지 지정할 수 있습니다. 지정된 개수를 넘어가는 게시글이 존재하는 경우 쪽번호로 나누어 조회 할 수 있습니다.

필터 보이기

사용 [✔︎] 선택 시 앞서 지정한 블로그 카테고리를 섹션에 보여줄 수 있습니다.

  • 전체 필터 보이기

    사용 [✔︎] 선택 시 지정한 모든 카테고리의 게시글을 한 번에 볼 수 있는 '전체' 필터 항목을 노출합니다.

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

공통 스타일 설정 패널로 이동하거나 섹션 태그의 파레트 모양 아이콘을 눌러 블로그 섹션의 공통 스타일을 설정할 수 있습니다.

설정 항목

게시글 제목 블로그 게시글의 제목 출력 방식을 지정할 수 있습니다.

사이드바 블로그 출력 유형이 '나열'일 경우 게시글 목록 옆에 카테고리, 최근글, 검색창을 노출할 수 있습니다.

  • 사이드바 보이기 사용 [✔︎] 을 선택하면 사이드바가 화면에 출력됩니다.

    • 사이드바에서 필터 보이기 사용 [✔︎] 을 선택하면 블로그 카테고리가 사이드바에 출력됩니다.

    • 위치 사이드바의 위치를 게시글 목록의 왼쪽 혹은 오른쪽으로 지정할 수 있습니다.

    • 선택 색상 사이드바 내 글자색을 지정할 수 있습니다.

페이지당 글 개수 한 페이지에 몇 개의 블로그 게시글을 보여줄지 지정할 수 있습니다.

언어

화면에 기본 출력되는 버튼 이름 등 언어를 지정할 수 있습니다.

  • 한국어

    전체, 카테고리, 최근 글, 검색, 댓글, 좋아요

  • 영어

    All, CATEGORIES, RECENT POSTS, SEARCH, COMMENTS, LIKES

너비 (격자형 블로그 전용)

블로그 출력 유형 '격자'형에만 적용되며 게시글 목록의 너비를 지정할 수 있습니다.

  • 좁은 너비가 960px 로 화면에 보여집니다.

  • 보통 너비가 1200px 로 화면에 보여집니다.

  • 넓은 전체 > 공통 설정의 최대 너비(기본 1800px) 로 화면에 보여집니다.

(격자형 블로그 전용)

한 줄에 몇개의 게시글이 보이질 설정할 수 있습니다.

썸네일 (격자형 블로그 전용)

목록에 보이는 썸네일 사이즈를 설정할 수 있습니다.

간격 (격자형 블로그 전용)

썸네일 사이의 간격을 설정할 수 있습니다.

필터 (격자형 블로그 전용)

필터의 출력 방식과 스타일 속성을 설정할 수 있습니다.

  • 위치

    • 위 / 왼쪽 / 오른쪽

  • 정렬

    • 왼쪽 / 가운데 / 오른쪽

  • 여백 필터와 상품 목록 사이의 간격을 지정할 수 있습니다.

  • 간격 필터 항목간 간격을 지정할 수 있습니다.

  • 글꼴

    필터 항목의 서체를 지정할 수 있습니다.

  • 굵기

    필터 항목의 글자 두께를 지정할 수 있습니다.

  • 크기

    필터 항목의 글자 크기를 지정할 수 있습니다.

  • 자간

    필터 항목의 글자 사이의 간격을 지정할 수 있습니다.

제목 / 등록일 (격자형 블로그 전용) 제목과 등록일의 정렬 방식을 지정할 수 있습니다.

  • 왼쪽 / 가운데 / 오른쪽

제목 (격자형 블로그 전용) 제목의 글자 스타일 속성을 지정할 수 있습니다.

  • 색상 글자의 색상을 지정할 수 있습니다.

  • 글꼴 서체를 지정할 수 있습니다.

  • 굵기 글자 굵기를 지정할 수 있습니다.

  • 크기 글자 크기를 지정할 수 있습니다.

  • 자간

    글자의 자간을 지정할 수 있습니다.

등록일 (격자형 블로그 전용) 등록일 글자 스타일 속성을 지정할 수 있습니다.

  • 색상 글자의 색상을 지정할 수 있습니다.

  • 글꼴 서체를 지정할 수 있습니다.

  • 굵기 글자 굵기를 지정할 수 있습니다.

  • 크기 글자 크기를 지정할 수 있습니다.

  • 자간

    글자의 자간을 지정할 수 있습니다.

마우스 오버 효과

블로그 섹션의 게시글 항목 위에 마우스를 올렸을 때 적용될 (트랜지션) 효과를 지정할 수 있습니다.

  • 없음

  • 밝기 변화

  • 확대하기

    게시글 대표 썸네일이 있을 경우 마우스를 올리면 해당 이미지가 확대되어 보입니다.

9. 지도 섹션

지도 섹션을 사용하기 위해서는 카카오 앱 키 등록이 먼저 진행되어야 합니다.

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

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

[ 주소 입력하기 ]

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

[ 지도 노출 방식 설정하기 ]

설정 항목

높이 지도의 높이를 지정할 수 있습니다.

너비 지도의 너비를 지정할 수 있습니다.

표시 선택

  • 지형도 보이기

  • 스카이뷰 버튼 보이기

  • 확대 / 축소 버튼 보이기

  • 설명 보이기

10. 인스타그램 섹션

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

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

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

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

[ 인스타그램 섹션 노출 설정하기 ]

설정 항목

종류

  • 격자

    격자형으로 이미지 썸네일이 좌우, 위 아래로 나열되어 보여집니다.

  • 슬라이드

    한 줄에 지정한 개수의 썸네일이 보이며 좌우로 이동할 수 있는 버튼이 보여집니다.

  • 비대칭

    격자형과 유사한 방식이나 썸네일의 비율이 다르게 보여집니다.

너비 인스타그램 섹션 내 이미지 썸네일 노출 영역의 너비를 지정할 수 있습니다.

한 줄에 몇개의 이미지 썸네일이 보여질지 지정할 수 있습니다.

썸네일 개수

총 몇개의 인스타그램 이미지 썸네일을 보여줄지 결정할 수 있습니다.

배경

인스타그램 섹션의 배경 색상을 지정할 수 있습니다.

썸네일 비율

인스타그램 이미지 썸네일 출력 사이즈의 비율을 지정할 수 있습니다.

  • 2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1

썸네일 배경

썸네일 뒤쪽 배경 색을 지정할 수 있습니다.

간격

썸네일 사이의 간격을 지정할 수 있습니다.

간격 (종류: 슬라이드 선택 시)

  • 사용 / 사용 안 함

무한 순환 (종류: 슬라이드 선택 시)

좌우 이동 버튼을 눌렀을 때 지정한 총 개수를 다 보면 다시 처음 이미지부터 슬라이드가 이어질 수 있게 합니다.

자동 재생 (종류: 슬라이드 선택 시)

지정한 재생 간격마다 다음 슬라이드로 이동합니다.

  • 마우스 올릴 때 일시 정지하기

    사용 [✔︎] 설정 시 인스타그램 섹션에 마우스를 올리면 자동 재생을 잠시 멈춥니다.

전환할 때 넘어가는 썸네일 개수 (종류: 슬라이드 선택 시)

좌우 이동 버튼을 누르거나 자동 재생으로 슬라이드를 넘길 때 몇 개씨 넘길지 정할 수 있습니다.

마우스 오버 효과

갤러리 내 썸네일 위에 마우스를 올리면 보여질 효과를 선택할 수 있습니다.

  • 없음

  • 배경 변화 썸네일에 마우스를 올리면 썸네일 배경색이 살짝 비추는 효과를 제공할 수 있습니다.

    • 마우스 올릴 때 썸네일 배경 마우스를 올릴 때 비출 배경색을 지정할 수 있습니다.

  • 확대하기

    썸네일에 마우스를 올리면 썸네일 이미지가 확대되어 보이는 효과를 제공할 수 있습니다.

11. 사용자 편집 섹션

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

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

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

설정 항목

너비 사용자 편집 섹션 내 상품 썸네일 영역의 너비를 지정할 수 있습니다.

  • 좁은 너비가 960px 로 화면에 보여집니다.

  • 보통 너비가 1200px 로 화면에 보여집니다.

  • 넓은 전체 > 공통 설정의 최대 너비(기본 1800px) 로 화면에 보여집니다.

사용자 편집 섹션의 단을 지정할 수 있습니다.

배경 사용자 편집 섹션의 배경 색상을 지정할 수 있습니다.

배경 이미지

사용자 편집 섹션의 배경 이미지를 지정할 수 있습니다.

  • 스크롤할 때 배경 고정하기

    화면을 마우스 스크롤하여 이동해도 배경은 고정된 상태로 이동하지 않습니다.

12. 요소

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

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

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

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

요소 유형

공백

위 아래 간격을 띄워야 할 때 사용할 수 있으며 사용자 편집 섹션에 추가한 뒤 마우스로 드래그하여 높이 조절을 할 수 있습니다.

  • 개별 편집 패널

    • 높이

      높이를 픽셀 단위로 지정할 수 있습니다.

제목글

콘텐츠의 제목, 부제목 등에 해당하는 글자를 입력할 수 있는 요소입니다. 검색 엔진에서 제목글 요소를 사용하여 글자를 입력할 경우 검색 엔진에서 제목으로 인식할 수 있습니다.

  • 텍스트 속성 바

    글자 크기, 색상, 두께, 기울기, 밑줄, 정렬 방식, 링크 등 텍스트 속성을 변경할 수 있습니다.

줄글

제목이 아닌 설명 등 내용에 해당하는 글을 입력할 수 있는 요소입니다.

  • 텍스트 속성 바

    글자 크기, 색상, 두께, 기울기, 밑줄, 정렬 방식, 링크 등 텍스트 속성을 변경할 수 있습니다.

이미지

사용자 편집 섹션에 이미지를 추가할 수 있습니다.

  • 개별 편집 패널

    • 설정

      • 이미지 업로드

        이미지를 업로드할 수 있습니다.

      • 링크 주소

        이미지에 링크를 추가할 수 있습니다.

    • 디자인

      • 너비

        이미지의 너비를 % 단위로 지정할 수 있습니다.

      • 비율

        이미지 출력시 너비, 높이 비율을 지정할 수 있습니다.

      • 정렬

        원본 비율이 아닌 경우 이미지의 중심점을 지정할 수 있습니다.

동영상

사용자 편집 섹션에 동영상을 추가할 수 있습니다.

  • 개별 편집 패널

    • 영상 주소

      Youtube, Vimeo URL을 추가하여 영상을 출력할 수 있습니다.

    • 썸네일

      처음 로딩시 보여줄 썸네일을 별도로 설정할 수 있습니다.

    • 자동 재생

      사용 [✔︎] 선택 시 화면 로딩 후 영상이 자동 재생됩니다.

    • 반복 재생

      사용 [✔︎] 선택 시 영상이 반복 재생됩니다.

    • 음소거

      사용 [✔︎] 선택 시 영상이 음소거 처리됩니다.

사용자 편집 섹션에 구분선을 추가할 수 있습니다.

  • 개별 편집 패널

    • 너비

      선의 너비를 % 단위로 지정할 수 있습니다.

    • 정렬

      선의 정렬 방식을 선택할 수 있습니다.

    • 색상

      선 색상을 지정할 수 있습니다.

슬라이드

사용자 편집 섹션에 이미지를 좌우로 이동하며 볼 수 있는 요소입니다.

  • 이미지 슬라이드에 보여질 이미지를 추가하고 설정할 수 있습니다.

    • 제목 슬라이드에 보여질 제목을 지정할 수 있습니다.

    • 설명 슬라이드에 보여질 설명을 입력할 수 있습니다.

    • 링크 주소 슬라이드를 누르면 이동할 링크를 설정할 수 있습니다.

  • 디자인 슬라이드의 출력 방식을 설정할 수 있습니다.

    • 비율

      슬라이드 너비, 높이 비율을 지정할 수 있습니다.

    • 글자 정렬

      슬라이드에 보이는 제목, 설명의 정렬 방식을 지정할 수 있습니다.

    • 글자 크기 슬라이드에 보이는 제목, 설명의 글자 크기를 지정할 수 있습니다.

    • 자동 재생 사용 [✔︎] 선택 시 슬라이드가 자동으로 넘어가도록 설정할 수 있습니다.

    • 전환 효과

      이미지 슬라이드의 전환효과를 설정할 수 있습니다.

    • 표시 선택 슬라이드에 보이는 요소의 노출 여부를 선택할 수 있습니다.

버튼

사용자 편집 섹션에 버튼 모양의 링크를 추가할 수 있습니다.

  • 설정

    • 글자 버튼 글자를 입력할 수 있습니다.

    • 링크 주소 버튼을 클릭하면 이동할 경로를 설정할 수 있습니다. 새 탭에서 열기 사용 [✔︎]을 체크하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다.

  • 디자인

    • 종류

      버튼 스타일을 설정할 수 있습니다.

    • 정렬

      버튼 글자의 정렬 방식을 설정할 수 있습니다.

    • 색상

      버튼의 색상을 설정할 수 있습니다.

    • 크기

      버튼의 크기를 설정할 수 있습니다.

    • 글자 크기

      버튼의 글자 크기를 설정할 수 있습니다.

아이콘

사용자 편집 섹션에 화면에 아이콘을 노출해야 할 경우 사용할 수 있습니다.

  • 설정

    입력창에 해당하는 정보 혹은 URL을 입력하면 아이콘을 보여줄 수 있습니다.

  • 디자인

    • 정렬 아이콘 그룹의 정렬 방식을 지정할 수 있습니다.

    • 색상

      아이콘의 색상 속성을 설정할 수 있습니다.

사용자 편집 섹션에 상점 웹사이트 방문자가 상점 관리자에게 이메일을 보낼 수 있는 폼을 만들 수 있습니다. 폼으로 보낸 이메일은 [식스샵 > 상점 설정 > 이메일]에 설정한 '관리자 수신 주소'로 수신됩니다.

  • 항목 아래 항목을 추가할 수 있습니다.

    • 단답 한 줄로 된 글자를 입력할 수 있습니다.

    • 장문 여러 줄의 글을 입력할 수 있습니다.

    • 이메일 이메일 주소를 입력할 수 있습니다.

    • 전화번호 전화번호를 입력할 수 있습니다.

    • 날짜 날짜를 입력할 수 있습니다.

    • 단일 선택 하나의 옵션을 선택할 수 있습니다.

    • 복수 선택 다수의 옵션을 선택할 수 있습니다.

    • 목록 선택 옵션이 많을 경우 선택 상자를 통해 옵션을 선택할 수 있습니다.

  • 설정

    • 이름 폼의 제목을 입력할 수 있으며 상점 관리자에게 이메일 전송시 포함됩니다.

    • 버튼 글자 정보 입력을 완료할 때 누르는 버튼의 글자를 지정할 수 있습니다.

    • 개인정보 수집 및 이용 동의 폼을 통해 수집하는 정보 중 개인 정보가 포함되어 있을 경우 사용 [✔︎] 을 선택하세요.

    • 개인정보 수집 및 이용 내용 약관 동의를 위해 확인해야 할 개인정보 수집 및 이용 정책을 기입해주세요.

  • 디자인

    • 글자 색상 폼 입력창 제목 글자의 색상을 설정할 수 있습니다.

    • 버튼 종류 버튼의 스타일을 지정할 수 있습니다.

    • 버튼 정렬 버튼 글자의 정렬 방식을 지정할 수 있습니다.

    • 버튼 색상

      버튼의 색상을 설정할 수 있습니다.

지도

사용자 편집 섹션에 지도를 추가할 수 있습니다.

9. 지도 섹션 안내를 참고하세요

13. 전광판 배너 섹션

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

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

[ 문구 및 링크 설정하기 ]

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

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

Windows : 윈도우키 + ; (세미콜론) Mac: Ctrl + ⌘ + space

[ 바깥 여백 설정하기 ]

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

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

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

설정 항목

색상

전광판 배너에 노출할 문구와 배경 색상을 변경할 수 있습니다.

글자

전광판 배너에 노출된 문구의 글꼴, 굵기, 크기, 자간을 변경할 수 있습니다.

문구 사이 간격

입력한 문구 사이의 간격을 설정 가능합니다.

안쪽 여백

문구와 배너 위아래 사이의 간격을 조정할 수 있습니다.

경계선 넣기

전광판 배너에 테두리를 넣을 수 있습니다.

좌우 스크롤 속도

정지, 느림, 보통, 빠름 4가지로 속도를 조정할 수 있습니다.

마우스 올릴 때 일시 정지하기

데스크톱에서 배너 위로 마우스 커서 위치 시 배너의 움직임이 멈추도록 설정할 수 있습니다.

좌우 스크롤 방향

문구가 움직이는 방향을 설정할 수 있습니다. (왼쪽→오른쪽, 오른쪽→왼쪽)

14. 후기 섹션

후기 섹션은 등록된 후기 중 원하는 후기를 선택하여 원하는 페이지에 노출할 수 있는 섹션입니다. 아직 후기가 없는 상태라면 후기 게시판을 추가하고, 상품 후기가 등록된 이후 후기 섹션을 이용해 주세요.

14-1. 후기 섹션 개별 편집하기

[ 후기 불러오기 ]

Step1. 후기 섹션을 추가해 주세요.

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

Step2. 후기 섹션을 더블 클릭하면 나타나는 설정 창에서 [후기 추가하기]를 클릭해 주세요.

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

Step3. [후기 불러오기]를 클릭해 주세요.

Step4. 후기 섹션에 노출할 후기를 선택하고 [저장]을 클릭해 주세요.

Step5. [완료] 버튼을 클릭하면 설정이 완료됩니다.

[ 후기 관리하기 ]

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

  • 후기 내용 수정하기

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

  • 후기 노출 순서 변경하기

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

  • 상품 사진으로 바꾸기

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

[ 후기 노출 방식 설정하기 ]

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

설정 항목

종류

후기 섹션의 노출 방식을 설정할 수 있습니다.

  • 격자

    후기 썸네일이 격자형으로 나열되어 화면에 보입니다.

  • 슬라이드

    후기 썸네일이 좌우로 이동하며 화면에 보입니다.

너비

후기 섹션 내 콘텐츠 영역의 너비를 설정할 수 있습니다.

  • 좁은

    너비가 960p로 화면에 보입니다.

  • 보통

    너비가 1,200px 로 화면에 보입니다.

  • 넓은

    너비가 전체 > 공통 설정의 최대 너비(기본 1,800px)로 화면에 보입니다.

  • 꽉 찬

    너비가 꽉 찬 형태로 화면에 보입니다.

전체 배경

후기 섹션의 전체 배경 색상과 불투명도를 설정할 수 있습니다.

  • 색상

    후기 섹션의 전체 배경 색상을 설정할 수 있습니다.

  • 불투명도

    후기 섹션 전체 배경 색상의 불투명도를 설정할 수 있습니다.

안쪽 여백

후기 섹션의 위쪽, 아래쪽 여백을 설정할 수 있습니다.

한 줄에 몇 개의 후기 썸네일을 보여줄지 설정할 수 있습니다.

후기 개수

후기 섹션에 총 몇 개의 후기 썸네일을 보여줄지 설정할 수 있습니다.

후기 간 간격

후기 썸네일 간 간격을 설정할 수 있습니다.

  • 가로

    후기 썸네일 간 좌우 간격을 설정할 수 있습니다.

  • 세로 (격자형 후기 섹션 전용)

    후기 썸네일 간 상하 간격을 설정할 수 있습니다.

후기 안쪽 여백

후기 섹션 안쪽의 후기 컨텐츠 좌우, 상하 여백을 설정할 수 있습니다.

후기 배경

후기 섹션의 후기 배경 색상과 모서리의 둥근 정도를 설정할 수 있습니다.

  • 색상

    후기 배경 색상을 설정할 수 있습니다.

  • 둥근 모서리

    후기 배경 모서리의 둥근 정도를 설정할 수 있습니다.

내용 정렬

후기 평점, 후기 내용, 글쓴이, 상품으로 이동 버튼의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 선택할 수 있습니다.

후기 사진 보이기

'후기 사진 보이기'를 사용[✔︎]으로 체크하면 후기 사진이 노출되며, 후기 사진의 스타일 속성을 설정할 수 있습니다.

  • 비율

    후기 사진의 비율을 2:3 / 3:4 / 1:1 / 4:3 / 3:2 / 16:9 / 7:3 / 3:1 중 선택할 수 있습니다.

  • 너비

    후기 사진의 너비를 설정할 수 있습니다.

  • 정렬

    후기 사진의 정렬 방식을 왼쪽 / 가운데 / 오른쪽 중에서 선택할 수 있습니다.

    후기 사진의 너비를 100% 보다 작게 설정한 상태에서만 작동합니다.

  • 아래 여백

    후기 사진과 후기 평점 사이의 여백을 설정할 수 있습니다.

후기 평점 보이기

'후기 평점 보이기'를 사용[✔︎]으로 체크하면 후기 평점이 노출되며, 후기 평점의 스타일 속성을 설정할 수 있습니다.

  • 크기

    후기 평점의 크기를 설정할 수 있습니다.

  • 간격

    후기 평점 사이의 간격을 설정할 수 있습니다.

  • 아래 여백

    후기 평점과 후기 내용 사이의 여백을 설정할 수 있습니다.

후기 내용 보이기

'후기 내용 보이기'를 사용[✔︎]으로 체크하면 후기 내용이 노출되며, 후기 내용의 스타일 속성을 설정할 수 있습니다.

  • 크기

    후기 내용의 글자 크기를 설정할 수 있습니다.

  • 색상

    후기 내용의 글자 색상을 설정할 수 있습니다.

  • 아래 여백

    후기 내용과 글쓴이 사이의 여백을 설정할 수 있습니다.

글쓴이 보이기

'글쓴이 보이기'를 사용[✔︎]으로 체크하면 글쓴이가 노출되며, 글쓴이 스타일 속성을 설정할 수 있습니다.

  • 크기

    글쓴이의 글자 크기를 설정할 수 있습니다.

  • 색상

    글쓴이의 글자 색상을 설정할 수 있습니다.

  • 아래 여백

    글쓴이와 상품으로 이동 버튼 사이의 여백을 설정할 수 있습니다.

상품으로 이동 버튼 보이기

'상품으로 이동 버튼 보이기' 사용 [✔]을 체크하면 상품으로 이동하는 버튼이 노출되며, 버튼 글자 크기와 버튼에 노출할 문구를 설정할 수 있습니다. 삭제된 상품의 후기인 경우 버튼 클릭 시 '현재 구매 불가한 상품입니다.' 알림이 노출됩니다.

  • 버튼 크기

    상품으로 이동하는 버튼의 크기를 작게 / 보통 / 크게 중에서 설정할 수 있습니다.

  • 글자 크기

    상품으로 이동하는 버튼의 글자 크기를 설정할 수 있습니다.

  • 상품 보러 가기

    상품으로 이동하는 버튼에 노출할 문구를 직접 입력할 수 있습니다.

무한 순환 (슬라이드형 후기 섹션 전용)

무한 순환을 사용[✔︎]으로 체크하면 좌우 이동 버튼을 눌렀을 때 지정한 총개수를 다 보고 다시 처음 썸네일부터 슬라이드가 이어질 수 있게 합니다.

자동 재생 (슬라이드형 후기 섹션 전용)

자동 재생을 사용[✔︎]으로 체크하면 지정한 재생 간격마다 다음 슬라이드로 이동합니다.

  • 마우스 올릴 때 일시 정지하기

사용[✔︎]으로 체크하면 후기 섹션에 마우스를 올리면 자동 재생을 잠시 멈춥니다.

전환할 때 넘어가는 후기 개수 (슬라이드형 후기 섹션 전용)

후기 슬라이드를 좌우로 이동할 때 썸네일을 몇 개씩 넘겨 보여줄지 지정할 수 있습니다.

표시 선택 (슬라이드형 후기 섹션 전용)

'이전 / 다음 화살표 보이기'를 설정할 수 있습니다.

14-2. 후기 섹션 공통 스타일 편집하기

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

설정 항목

후기 내용

  • 글꼴

    후기 내용 글자의 글꼴을 설정할 수 있습니다.

  • 굵기

    후기 내용 글자의 굵기를 설정할 수 있습니다.

  • 자간

    후기 내용 글자 사이의 간격을 설정할 수 있습니다.

  • 줄간후기 내용 사이의 줄간격을 설정할 수 있습니다.

글쓴이

  • 글꼴

    글쓴이 글자의 글꼴을 설정할 수 있습니다.

  • 굵기

    글쓴이 글자의 굵기를 설정할 수 있습니다.

  • 자간

    글쓴이 글자의 굵기를 설정할 수 있습니다.

Last updated