_imgTag_

           

[ 27 INFINITE ] 메인 탭 디자인 상품 관리하기
  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

    • 이 상품은 해외배송이 가능한 상품입니다

    [ 27 INFINITE ] 메인 탭 디자인 상품 관리하기품절
    메인 페이지에 표시되는 탭 디자인을 변경하거나 수정, 삭제 혹은 변형하는 방법을 안내합니다.
    기본 정보
    [ 27 INFINITE ] 메인 탭 디자인 상품 관리하기
    메인 페이지에 표시되는 탭 디자인을 변경하거나 수정, 삭제 혹은 변형하는 방법을 안내합니다.
    사용후기 0
    수량 수량증가수량감소
    타임세일

    카드혜택안내 미확인 입금자

    개인결제창을 통한 결제 시 네이버 마일리지 적립 및 사용이 가능합니다.
  • 상품 수량
    수량
    증가 감소
    상품 옵션
    옵션 선택

  • 수량을 선택해주세요.

    옵션선택 박스를 선택하시면 아래에 상품이 추가됩니다.

    최소주문수량 1개 이상 / 최대주문수량 0개 이하입니다.

    상품 목록
    상품명 상품수 가격
    [ 27 INFINITE ] 메인 탭 디자인 상품 관리하기 수량증가 수량감소 0 (  )
    사이즈 가이드
  • TOTAL PRICE 0 (0개)

    할인가가 적용된 최종 결제예정금액은 주문 시 확인할 수 있습니다.

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
  • 공급사 바로가기

이 메뉴얼은 메인 페이지의 탭 디자인을 변경하는 방법에 대한 안내 입니다.

기본적으로  [ 27 INFINITE ] 메인 상품진열, 배치 순서 변경하기 메뉴얼과 같지만,
탭을 관리하는 방법에 대한 안내가 조금 추가된 메뉴얼이니 참고하시길 바랍니다.




1. 우선 탭 디자인을 수정할 수 있는 코드를 엽니다.

 


파일을 여시면, 아래와 같은 반복적인 코드 단락이 보여집니다.

총 4개가 있을텐데요, 이 단락을 복사해서 더 만들거나, 삭제하거나, 혹은 변경하실 수 있습니다.



 

이 코드를 뜯어서 설명하는건 [ 27 INFINITE ] 메인 상품진열, 배치 순서 변경하기 메뉴얼에서 확인이 따로 가능합니다.
이 코드를 관리할때는 아래의 주의사항을 인지하고 관리해주세요.

1. 너무 많은 카테고리를 넣지 마세요.
2. 너무 많은 상품을 넣지 마세요.
3. 상품이 탭 속에 부족하지 않도록 기본적은 개수를 서로 맞춰주세요.

* 참고로 마우스 호버시 보여지는 이펙트가 있는데,
* 이 효과를 변경하는 코드는 아래와 같습니다.




2. 마우스 호버 효과를 변경하기

탭 각각의 상품에 마우스를 올렸을때 효과를 변경할 수 있습니다.
기본, 흰색, 화이트, 숨기기의 효과를 지원하며, 아래의 코드를 참조하실 수 있습니다.


                <!--------------------------------------------------------------------------------------------
                    첫번째 탭
                ---------------------------------------------------------------------------------------------->
                <li module="product_listmain_5">

                    <!--
                        $count = 4
                    -->
                    <div class="sp--tabs-subtitle displaynone">
                        <span class="{$category_title_text_display}">{$category_title_text}</span>
                        <span class="{$category_title_img_display}"><img src="{$category_title_img}" /></span>
                    </div>
                    <div class="sp__product sp--box" grid="4" gap="lg" scope="hover-white" control="false" mobile="2" tablet="2">
                        <!--@import(/product/inc/product.html)-->
                    </div>

                </li>



이 속성은 아래의 이미지를 참고하셔서 변경하실 수 있습니다.


  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A
  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

REVIEW

게시물이 없습니다

목록

후기 작성하기 모두보기

  • PRODUCT
  • COUPON
  • DETAIL
  • INFORMATION
  • WITH ITEM
  • REVIEW
  • Q & A

Q & A

게시물이 없습니다

목록

상품 문의하기 모두보기