모바일 쇼핑몰 메인 상단 상품 분류하기 – 카페24 Help Center

모바일쇼핑몰 메인 상단에 상품 분류 정보를 표시할 수 있어요.
상품 분류를 표시하면 각 분류 화면으로 편리하게 이동할 수 있어요.

자세히 알아보기

상품 분류 정보 표시하기

스마트디자인 편집창으로 디자인 소스 반영이 필요해요.
스마트디자인 편집창에 css 화면이 없을 경우 스마트디자인 편집창 좌측 하단에서 '화면 추가'를 해주세요.

화면 위치 : 메인화면(index.html)
아래와 같이 파란색 소스를 추가해주세요.

## 상단생략 ##
<!--@layout(/layout/basic/main.html)-->
<nav module="layout_category" class="mainCategory">
    <!--@css(/layout/basic/css/categoryList.css)-->
    <ul>
        <li><a href="/product/list_thumb.html{$param}">{$name_or_img_tag}</a></li>
        <li><a href="/product/list_thumb.html{$param}">{$name_or_img_tag}</a></li>
        <li><a href="/product/list_thumb.html{$param}">{$name_or_img_tag}</a></li>
     </ul>
</nav>
<div class="mainBanner" module="Mobile_Banner">
## 하단생략 ##

화면 위치 : 레이아웃(layout) > 기본 레이아웃(basic) > css >categoryList.css
아래와 같이 파란색 소스를 추가해주세요.

한 줄에 4개씩 진열

 .xans-layout-category.mainCategory ul { width:100%; font-size:0; line-height:0; border-top:1px solid #ececec; border-bottom:1px solid #ececec; }
.xans-layout-category.mainCategory ul:after { content:""; display:block; clear:both; }
.xans-layout-category.mainCategory li { float:left; width:25%; }
.xans-layout-category.mainCategory li a { display:block; overflow:hidden; height:36px; line-height:36px; padding:0 7px; font-size:13px; color:#000; font-weight:bold;
     border-bottom:1px solid #ececec; border-right:1px solid #ececec; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.xans-layout-category.mainCategory li:nth-child(4) a,
.xans-layout-category.mainCategory li:nth-child(8) a { border-right:0; }
.xans-layout-category.mainCategory li:nth-child(5) a,
.xans-layout-category.mainCategory li:nth-child(6) a,
.xans-layout-category.mainCategory li:nth-child(7) a,
.xans-layout-category.mainCategory li:nth-child(8) a { border-bottom:0; }

한 줄에 5개씩 진열

 .xans-layout-category.mainCategory ul { width:100%; font-size:0; line-height:0; border-top:1px solid #ececec; border-bottom:1px solid #ececec; }
.xans-layout-category.mainCategory ul:after { content:""; display:block; clear:both; }
.xans-layout-category.mainCategory li { float:left; width:20%; }
.xans-layout-category.mainCategory li a { display:block; overflow:hidden; height:36px; line-height:36px; padding:0 7px; font-size:13px; color:#000; font-weight:bold;
     border-bottom:1px solid #ececec; border-right:1px solid #ececec; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.xans-layout-category.mainCategory li:nth-child(5) a,
.xans-layout-category.mainCategory li:nth-child(10) a { border-right:0; }
.xans-layout-category.mainCategory li:nth-child(6) a,
.xans-layout-category.mainCategory li:nth-child(7) a,
.xans-layout-category.mainCategory li:nth-child(8) a,
.xans-layout-category.mainCategory li:nth-child(9) a,
.xans-layout-category.mainCategory li:nth-child(10) a { border-bottom:0; }