쇼핑몰 상품 목록 화면 꾸미기

손님이 쇼핑몰에 들어오면 처음 보는 곳이 상품 목록 화면(/shop)입니다. 한 줄에 몇 개를 놓을지, 카테고리와 필터를 어디에 둘지, 상품 카드를 어떤 모양으로 보여 줄지를 홈페이지 편집기에서 정합니다. 바꾼 내용은 이 홈페이지의 모든 카테고리 화면에 함께 적용됩니다.

시작하기 전에

사용자 권한의 홈페이지 항목이 편집 및 디자이너여야 편집기에서 쇼핑몰 옵션이 보입니다.
목록에 보일 품목은 게시되어 있어야 합니다. 쇼핑몰에 품목 올리기
카테고리와 태그를 먼저 만들어 두면 결과를 바로 확인할 수 있습니다. 쇼핑몰 카테고리와 품목 사양 만들기

편집 화면 열기

홈페이지 → 쇼핑몰 → 쇼핑을 눌러 상품 목록 화면을 엽니다.
위쪽 오른쪽의 편집을 누르고 오른쪽 편집 막대에서 스타일 탭을 엽니다.
상품 목록 바깥의 빈 곳을 누르면 품목 페이지 묶음이 나옵니다. 아래 칸들은 모두 이 묶음에 있습니다.
다 고쳤으면 위쪽의 저장을 누릅니다.

처음 들어 있는 모양

칸	처음 값
콘텐츠 너비	보통
표시	한 화면에 21개, 3열
모바일	2열
카테고리	상단(목록 위에 카테고리 띠)
필터	사이드바, 그 아래 태그 켜짐, 가격 꺼짐
도구 모음	정렬 기준과 검색 켜짐
기본 정렬	추천 상품

목록 크기와 배치

콘텐츠 너비: 보통은 가운데 정해진 폭, 채우기는 화면 가로 전체를 씁니다.
품목 디자인: 상품을 격자(카드)로 놓을지 목록(줄)으로 놓을지 고르는 칸입니다. 칸 옆의 붓 아이콘을 누르면 아래 「상품 카드 모양」의 세부 칸이 열립니다.
표시: 한 화면에 보일 상품 수와 한 줄의 열 수(2~5열)를 정합니다. 수를 너무 크게 잡으면 화면이 늦게 뜹니다.
모바일: 휴대폰에서 한 줄에 1열 또는 2열로 보입니다.

카테고리와 필터

카테고리: 사이드바를 누르면 왼쪽에 카테고리 목록이, 상단을 누르면 목록 위에 카테고리 띠가 나옵니다. 둘 다 켜도 됩니다.
- 상단을 켜면 아래 스타일에서 띠 모양(기본, 테두리 적용, 탭, 이미지 등)을 고릅니다.
- 사이드바를 켜면 카테고리 항목 접기로 하위 카테고리를 접어 둘 수 있습니다.
필터: 속성(색상, 크기 등)과 태그로 상품을 거르는 칸을 어디에 둘지 고릅니다.
- 사이드바: 왼쪽에 항상 보입니다.
- 화면 밖 메뉴: 도구 모음에 필터 버튼이 생기고, 누르면 옆에서 메뉴가 열립니다.
- 숨기기: 필터를 보여 주지 않습니다.
가격, 태그: 필터를 보여 줄 때 가격 범위 막대와 태그 필터를 켜고 끕니다.
사이드바 섹션 접기: 사이드바의 카테고리와 필터 묶음을 접힌 상태로 보여 줍니다.

속성 필터에는 지금 목록에 나온 품목에 쓰인 속성 가운데 속성 화면의 표시 칸이 표시하기인 것만 나옵니다. 태그 필터에는 고객에게 표시하기를 켠 태그만 나옵니다. 태그는 품목 화면 일반 정보 탭의 태그 칸에서 붙이고, 태그를 열어 고객에게 표시하기를 켭니다.

도구 모음과 정렬

도구 모음: 목록 위에 정렬 기준 상자와 검색 칸을 보여 줄지 정합니다.
떠 있는: 화면을 내려도 도구 모음이 아래쪽에 붙어 따라오게 합니다. 도구 모음이나 화면 밖 메뉴를 켰을 때만 보입니다.
기본 정렬: 손님이 처음 들어왔을 때의 순서입니다. 추천 상품, 신규 등록 순, 제품명 순 (A-Z), 낮은 가격 순, 높은 가격 순 가운데 고릅니다. 모든 카테고리에 같은 순서가 걸립니다.

상품 하나의 크기와 순서 바꾸기

