상품 목록 필터 스타일 옵션 추가_한별(완)
[ 기능 배포 관련 안내서 ]
업로드 전 체크리스트
업로드 후 체크리스트
5-3. 상품 목록 섹션 공통 스타일 설정하기
공통 스타일 설정 패널로 이동하거나 섹션 태그의 파레트 모양 아이콘을 눌러 상품 목록 섹션의 공통 스타일을 설정할 수 있습니다.
설정 항목 |
너비 상품 목록 섹션 내 상품 썸네일 영역의 너비를 설정할 수 있습니다.
|
열 한 줄에 몇 개의 상품을 보여줄지 설정할 수 있습니다. |
페이지당 상품 개수 한 페이지에 노출할 수 있는 상품의 최대 개수를 설정할 수 있습니다. 전체 상품 수가 지정된 상품 수보다 많으면 페이지로 나뉘며, 하단에 쪽 번호가 함께 노출됩니다. |
썸네일 상품 목록 섹션에 출력되는 상품 썸네일의 비율을 설정할 수 있습니다.
|
간격 상품 썸네일 간 가로, 세로 간격을 설정할 수 있습니다. |
필터 상품 목록 섹션에서 카테고리를 선택한 경우 노출되는 필터의 스타일 속성을 설정할 수 있습니다.
|
상품 이름 / 가격 / 보조 설명 상품 목록 섹션에 노출되는 상품의 이름, 가격, 보조 설명의 노출 방식을 설정할 수 있습니다.
|
상품 이름 상품 목록 섹션에 노출되는 상품 이름의 스타일 속성을 설정할 수 있습니다.
|
가격 상품 목록 섹션에 노출되는 상품 가격의 스타일 속성을 설정할 수 있습니다.
|
보조 설명 '보조 설명 보이기'를 사용[✔︎]으로 선택하면 상품 목록 섹션에 노출되는 보조 설명의 스타일 속성을 설정할 수 있습니다.
|
배지 상품 목록 섹션에 노출되는 배지의 스타일 속성을 설정할 수 있습니다.
|
마우스 오버 효과 상품 목록 섹션의 상품 썸네일 위에 마우스를 올리면 보여질 효과를 설정할 수 있습니다.
|
언어 배지에 표기될 단어의 언어를 설정할 수 있습니다. 단, '상품 > 편집하기 > 배지 - 직접 입력'을 통해 만든 배지는 언어 설정과 관계없이 입력한 대로 노출됩니다.
|
5-4. 상품 목록 섹션의 필터 기능
상품 목록 섹션에서 상품 카테고리를 아래의 이미지와 같이 필터로 노출할 수 있습니다.
[ 데스크탑에서 필터 보이기 설정하기 ]
Step 1. 상품 목록 섹션 영역을 클릭하고 우측 상단에 노출되는 연필 모양의 개별 편집 버튼을 클릭해 주세요.
Step 2. 상품 목록 섹션 패널의 '디자인'탭에서 '필터 보이기'를 [✓] 체크해 주세요.
필터 위치 조정 및 상세 설정 방법을 확인하려면 필터 기능 활용해 보기 안내서를 참고해 주세요.
[ 모바일에서 필터 종류 설정하기 ]
모바일 화면에서 필터가 노출되는 방식을 설정할 수 있습니다.
Step 1. 우측 하단의 모니터 모양 아이콘을 클릭하고 [모바일] 버튼을 클릭해 주세요.
모바일 편집 모드로 전환된 화면을 확인하실 수 있습니다.
Step 2. [좌측 하단 메뉴(≡) > 스타일 편집 > 상품 목록 섹션]으로 이동해 주세요.
Step 3. 필터 종류를 선택해 주세요.
필터 종류가 '드롭다운'인 경우 전체(All)를 클릭하면 모든 필터를 확인할 수 있습니다.
필터 종류가 '나열'인 경우 모든 필터가 화면에 노출됩니다.
필터 종류가 '가로 스크롤'인 경우 나열 상태에서 가로로 필터가 노출되며, 스크롤이 가능합니다.
필터 종류가 '줄바꿈'인 경우 모든 필터가 줄바꿈 형식으로 화면에 노출됩니다.
Last updated