주 콘텐츠로 건너뛰기

한 줄에 노출되는 상품 진열 개수 변경 방법

스마트디자인 편집창에서 HTML/CSS를 수정하여, 메인 또는 상품 분류 페이지의 한 줄당 상품 진열 개수를 변경할 수 있어요.

자세히 알아보기

소스 수정하기

  1. [관리자] 디자인 > 디자인 보관함 에서 스마트디자인 스킨의 '편집' 버튼을 클릭하여 스마트디자인 편집창을 열어 주세요.

  2. 메인(index.html), 상품 분류(list.html) 화면에서 원하시는 상품 진열 개수만큼 class 값을 수정해 주세요.
    3단 진열은 3, 4단 진열은 4, 5단 진열은 5로 입력하시면 되어요.
    • PC 소스 > ul class="prdList column3" 에서 숫자 변경
    • 모바일 소스 > ul class="grid3" 에서 숫자 변경

  3. '저장' 버튼을 클릭하면 쇼핑몰 화면에서 상품 진열 개수가 변경된 것을 확인할 수 있어요.

 

소스 수정 후 디자인이 깨질 때 대처 방법

소스 수정 후 상품 진열 디자인이 틀어진다면 CSS 파일의 width 값을 수정하여 상품 너비를 조절해 주세요.
예시 (/css/module/product/listmain_1.css)

[PC]

.xans-product-1 ul.column3 li.item { width:33.33%; }

.xans-product-1 ul.column3 li.item .box { width:324px; }

.xans-product-1 ul.column3 li.item .thumb { width:322px; height:322px; }

.xans-product-1 ul.column4 li.item { width:25%; }

.xans-product-1 ul.column4 li.item .box { width:240px; }

.xans-product-1 ul.column4 li.item .thumb { max-width:238px; }

.xans-product-1 ul.column5 li.item { width:20%; }

.xans-product-1 ul.column5 li.item .box { width:189px; }

.xans-product-1 ul.column5 li.item .thumb { max-width:187px; }

 

[모바일]

.xans-product-listmain-1 .grid2 li { width:50%; }

.xans-product-listmain-1 .grid3 li { width:33.333%; }

.xans-product-listmain-1 .grid4 li { width:25%; }

.xans-product-listmain-1 .grid5 li { width:20%; }

 

 

Info

전체 소스를 확인하고 싶다면 모듈 리스트 페이지를 참고해 주세요.

이 페이지가 도움이 되었나요?
현재 콘텐츠