스마트디자인 편집창에서 HTML/CSS를 수정하여, 메인 또는 상품 분류 페이지의 한 줄당 상품 진열 개수를 변경할 수 있어요.
자세히 알아보기
소스 수정하기
- 에서 스마트디자인 스킨의 '편집' 버튼을 클릭하여 스마트디자인 편집창을 열어 주세요.
- 메인(index.html), 상품 분류(list.html) 화면에서 원하시는 상품 진열 개수만큼 class 값을 수정해 주세요.
3단 진열은 3, 4단 진열은 4, 5단 진열은 5로 입력하시면 되어요.- PC 소스 > ul class="prdList column3" 에서 숫자 변경
- 모바일 소스 > ul class="grid3" 에서 숫자 변경
- '저장' 버튼을 클릭하면 쇼핑몰 화면에서 상품 진열 개수가 변경된 것을 확인할 수 있어요.
소스 수정 후 디자인이 깨질 때 대처 방법
소스 수정 후 상품 진열 디자인이 틀어진다면 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
전체 소스를 확인하고 싶다면 모듈 리스트 페이지를 참고해 주세요.