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

목차

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. 메인 배너 섹션 개별 편집 패널 상단의 동영상 탭을 눌러주세요.
설정 항목
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 사이즈로 배너의 높이가 지정됩니다.
      전체 화면 모니터 화면을 꽉 채우도록 배너의 높이가 지정됩니다.
배경 메인 배너 섹션의 배경색을 지정할 수 있습니다.
    색상 메인 배너 섹션의 배경색을 지정할 수 있습니다.
    불투명도
    메인 배너 섹션의 배경 색상 투명도를 지정할 수 있습니다. 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. 아래 이미지 설정 패널에서 배너에 포함할 내용을 지정해주세요.
설정 항목
제목
갤러리 썸네일에 노출할 제목 글입니다.
설명
갤러리 썸네일에 노출할 설명 글입니다.
링크 주소
이미지를 누르면 이동할 경로를 지정할 수 있습니다.
새 탭에서 열기 사용 [✔︎] 을 선택하면 브라우저 내 새 탭으로 해당 링크를 열어줍니다.
[ 동영상 추가하기 ]
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) 로 화면에 보여집니다.
(격자형 블로그 전용)
한 줄에 몇개의 게시글이 보여질지 지정할 수 있습니다.
썸네일 (격자형 블로그 전용)
목록에 보여지는 썸네일 사이즈를 지정할 수 있습니다.
간격 (격자형 블로그 전용)
썸네일 사이의 간격을 지정할 수 있습니다.
필터 (격자형 블로그 전용)
필터의 출력 방식과 스타일 속성을 지정할 수 있습니다.
    위치
      위 / 왼쪽 / 오른쪽
    정렬
      왼쪽 / 가운데 / 오른쪽
    여백 필터와 상품 목록 사이의 간격을 지정할 수 있습니다.
    간격 필터 항목간 간격을 지정할 수 있습니다.
    글꼴
    필터 항목의 서체를 지정할 수 있습니다.
    굵기
    필터 항목의 글자 두께를 지정할 수 있습니다.
    크기
    필터 항목의 글자 크기를 지정할 수 있습니다.
    자간
    필터 항목의 글자 사이의 간격을 지정할 수 있습니다.
제목 / 등록일 (격자형 블로그 전용) 제목과 등록일의 정렬 방식을 지정할 수 있습니다.
    왼쪽 / 가운데 / 오른쪽
제목 (격자형 블로그 전용) 제목의 글자 스타일 속성을 지정할 수 있습니다.
    색상 글자의 색상을 지정할 수 있습니다.
    글꼴 서체를 지정할 수 있습니다.