상품 목록 필터 스타일 옵션 추가_한별(완)
[ 기능 배포 관련 안내서 ]
업로드 전 체크리스트
업로드 후 체크리스트
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)를 클릭하면 모든 필터를 확인할 수 있습니다.
필터 종류가 '나열'인 경우 모든 필터가 화면에 노출됩니다.
필터 종류가 '가로 스크롤'인 경우 나열 상태에서 가로로 필터가 노출되며, 스크롤이 가능합니다.
필터 종류가 '줄바꿈'인 경우 모든 필터가 줄바꿈 형식으로 화면에 노출됩니다.
Last updated
Was this helpful?