콘텐츠 구성 요소
상점 웹사이트를 통해 고객에게 보여줄 다양한 콘텐츠를 추가하고 제작할 수 있습니다.
목차
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. 색상 배너에 적용할 설정 항목을 확인해 주세요.
[ 동영상 배너 추가하기 ]
Step 1. 메인 배너 섹션 개별 편집 패널의 '동영상' 탭을 클릭해 주세요.
Step 2. 파일 업로드 옆 […] 버튼을 클릭하여 MP4 동영상 파일을 업로드해 주세요.
Step 3. 동영상 배너에 적용할 설정 항목을 확인해 주세요.
[메인 배너 섹션 동영상 등록 방식 변경 안내] 2020년 12월 17일부터 메인 배너 섹션 동영상 등록 방식 중 'Youtube / Vimeo URL 등록' 방식이 지원 중단됩니다. 해당 등록 방식 지원이 중단되는 사유는 Youtube 및 Vimeo 등 동영상 스트리밍 서비스 업체의 지속적인 정책 변경과 모바일 미지원 문제로 메인 배너 섹션 동영상 기능이 정상 작동하지 않는 상황이 발생하고 있기 때문입니다. 문제 해결을 위해 최근 새로운 동영상 업로드 방식인 'MP4 파일 업로드' 방식 추가 업데이트를 진행하였는데요. 더 나은 사용자 경험 제공을 목적으로 문제가 발생하는 'Youtube / Vimeo URL 등록' 방식 지원이 중단되는 점 양해 부탁드립니다. 기존 'Youtube / Vimeo URL 등록' 방식을 사용하는 고객님들의 웹사이트에서는 동영상이 동일하게 노출되나 영상 재생되지 않는 상태로 변경될 수 있습니다. 영상이 재생되지 않거나 다른 영상으로 변경 시에는 'MP4 파일 업로드' 방식을 사용해 주셔야 하는 점 참고 부탁드리겠습니다.
4-3. 메인 배너 섹션 공통 스타일 설정하기
메인 배너 섹션의 공통 스타일 설정 패널로 이동하거나 메인 배너 섹션 태그의 파레트 모양 아이콘을 눌러 메인 배너 섹션의 공통 스타일을 설정할 수 있습니다.
메인 배너 섹션의 크기 설정 방법은 이미지 설정 가이드를 참고해 주세요.
4-4. 모바일 전용 메인 배너 섹션
메인 배너 섹션의 경우 모바일 전용 메인 배너 섹션 기능을 이용하여 데스크탑과 모바일에 각각 다른 이미지를 등록할 수 있습니다.
모바일 전용 메인 배너 섹션 권장 사이즈: 가로 기준 840 ~ 1,440px
[모바일 전용 메인 배너 설정하기]
Step 1. 모바일 뷰포트로 전환해 주세요.
디자인 편집 페이지 오른쪽 하단의 뷰포트 설정 버튼을 클릭하면 모바일 뷰포트로 전환이 됩니다. 단축키: Ctrl + Shift + M
Step 2. 메인 배너 섹션을 더블 클릭하고 모바일 전용 메인 배너 사용하기를 '사용'으로 클릭해 주세요.
Step 3. 패널 하단의 [+] 버튼을 클릭하여 이미지를 업로드해 주세요.
사용하지 않을 이미지가 등록되어 있다면 해당 이미지 위에 마우스를 올린 후 휴지통 모양의 '삭제' 버튼을 클릭하여 삭제해 주세요.
[모바일 메인 배너 섹션의 높이와 비율 설정하기]
메인 배너 섹션의 종류가 높이 고정인 경우
[모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 '높이' 조정이 가능합니다.
메인 배너 섹션의 종류가 비율 고정인 경우 [모바일 뷰포트 > 좌측 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]에서 '비율'이 조정이 가능합니다.
메인 배너 섹션의 종류별 이미지 설정 방법이 궁금하다면 메인 배너 섹션의 크기 안내서를 확인해 주세요.
5. 상품 목록 섹션
5-1. 상품 목록 섹션이란?
상품 목록 섹션 온라인 쇼핑몰을 만드는데 가장 중요한 구성 요소로써 상점 관리자 > 상품에 추가한 상품을 상점 웹사이트 내에서 보여주고자 할 때 사용할 수 있는 섹션입니다. 상품 목록 섹션은 페이지마다 하나씩 추가할 수 있으며 메뉴 구성을 어떻게 하느냐에 따라서 고객이 상품을 살펴보는 방식을 다양하게 제공할 수 있습니다.
5-2. 상품 목록 섹션 개별 편집하기
상품 목록 섹션에서 상품을 보여주려면 상점 관리자에 상품이 추가되어 있어야 하며, 해당 상품이 카테고리로 분류되어야 합니다. 상품 등록 방법을 확인하고 싶으시다면 상품 > 상품 추가하기 안내서를 참고해 주세요.
[ 상품 추가하기 ]
상품 목록 섹션 더블 클릭 혹은 상품 목록 섹션 클릭 후 노출되는 펜 모양 아이콘(개별 편집)을 클릭하면 개별 편집 패널이 노출됩니다. '카테고리' 탭에서 상품 카테고리를 선택하면 상점에 카테고리에 해당하는 상품이 노출됩니다.
[ 상품 목록 섹션 노출 설정하기 ]
상품 목록 섹션 더블 클릭 혹은 상품 목록 섹션 클릭 후 노출되는 펜 모양 아이콘(개별 편집)을 클릭하면 개별 편집 패널이 노출됩니다. '디자인' 탭에서 아래 설정 항목을 확인할 수 있습니다.
5-3. 상품 목록 섹션 공통 스타일 설정하기
공통 스타일 설정 패널로 이동하거나 섹션 태그의 파레트 모양 아이콘을 눌러 상품 목록 섹션의 공통 스타일을 설정할 수 있습니다.
[모바일에서 배지 설정하기]
모바일 화면에서 배지 노출 방식을 설정할 수 있습니다. 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. 상품 슬라이드 섹션 개별 편집 패널의 '섹션 제목' 탭에서 아래 설정 항목을 확인해 주세요.
[ 상품 슬라이드 섹션 디자인 설정하기 ]
상품 슬라이드 섹션 개별 편집 패널의 '디자인' 탭에서 아래 설정 항목을 확인해 주세요.
6-3. 상품 슬라이드 섹션 공통 스타일 설정하기
공통 스타일 설정 패널로 이동하거나 섹션 태그의 파레트 모양 아이콘을 눌러 상품 슬라이드 섹션의 공통 스타일을 설정할 수 있습니다.
7. 갤러리 섹션
7-1. 갤러리 섹션 개별 편집하기
[ 이미지 추가하기 ] Step 1. 패널 하단의 '+ 이미지' 버튼을 눌러 이미지를 업로드 하고 이미지를 드래그 하여 순서를 변경할 수 있습니다.
Step 2. 업로드한 이미지 위에 마우스를 올리면 보이는 톱니바퀴 모양의 설정 버튼을 눌러주세요.
Step 3. 아래 이미지 설정 패널에서 배너에 포함할 내용을 지정해주세요.
[ 동영상 추가하기 ]
Step 1. 패널 하단의 '+ 동영상' 버튼을 눌러 이미지를 업로드 하고 이미지를 드래그 하여 순서를 변경할 수 있습니다.
Step 2. 동영상 설정 패널의 영상 주소에 Youtube, Vimeo 동영상 주소를 입력해주세요.
Step 3. 갤러리 목록에 보여질 썸네일을 설정하면 더욱 보기 좋습니다.
[ 갤러리 섹션 노출 설정하기 ]
7-2. 갤러리 섹션 공통 스타일 설정하기
공통 스타일 설정 패널로 이동하거나 섹션 태그의 파레트 모양 아이콘을 눌러 갤러리 섹션의 공통 스타일을 설정할 수 있습니다.
8. 블로그 섹션
8-1. 블로그 섹션 개별 편집하기
[ 게시글 연결하기 ]
블로그 섹션 개별 편집 패널의 '카테고리' 탭에서 화면에 출력할 게시글 카테고리를 선택하세요.
[ 게시글 노출 방식 설정하기 ]
8-2. 블로그 섹션 공통 스타일 설정하기
공통 스타일 설정 패널로 이동하거나 섹션 태그의 파레트 모양 아이콘을 눌러 블로그 섹션의 공통 스타일을 설정할 수 있습니다.
9. 지도 섹션
지도 섹션을 사용하기 위해서는 카카오 앱 키 등록이 먼저 진행되어야 합니다.
9-1. 지도 섹션 개별 편집하기
위 안내에 따라 카카오 앱 키 등록을 마치고 나면 아래와 같이 지도를 설정할 수 있는 패널을 확인할 수 있습니다.
[ 주소 입력하기 ]
주소를 입력하면 화면에 지도가 출력됩니다.
[ 지도 노출 방식 설정하기 ]
10. 인스타그램 섹션
10-1. 인스타그램 섹션 개별 편집하기
Step 1. 계정 연결하기 버튼을 눌러주세요.
Step 2. 고객님의 인스타그램 계정과 식스샵과의 연동을 위해 '승인' 버튼을 눌러주세요.
Step 3. 정상적으로 연동되면 아래와 같이 고객님의 인스타그램 피드가 화면에 노출됩니다.
[ 인스타그램 섹션 노출 설정하기 ]
인스타그램 섹션 연동 해제는 인스타그램 섹션 개별 설정에서 연동된 인스타그램 계정 우측 [X] 버튼을 클릭하면 됩니다. 해제 시 연동했던 인스타그램 개인 정보는 즉시 삭제됩니다.
11. 사용자 편집 섹션
11-1. 사용자 편집 섹션이란?
사용자 편집 섹션은 웹사이트에 브랜드 스토리 등 다양한 콘텐츠를 담기 위해 사용할 수 있는 직접 편집 가능한 섹션입니다.
11-2. 사용자 편집 섹션 개별 편집하기
12. 요소
사용자 편집 섹션에서 다양한 요소를 추가하여 원하는 컨텐츠를 자유롭게 구성할 수 있습니다.
12-1. 요소 추가 방법 및 종류
Step 1. 사용자 편집 섹션을 선택한 후 하단의 요소 추가하기 버튼을 누르세요.
Step 2. 요소 추가하기 패널에 보이는 여러 요소를 사용자 편집 섹션에 추가하고 마우스로 끌어당겨 위치를 지정하세요
13. 전광판 배너 섹션
전광판 배너 섹션을 추가하여 노출하고 싶은 문구를 움직이는 전광판 배너로 만들 수 있습니다. 전광판 배너 섹션은 머리글과 메인 배너 섹션의 하단, 바닥 글의 상단에 노출할 수 있습니다.
13-1. 전광판 배너 섹션 개별 편집하기
[ 문구 및 링크 설정하기 ]
전광판 배너 섹션을 더블 클릭하면 아래와 같이 문구와 링크 주소를 입력할 수 있는 패널이 노출됩니다.
[ 이모지 사용 단축키 ] 이모지를 활용하면 전광판 배너 섹션을 훨씬 다채롭게 꾸며볼 수 있습니다. 이모지란?👀 그림 형태로 사람과 사물을 표현하는 일종의 이모티콘입니다.😉
Windows : 윈도우키 + ; (세미콜론) Mac: Ctrl + ⌘ + space
[ 바깥 여백 설정하기 ]
전광판 배너 섹션을 더블 클릭 > 디자인 버튼을 클릭하면 아래와 같이 바깥 여백(섹션 사이 간격)을 설정할 수 있는 패널이 노출됩니다.
13-2. 전광판 배너 섹션 공통 스타일 설정하기
[디자인 편집 > 좌측 하단 ≡ > 스타일 편집 > 전광판 배너 섹션]에서 전광판 배너 섹션의 공통 스타일을 설정할 수 있습니다.
14. 후기 섹션
후기 섹션은 등록된 후기 중 원하는 후기를 선택하여 원하는 페이지에 노출할 수 있는 섹션입니다. 아직 후기가 없는 상태라면 후기 게시판을 추가하고, 상품 후기가 등록된 이후 후기 섹션을 이용해 주세요.
14-1. 후기 섹션 개별 편집하기
[ 후기 불러오기 ]
Step1. 후기 섹션을 추가해 주세요.
디자인 편집 페이지 하단의 [+ 섹션 추가하기] 버튼을 클릭한 후 후기 섹션을 클릭하여 후기 섹션을 추가할 수 있습니다.
Step2. 후기 섹션을 더블 클릭하면 나타나는 설정 창에서 [후기 추가하기]를 클릭해 주세요.
후기 섹션에 아직 불러온 후기가 없을 때는 샘플 후기가 노출되며, 샘플 후기는 실제 사이트에 노출되지 않습니다.
Step3. [후기 불러오기]를 클릭해 주세요.
Step4. 후기 섹션에 노출할 후기를 선택하고 [저장]을 클릭해 주세요.
Step5. [완료] 버튼을 클릭하면 설정이 완료됩니다.
[ 후기 관리하기 ]
후기 섹션을 더블 클릭하면 나타나는 설정 창에서 [후기 관리하기]를 클릭하여 후기를 관리할 수 있습니다.
후기 내용 수정하기
후기 내용을 수정하고 [저장]을 클릭하면 후기 섹션에 노출될 후기 내용을 수정할 수 있습니다.상품 상세페이지, 후기 게시판에 노출되는 원본 후기 내용은 변경되지 않습니다.
후기 노출 순서 변경하기
'≡' 아이콘을 클릭한 상태로 드래그하여 후기 섹션에 노출되는 후기 순서를 조정할 수 있습니다.
상품 사진으로 바꾸기
'상품 사진으로 바꾸기'를 [✔︎] 체크하면 후기 이미지 대신 상품 대표 이미지가 노출됩니다.
[ 후기 노출 방식 설정하기 ]
후기 섹션을 더블 클릭하면 나타나는 설정 창에서 [디자인]을 클릭하면 후기 노출 방식을 설정할 수 있습니다.
14-2. 후기 섹션 공통 스타일 편집하기
[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 후기 섹션]에서 후기 섹션의 공통 스타일을 설정할 수 있습니다.
Last updated