특정 상품을 크게 보여 주거나 앞쪽으로 옮길 수 있습니다.

편집 상태에서 목록의 상품 카드를 하나 누릅니다.
스타일 탭의 품목 묶음에서 고칩니다.
- 사이즈: 칸을 끌어 이 상품 카드가 차지할 가로·세로 칸 수를 고릅니다. 품목 디자인이 목록(줄)이면 이 칸은 보이지 않습니다.
- 재주문: 화살표로 맨 앞, 한 칸 앞, 한 칸 뒤, 맨 뒤로 옮깁니다.
- 리본: 「세일」, 「신규!」 같은 띠를 붙입니다. 상품 비교, 위시리스트, 리본 쓰기
저장을 누릅니다.

재주문 칸은 기본 정렬이 추천 상품일 때만 보입니다. 다른 정렬을 쓰면 순서는 그 기준대로만 정해집니다.

여러 상품의 순서를 한꺼번에 맞추려면 홈페이지 → 쇼핑몰 → 품목 → 품목을 목록 보기로 바꾸고 줄 왼쪽 손잡이를 끌어 옮깁니다. 이 순서도 추천 상품 정렬에 쓰입니다.

상품 카드 모양

품목 디자인 옆의 붓 아이콘을 누르면 디자인 창이 열립니다.

사전 설정: 미리 짜 둔 카드 모양을 고릅니다. 고른 뒤 아래 칸으로 세부를 다듬습니다.
일반: 카드 사이 간격, 모서리 둥글기, 색, 마우스를 올렸을 때 효과
텍스트 및 콘텐츠: 상품 이름 모양, 설명(품목의 짧은 설명 표시), 평가(별점 표시)
이미지: 이미지 비율, 보조 이미지(마우스를 올리면 품목의 두 번째 사진으로 바뀜)
작업: 카드에 장바구니에 담기, 비교 버튼과 위시리스트 버튼을 둘지, 늘 보일지 마우스를 올렸을 때만 보일지

고를 수 있는 칸은 사전 설정에 따라 조금씩 다릅니다.

목록 위 제목과 카테고리 설명

목록 맨 위의 제목 부분을 누르면 쇼핑몰 첫 화면에서는 상점 머리글, 카테고리 화면에서는 카테고리 머리글 묶음이 나옵니다.

제목 보기: 쇼핑몰 첫 화면에서는 「모든 품목」, 카테고리 화면에서는 카테고리 이름을 보여 줍니다.
콘텐츠 가운데 정렬: 제목을 가운데로 놓습니다.
설명 보기: 카테고리 화면에서만 보입니다. 카테고리에 적어 둔 설명을 제목 아래 보여 줍니다.

목록 위아래에 블록 넣기

목록 위와 아래 빈 자리에 블록을 끌어 놓아 배너나 안내 문구를 넣을 수 있습니다. 쇼핑몰 첫 화면에서 넣은 블록은 그 화면에만, 카테고리 화면에서 넣은 블록은 그 카테고리를 볼 때만 보입니다. 블록 넣는 법은 블록으로 페이지 꾸미기에 있습니다.

다른 페이지(예 첫 페이지)에 상품을 소개하려면 블록 탭의 이커머스 분류를 씁니다.

슬라이드 형식, 그리드: 상품을 넘기며 보거나 격자로 보여 줍니다. 블록을 누르고 스타일 탭에서 필터(최신순, 최근 판매 등), 카테고리, 태그로 보여 줄 상품을 고릅니다.
카테고리: 쇼핑몰 카테고리를 그림 목록으로 보여 줍니다.

쇼핑몰용 바닥글

바닥글 서식 가운데 쇼핑몰용 서식이 따로 있습니다. 바닥글을 누르고 스타일 탭의 템플릿에서 고릅니다. 바닥글은 모든 페이지에 같이 걸리고, 카테고리마다 다르게 둘 수는 없습니다. 머리글 메뉴와 바닥글 고치기

알아 둘 점

여기서 바꾼 칸은 저장하는 순간 손님 화면에 반영됩니다. 영업 중인 쇼핑몰이라면 로그아웃한 창에서 한 번 확인합니다.
표시의 상품 수, 기본 정렬, 콘텐츠 너비는 홈페이지마다 따로 저장됩니다. 홈페이지를 여러 개 쓰면 홈페이지마다 따로 정합니다.
스타일 탭의 품목 페이지라는 이름은 상품 목록 화면 묶음과 상품 한 개 화면 묶음에 똑같이 붙어 있습니다. 지금 연 화면이 목록인지 상품 한 개인지 보고 고칩니다.