상품 목록 섹션 공통 스타일 설정하기

설정 항목
너비 상품 목록 섹션 내 상품 썸네일 영역의 너비를 설정할 수 있습니다. 좁은 화면의 너비는 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' 등의 단어로 표기됩니다.