메뉴얼

뒤로가기
제목

메인 탭메뉴 설정 방법 : 1. 메인 분류 적용시키기

작성자 디자인하루(ip:)

작성일 2020-03-25

조회 42

평점 0점  

추천 추천하기

내용




원데이(ONEDAY) 스킨의 메인 탭 메뉴 설정 방법입니다.




1) 메인 분류 추가하기


쇼핑몰 관리자 로그인

> 상품관리 > 메인 상품 진열관리 > 우측의 메인분류 관리 클릭

> [추가] 버튼으로 메인 분류 추가 > 분류명 입력(되도록 노출하실 상품 분류와 같게 설정해 주세요. ex: 상의, 하의, 식품, 디지털 등)

> 모듈 코드를 확인해서 기억해주세요. (뒤의 숫자만 기억하시면 됩니다.)






2) 스마트 디자인 편집창에서 모듈 코드 입력하기


디자인 관리 > 쇼핑몰 디자인 수정

> 편집창에서 상단의 main.html 클릭해 이동

> 스크롤을 내려 베스트 상품(탭 배너) 찾기

> tab_product_01.html 클릭해 이동






> 탭 메뉴 타이틀 수정

상품 분류명을 적으시면 됩니다. 노출될 순서대로 적어주세요.


 ex: <li>상의</li>

<li>하의</li>

<li>신발</li>

<li>악세서리</li>


> item 아래의 "product_listmain_1" 부분에 아까의 메인 분류 모듈 코드를 입력하세요.

하단으로 스크롤하시면 추가로 item이 3개 더 있으며, 총 4개가 기본적으로 세팅되어 있습니다.


반드시 노출하실 순서대로 메인 분류를 만드시고, 해당하는 메인 분류의 모듈 코드를 이곳에서 순서대로 입력해 주세요.




3) 주석 추가해서 탭 메뉴 줄이는 방법


없애실 곳의 시작부분 부터 마지막 부분 까지 <!-- 시작 ~~~~~~~ 마지막 --> 이렇게 달아 주시면 내용이 사라지게 됩니다.

다시 노출하시려면 <!-- --> 만 지워주시면 됩니다.


ex : 탭 메뉴를 3개로 줄이고 싶을 때


<li>상의</li>

<li>하의</li>

<li>신발</li>

<li>악세서리</li>


여기서 없애고 싶은 탭메뉴 타이틀에 주석을 달아줍니다.


<li>상의</li>

<li>하의</li>

<li>신발</li>

<!-- <li>악세서리</li> -->


이렇게 해주면 악세서리 탭 메뉴 타이틀은 사라지게 됩니다.



다음으로, 악세서리 탭에 해당하는 내용도 주석을 달아서 없애주셔야 합니다.

악세서리는 가장 마지막 탭메뉴이므로 맨 밑으로 스크롤을 내리셔서 아래의 내용을 찾아주세요.


<div class="item">

<div module="product_listmain_숫자" class="ec-base-product">

            <!--

            $count = 5

            ※ 상품진열갯수를 설정하는 변수입니다. 설정하지 않을 경우, 최대 200개의 상품이 진열 됩니다.

            ※ 진열된 상품이 많으면, 쇼핑몰에 부하가 발생할 수 있습니다.

            $basket_result = /product/add_basket.html

            $basket_option = /product/basket_option.html

            -->

               

   ============== 중략 ==============

                               

</div>

</div><!--/item-->


이제 item 시작부터 끝까지 주석을 달아줍니다.


<!-- <div class="item">

<div module="product_listmain_8" class="ec-base-product">

            <!--

            $count = 5

            ※ 상품진열갯수를 설정하는 변수입니다. 설정하지 않을 경우, 최대 200개의 상품이 진열 됩니다.

            ※ 진열된 상품이 많으면, 쇼핑몰에 부하가 발생할 수 있습니다.

            $basket_result = /product/add_basket.html

            $basket_option = /product/basket_option.html

            -->

               

   ============== 중략 ==============

                               

