본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
1222 메인 페이지에 카테고리 추가하기 조회수 14512
  • 작성일 2017-07-04 11:04:19
  • 추천 추천하기
  • 조회수 14512


메인 페이지에 카테고리를 추가해보세요!



메인에 노출하는 카테고리를 추가하여

노출되는 상품을 다른 디자인으로 관리하고 싶은 경우

활용할 수 있는 팁입니다!



일반적인 방법과 쉬운 방법 두 가지로 안내드리오니

선택하여 적용해보세요 ~


 




01

카테고리 추가하기




1. 쇼핑몰 관리자의 '상품관리 > 상품 표시 관리 > 상품 진열 관리 '메인 분류 관리' 버튼


'추가' 버튼을 클릭하여 새로운 분류를 생성해주세요.

※ 모듈 코드는 저장하면 자동 생성 됩니다.



 



2. 메인에 노출하고 싶은 상품을 '상품 관리 > 상품 목록'에서 선택해 메인 진열을 설정합니다.


 


 



3. 디자인 편집창의 메인(index.html) 에서 원하는 위치에 아래 코드를 넣고 영역을 클릭해주세요.


※ product_listmail_8은 step1에서 생성된 모듈코드 입니다.

해당 카테고리의 모듈 코드와 동일한 번호로 넣어주세요.


       

<div module="product_listmain_8"> </div>




 



4. 편집 버튼을 클릭하여 꾸미기를 선택 후 원하는 디자인을 적용합니다.


 



5. 디자인 적용 후, 편집창을 저장하면 프론트 화면에서 추가한 카테고리가 노출되는 것을 확인할 수 있습니다.


 





02

쉬운 방법으로 카테고리 추가하기




위와 같은 방법이 어렵게 느껴진다면

이 방법을 따라해보세요!




1. 디자인 편집창에서 원하는 위치에 모듈을 추가합니다.



※ 해당 소스는 아래에서도 확인 하실 수 있습니다.



▶ 메인 모듈 가이드(클릭) 



3~5단형으로 선택해 추가할 수 있습니다.


 




2. 추가된 모듈의 html을 다음과 같이 변경합니다.



HTML과 CSS 파일의 모듈 번호는 추가한 메인 분류의 모듈코드로 수정합니다.



HTML : product_listmain_1 

CSS : .xans-product-1



step1에서 생성한 카테고리의 모듈코드는 product_listmain_8 이기 때문에

1을 8로 변경합니다.



       

<div module="product_listmain_1">

    <!--@css(/css/module/product/2970/listmain_1.css)-->

    <!--

        $count = 8

        $basket_result = /product/add_basket.html

        $basket_option = /product/basket_option.html

    -->

    <h2><span>{$category_title_text}</span></h2>

    <ul class="prdList column4">

        <li class="item" id="anchorBoxId_{$product_no}">

            <div class="box">

                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="" class="thumb" /></a>

                <div class="status">

                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>

                    <div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>

                </div>

                <p class="name">

                    <a href="/product/detail.html{$param}" class="{$product_name_display|display}"><strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}</a>

                </p>

                <ul module="product_ListItem">

                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>

                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>

                </ul>

            </div>

        </li>

        <li class="item" id="anchorBoxId_{$product_no}">

            <div class="box">

                <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="" class="thumb" /></a>

                <div class="status">

                    <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>

                    <div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>

                </div>

                <p class="name">

                    <a href="/product/detail.html{$param}" class="{$product_name_display|display}"><strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}</a>

                </p>

                <ul module="product_ListItem">

                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>

                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>

                </ul>

            </div>

        </li>

    </ul>

</div>



       

  /* 공통 */

.xans-product-1 { margin:22px 0 0; }

.xans-product-1 h2 { margin:0 0 16px; font-weight:normal; font-size:20px; font-family:Arial, "돋움", Dotum, sans-serif; color:#2e2e2e; text-align:left; border-top:1px solid #e8e8e8; padding:40px 0 0; text-indent:5px; }

.xans-product-1 img { vertical-align:middle; }

.xans-product-1 ul.prdList { display:table; width:100%; min-width:756px; margin:-20px 0 0; font-size:0; line-height:0; }

.xans-product-1 ul.prdList li.item { display:inline-block; margin:20px 0; color:#757575; vertical-align:top; *display:inline; *zoom:1; }

.xans-product-1 ul.prdList li.item .box { margin:0 auto; font-size:12px; line-height:18px; text-align:center; }

.xans-product-1 ul.prdList li .color { overflow:hidden; display:inline-block; margin:3px 0 0 0; }

.xans-product-1 ul.prdList.column3 li .color { width:176px; }

.xans-product-1 ul.prdList.column4 li .color { width:116px; }

.xans-product-1 ul.prdList.column5 li .color { width:76px; }

.xans-product-1 ul.prdList li .chips { float:left; width:10px; height:10px; margin:0 2px 2px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; }


.xans-product-1 ul.prdList .thumb { margin:0 0 10px; border:1px solid #ececec; }

.xans-product-1 ul.prdList .name { text-align:left; }

.xans-product-1 ul.prdList .name a { color:#2e2e2e; }

.xans-product-1 ul.prdList .name .title { font-weight:normal; }

.xans-product-1 ul.prdList .status { margin:0 0 16px; padding:0 80px 4px 0; border-bottom:1px solid #e8e8e8; text-align:right; line-height:0; *zoom:1; }

.xans-product-1 ul.prdList .status:after { content:""; display:block; clear:both; }

.xans-product-1 ul.prdList .icon { float:left; text-align:left; }

.xans-product-1 ul.prdList .icon img { margin:0 -3px 6px 0; }

.xans-product-1 ul.prdList .button { margin:0 -80px 0 0; *zoom:1; }

.xans-product-1 ul.prdList .button img { margin:0 0 6px -3px; cursor:pointer; }

.xans-product-1 ul.prdList .button .option { display:inline; position:relative; *zoom:1; }

.xans-product-1 ul.prdList .mileage { display:block; }

.xans-product-1 ul.prdList span.grid { display:block; }


.xans-product-listitem li { text-align:left; }


/* 진열방식 */

.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; }


/* module="product_ListItem" */

.xans-product-1 .xans-product-listitem { margin:0; }

.xans-product-1 .xans-product-listitem li .title { font-weight:normal; vertical-align:top; }

.xans-product-1 .xans-product-listitem li .title span { vertical-align:top; }


/* 할인기간 레이어 */

.xans-product-1 .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; *zoom:1; *display:inline; }

.xans-product-1 .discountPeriod .edge { position:absolute; left:50%; top:-6px; width:10px; height:6px; margin:0 0 0 -5px; font-size:0; line-height:0; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/common/ico_tip_edge.gif") no-repeat 0 0; }

.xans-product-1 .layerDiscountPeriod { display:none; position:absolute; left:50%; top:26px; width:247px; margin:0 0 0 -124px; border:1px solid #565960; font-size:12px; background-color:#fff; }

.xans-product-1 .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; }

.xans-product-1 .layerDiscountPeriod .content { padding:9px 10px 12px 14px; font-family:Verdana, "돋움", Dotum, sans-serif; }

.xans-product-1 .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; color:#000; line-height:16px; color:#757575; letter-spacing:-1px; }

.xans-product-1 .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; }

.xans-product-1 .layerDiscountPeriod .content p strong span { font-size:11px; }

.xans-product-1 .layerDiscountPeriod .close { position:absolute; right:14px; top:14px; }

.xans-product-1 .layerDiscountPeriod .close img { cursor:pointer; }