스마트디자인 편집창에서 소스를 추가하여 간단하게 적용할 수 있습니다. |
상품상세페이지에 프로모션 배너 등 공통이미지를 넣고 싶은 경우,
상품마다 수정하지 않고, 스마트디자인편집창에서 소스를 추가하여 모든 페이지에 공통이미지를 추가할 수 있습니다.
스마트디자인 편집창에서 소스 추가하기
1. 우선, 공통으로 사용할 이미지를 FTP에 업로드합니다.
2. '디자인관리'에서 해당 스킨의 디자인편집창을 오픈합니다.
3. 디자인편집창에서 상품상세(/product/detail.html)페이를 열고, 공통이미지를 추가하고 싶은 영역을 찾고, 소스를 추가합니다.
예시1) 상단의 상품정보와 하단의 상세정보 사이에 공통 이미지를 추가하는 방법
<div module="coupon_productdetail">~</div> //상단 상품정보 끝
<div><img src="추가하려는 이미지 주소"></div> //상품상세페이지에 공통으로 적용하는 이미지
<div module="product_additional"> ~~~ </div> // 하단 상품상세이미지 시작하는 부분 |
예시2) 하단의 상세정보 중 탭 하단에 공통이미지를 추가하는 방법
<!-- 상품상세정보 --> <div id="prdDetail" class="ec-base-tab grid5"> <ul class="menu"> <li class="selected"><a href="#prdDetail">상품상세정보</a></li> <li><a href="#prdInfo">상품구매안내</a></li> <li><a href="#prdReview">상품사용후기</a></li> <li><a href="#prdQnA">상품Q&A</a></li> <li><a href="#prdRelated">관련상품</a></li> </ul> <div class="cont"> <h3>상품상세정보</h3> <div><img src="추가하려는 이미지 주소"></div> //상품상세페이지에 공통으로 적용하는 이미지 {$product_detail} |
Tip 1) 공통이미지는 주로 상품상세이미지 상단이나 하단에 추가를 하는데,
상품상세이미지 모듈명은 product_additional 로, 편집창에서 해당 모듈을 검색하면 편리합니다.
Tip 2) 이미지를 기준으로 여백이나 디자인을 제작하고 싶다면, img src를 감싸는 div에 class 를 지정해서 CSS 처리하면 됩니다.
4. 위 설명은 PC디자인 기준이며, 모바일쇼핑몰에 공통이미지를 추가하는 경우에도 동일하게
'모바일쇼핑몰 > 해당 스킨 디자인편집창' 에서 원하는 영역에 <div><img src="추가하려는 이미지 주소"></div> 소스를 추가하면 됩니다.
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]