</div>

</div> --> <!--/item-->




여기까지 하셨다면 메인 탭 메뉴에서 '악세서리'는 노출되지 않게 되고, 남은 3개만 노출됩니다.




4) 복사+붙여넣기로 탭 메뉴 늘이는 방법


ctrl+C, ctrl+V 로 원하시는 만큼 붙여넣고 제목과 'product_listmain_숫자' 부분만 수정해서 늘이실 수 있습니다.


단, 해당하는 메인 분류가 존재해야 하기 때문에, 추가하실 탭 메뉴 숫자만큼 메인 분류도 추가하셔야 합니다.



ex : 탭 메뉴를 6개로 늘이고 싶을 때


<li>상의</li>

<li>하의</li>

<li>신발</li>

<li>악세서리</li>


여기서 하나를 복사해 원하는 위치에 붙여넣기 해줍니다.

붙여넣기 한 후, 타이틀을 원하는 내용으로 수정해줍니다.


<li>상의</li>

<li>하의</li>

<li>신발</li>

<li>악세서리</li>

<li>쥬얼리</li>

<li>가방</li>



다음으로, 해당하는 위치에 item 부분을 복사+붙여넣기 해줍니다.


5번째인 쥬얼리는 4번째인 악세서리 아래에 내용이 와야 합니다.

아래의 내용을 편집창에서 찾아 복사해서 4번째 악세서리 아래에 붙여넣기 해줍니다.



<!-------------------------------------------------------------------------------


item


        ※ 여기서 노출하실 메인 리스트를 설정하실 수 있습니다.


        ※ 설정 방법은 아래와 같습니다.

        1. 쇼핑몰 관리자 로그인

        2. 상품관리 > 상품관리 > 메인 상품 진열 관리

        3. 메인분류별 진열 아래의 메인분류 영역 우측의 메인분류 관리 버튼 클릭

4. 추가하기 > 원하시는 메인 분류명으로 설정(노출하실 중분류명으로 적어주시면 됩니다)

5. 해당하는 모듈코드(product_listmain_숫자)를 확인

6. 아래의 <div module="product_listmain_숫자"> 부분에 해당하는 숫자를 입력


(자세한 내용은 카페24 매뉴얼과 디자인하루 매뉴얼을 참고하세요.)

※탭매뉴에 노출되는 상품은 분류당 5개까지 가능합니다.


--------------------------------------------------------------------------------->

<div class="item">

<div module="product_listmain_숫자" class="ec-base-product">

            <!--

            $count = 5

            ※ 상품진열갯수를 설정하는 변수입니다. 설정하지 않을 경우, 최대 200개의 상품이 진열 됩니다.

            ※ 진열된 상품이 많으면, 쇼핑몰에 부하가 발생할 수 있습니다.

            $basket_result = /product/add_basket.html

            $basket_option = /product/basket_option.html

            -->

               

   ============== 중략 ==============

                               

</div>

</div><!--/item-->



6번째인 가방 탭도 마찬가지로, 붙여넣기한 5번째 쥬얼리 탭 내용 아래에 붙여넣기 해줍니다.


그후 'product_listmain_숫자' 부분을 쥬얼리, 가방 탭메뉴용으로 만드신 메인 분류의 모듈 코드로 교체해 주면 됩니다.





어느 정도 html 지식이 있으시다면 훨씬 수월하게 작업 가능하신 점 참고 부탁드립니다.


수정에 어려움이 있으신 분은 수정 문의 게시판이나 카카오톡으로 문의 주시면 세팅형 전환 또는 추가수정 도움 드리도록 하겠습니다.


첨부파일

비밀번호
수정

비밀번호 입력후 수정 혹은 삭제해주세요.

댓글 수정

이름

비밀번호

내용

/ byte

수정 취소
비밀번호
확인 취소