무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 상품관련

상품 상세 공통정보 관리 작업방법

글번호 : 993

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=993
상품 상세 공통정보 관리 기능이란? 상품 상세에 공통으로 노출 시켜야 하는 정보나, 이벤트 배너를 올리실 수 있는 기능입니다. << 기능 설정 >> 개별디자인 > 디자인 부가 설정 > 상품 상세 공통정보 관리에서 사용 설정 후, 공통정보를 올리시면 노출됩니다.
[ PC버전 ] 1. 작업위치 상품 관련 > 상품 상세 페이지 > 기본 상세 페이지 2. 가상태그 - 이벤트 공통정보 태그 : <!--/loop_product_common_info_event /--> - 이벤트 공통정보 이미지 : <!--/product_common_info_event@image/--> - 이벤트 공통정보 이미지_링크: <!--/product_common_info_event@link_image /--> - 이벤트 공통정보 이미지_링크 옵션 : <!--/product_common_info_event@target_image/--> - 이벤트 공통정보 HTML : <!--/product_common_info_event@html/--> - 이벤트 상품상세 개별 공통정보 : <!--/product_common_info_event_product_html/--> - 일반 공통정보 태그 : <!--/loop_product_common_info/--> - 일반 공통정보 텍스트_공급관련 정보 : <!--/product_common_info@provider/--> - 일반 공통정보 텍스트_청약철회 및 계약해제 : <!--/product_common_info@revocation/--> - 일반 공통정보 텍스트_교환/반품/보증 조건과 절차 : <!--/product_common_info@refund/--> - 일반 공통정보 텍스트_분쟁처리 사항 : <!--/product_common_info@conflict/--> - 일반 공통정보 텍스트_거래약관 : <!--/product_common_info@business/--> - 일반 공통정보 이미지 : <!--/product_common_info@image/--> - 일반 공통정보 이미지_링크 : <!--/product_common_info@link_image/--> - 일반 공통정보 이미지_링크 옵션 : <!--/product_common_info@target_image/--> - 일반 공통정보 HTML : <!--/product_common_info@html/--> - 상품상세 개별 공통정보 : <!--/product_common_info_product_html/--> 3. 디자인 편집탭 - 이벤트 공통정보 - 추천 위치 1) 베이직심플 <!--/if_btn_app/--> <!--/btn_app/--> <!--/end_if/--> <!--/if_okcashbag_set/--> <!--/okcashbag_set/--> <!--/end_if/--> </div> </div><!-- .info --> <!--/end_form/--> </div><!-- .thumb-info --> 하단에 아래 소스를 추가해주세요. 2) 모던심플 <!-- 파워리뷰 간편형--> <!--/if_power_review_score/--> <div class="power-review-score"><!--/power_review_score/--></div> <!--/end_if/--> 하단에 아래 소스를 추가해주세요. - 소스

<!--/if_product_common_info_event/--> <div class="detail-common-info-event"> <!--/loop_product_common_info_event/--> <!--/if_product_common_info_event@image/--> <div> <a href="<!--/product_common_info_event@link_image/-->" target="<!--/product_common_info_event@target_image/-->"> <img src="<!--/product_common_info_event@image/-->" align="absmiddle" border="0" /> </a> </div> <!--/end_if/--> <!--/if_product_common_info_event@html/--> <div> <!--/product_common_info_event@html/--> </div> <!--/end_if/--> <!--/end_loop/--> </div> <!--/end_if/--> <!--/if_product_common_info_event_product_html/--> <div class="detail-common-info-event"> <!--/product_common_info_event_product_html/--> </div> <!--/end_if/-->

4. 디자인 편집탭 - 일반 공통정보 - 추천 위치(베이직심플,모던심플 공통) : <!--/if_malltb/--> <!--/malltb/--> <!--/end_if/--> 하단에 아래 소스를 추가해주세요. - 소스

<!--/if_product_common_info/--> <div class="detail-common-info"> <!--/loop_product_common_info/--> <!--/if_product_common_info@provider/--> <dl> <dt>공급관련 정보</dt> <dd><!--/product_common_info@provider/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@revocation/--> <dl> <dt>청약철회 및 계약해제</dt> <dd><!--/product_common_info@revocation/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@refund/--> <dl> <dt>교환/반품/보증 조건과 절차</dt> <dd><!--/product_common_info@refund/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@conflict/--> <dl> <dt>분쟁처리 사항</dt> <dd><!--/product_common_info@conflict/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@business/--> <dl> <dt>거래약관</dt> <dd><!--/product_common_info@business/--></dd> <dl> <!--/end_if/--> <!--/if_product_common_info@image/--> <div> <a href="<!--/product_common_info@link_image/-->" target="<!--/product_common_info@target_image/-->"> <img src="<!--/product_common_info@image/-->" align="absmiddle" border="0" /> </a> </div> <!--/end_if/--> <!--/if_product_common_info@html/--> <div> <!--/product_common_info@html/--> </div> <!--/end_if/--> <!--/end_loop/--> </div> <!--/end_if/--> <!--/if_product_common_info_product_html/--> <div class="detail-common-info"> <!--/product_common_info_product_html/--> </div> <!--/end_if/-->

5. CSS탭 - 이벤트 공통정보

/* 상품 상세 이벤트 공통 정보 */ #productDetail .detail-common-info-event { width:100%; padding-top:20px; word-break: break-all; } #productDetail .detail-common-info-event img {max-width: 100%; } #productDetail .detail-common-info-event div {margin-top:15px; }

6. CSS탭 - 일반 공통정보

/* 상품 상세 일반 공통 정보 */ #productDetail .detail-common-info { width:100%; padding-bottom:20px; word-break: break-all; } #productDetail .detail-common-info dl { padding-top:20px; font-size:12px; font-weight:normal; letter-spacing:-0.5px; } #productDetail .detail-common-info dl dt { padding-bottom:10px; color:#444; font-weight:bold; } #productDetail .detail-common-info dl dd { padding-left:10px; color:#777; line-height:20px; } #productDetail .detail-common-info div {margin-top:15px; }

[ 모바일 4.0 ] 1. 작업위치 상품 관련 > 상품 상세 페이지 > 기본 상세 페이지 2. 가상태그 - 이벤트 공통정보 태그 : <!--/loop_product_common_info_event /--> - 이벤트 공통정보 이미지 : <!--/product_common_info_event@image/--> - 이벤트 공통정보 이미지_링크: <!--/product_common_info_event@link_image /--> - 이벤트 공통정보 이미지_링크 옵션 : <!--/product_common_info_event@target_image/--> - 이벤트 공통정보 HTML : <!--/product_common_info_event@html/--> - 이벤트 상품상세 개별 공통정보 : <!--/product_common_info_event_product_html/--> - 일반 공통정보 태그 : <!--/loop_product_common_info/--> - 일반 공통정보 텍스트_공급관련 정보 : <!--/product_common_info@provider/--> - 일반 공통정보 텍스트_청약철회 및 계약해제 : <!--/product_common_info@revocation/--> - 일반 공통정보 텍스트_교환/반품/보증 조건과 절차 : <!--/product_common_info@refund/--> - 일반 공통정보 텍스트_분쟁처리 사항 : <!--/product_common_info@conflict/--> - 일반 공통정보 텍스트_거래약관 : <!--/product_common_info@business/--> - 일반 공통정보 이미지 : <!--/product_common_info@image/--> - 일반 공통정보 이미지_링크 : <!--/product_common_info@link_image/--> - 일반 공통정보 이미지_링크 옵션 : <!--/product_common_info@target_image/--> - 일반 공통정보 HTML : <!--/product_common_info@html/--> - 상품상세 개별 공통정보 : <!--/product_common_info_product_html/--> 3. 디자인 편집탭 - 이벤트 공통정보 - 추천 위치 : <!-- 파워리뷰 간편형--> <!--/if_power_review_score/--> <section class="powerReviewScore"><!--/power_review_score/--></section> <!--/end_if/--> 하단에 아래 소스를 추가해주세요. - 소스

<!--/if_product_common_info_event/--> <section class="shopdetailCommoninfoEvent"> <div class="detail-common-info-event"> <!--/loop_product_common_info_event/--> <!--/if_product_common_info_event@image/--> <div> <a href="<!--/product_common_info_event@link_image/-->" target="<!--/product_common_info_event@target_image/-->"> <img src="<!--/product_common_info_event@image/-->" align="absmiddle" border="0" /> </a> </div> <!--/end_if/--> <!--/if_product_common_info_event@html/--> <div> <!--/product_common_info_event@html/--> </div> <!--/end_if/--> <!--/end_loop/--> </div> </section> <!--/end_if/--> <!--/if_product_common_info_event_product_html/--> <div class="detail-common-info-event"> <!--/product_common_info_event_product_html/--> </div> <!--/end_if/-->

4. 디자인 편집탭 - 일반 공통정보 - 추천 위치 : <!--/if_product_info/--> <section class="shopdetailNotify"> <h3 class="btn_toggle">상품 고시 정보 <span class="fa fa-caret-down"></span></h3> <div class="shopdetailNotifyInfo" style="display:none;"> <dl> <!--/loop_product_info/--> <dt>ㆍ<!--/product_info@title/--></dt> <dd><!--/product_info@content/--></dd> <!--/end_loop/--> </dl> </div> </section> <!--/end_if/--> 하단에 아래 소스를 추가해주세요. - 소스

<!--/if_product_common_info/--> <section class="shopdetailCommoninfo"> <h3 class="btn_toggle">교환/반품/환불/취소 <span class="fa fa-caret-down"></span></h3> <div style="display:none;"> <div class="detail-common-info"> <!--/loop_product_common_info/--> <!--/if_product_common_info@provider/--> <dl> <dt>공급관련 정보</dt> <dd><!--/product_common_info@provider/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@revocation/--> <dl> <dt>청약철회 및 계약해제</dt> <dd><!--/product_common_info@revocation/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@refund/--> <dl> <dt>교환/반품/보증 조건과 절차</dt> <dd><!--/product_common_info@refund/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@conflict/--> <dl> <dt>분쟁처리 사항</dt> <dd><!--/product_common_info@conflict/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@business/--> <dl> <dt>거래약관</dt> <dd><!--/product_common_info@business/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@image/--> <div> <a href="<!--/product_common_info@link_image/-->" target="<!--/product_common_info@target_image/-->"> <img src="<!--/product_common_info@image/-->" align="absmiddle" border="0" /> </a> </div> <!--/end_if/--> <!--/if_product_common_info@html/--> <div> <!--/product_common_info@html/--> </div> <!--/end_if/--> <!--/end_loop/--> </div> </div> </section> <!--/end_if/--> <!--/if_product_common_info_product_html/--> <section class="shopdetailCommoninfo"> <h3 class="btn_toggle">교환/반품/환불/취소 <span class="fa fa-caret-down"></span></h3> <div style="display:none;"> <div class="detail-common-info"> <!--/product_common_info_product_html/--> </div> </div> </section> <!--/end_if/-->

5. CSS탭 - 이벤트 공통정보

/* 상품 상세 이벤트 공통 정보 */ .detail-common-info-event { padding:0 0 20px; word-break: break-all; } .detail-common-info-event img {max-width: 100%;} .detail-common-info-event div {margin-top:10px; }

6. CSS탭 - 일반 공통정보

/* 상품 상세 일반 공통 정보 */ .detail-common-info { padding:0 15px 20px; word-break: break-all; } .detail-common-info img {max-width: 100%;} .detail-common-info dl { padding-top:20px; font-size:inherit; font-weight:normal; letter-spacing:-0.5px; } .detail-common-info dl dt { padding-bottom:10px; color:#444; font-weight:bold; } .detail-common-info dl dd { padding-left:10px; color:#777; line-height:20px; }

[ 모바일 2.0 ] 1. 작업위치 상품 관련 >상품 상세 페이지 >기본 상세 페이지 2. 가상태그 - 이벤트 공통정보 태그 : <!--/loop_product_common_info_event /--> - 이벤트 공통정보 이미지 : <!--/product_common_info_event@image/--> - 이벤트 공통정보 이미지_링크: <!--/product_common_info_event@link_image /--> - 이벤트 공통정보 이미지_링크 옵션 : <!--/product_common_info_event@target_image/--> - 이벤트 공통정보 HTML : <!--/product_common_info_event@html/--> - 이벤트 상품상세 개별 공통정보 : <!--/product_common_info_event_product_html/--> - 일반 공통정보 태그 : <!--/loop_product_common_info/--> - 일반 공통정보 텍스트_공급관련 정보 : <!--/product_common_info@provider/--> - 일반 공통정보 텍스트_청약철회 및 계약해제 : <!--/product_common_info@revocation/--> - 일반 공통정보 텍스트_교환/반품/보증 조건과 절차 : <!--/product_common_info@refund/--> - 일반 공통정보 텍스트_분쟁처리 사항 : <!--/product_common_info@conflict/--> - 일반 공통정보 텍스트_거래약관 : <!--/product_common_info@business/--> - 일반 공통정보 이미지 : <!--/product_common_info@image/--> - 일반 공통정보 이미지_링크 : <!--/product_common_info@link_image/--> - 일반 공통정보 이미지_링크 옵션 : <!--/product_common_info@target_image/--> - 일반 공통정보 HTML : <!--/product_common_info@html/--> - 상품상세 개별 공통정보 : <!--/product_common_info_product_html/--> 3. 디자인 편집탭 - 이벤트 공통정보 - 추천 위치 : <div class="btns"> <!--<a href="#" class="checkout btn-type-01 box-shadow-01"><span>Checkout</span></a>--> <!--/if_link_scrap_fb/--><a href="<!--/link_scrap_fb/-->" class=""><img src="/images/d3/m_01/btn/product_facebook@2x.gif" alt="페이스북" width="23.5" height="23.5" /></a><!--/end_if/--> <!--/if_link_scrap_tw/--><a href="<!--/link_scrap_tw/-->" class=""><img src="/images/d3/m_01/btn/product_twitter@2x.gif" alt="트위터" width="23.5" height="23.5" /></a><!--/end_if/--> <!--/if_link_scrap_ka/--><a href="<!--/link_scrap_ka/-->" ><img src="/images/common/scrap_btn_KA.gif" alt="카카오톡" width="23.5" height="23.5" /></a><!--/end_if/--> <!--/if_link_scrap_ks/--><a href="<!--/link_scrap_ks/-->" ><img src="/images/common/scrap_btn_KS.gif" alt="카카오스토리" width="23.5" height="23.5" /></a><!--/end_if/--> </div> 하단에 아래 소스를 추가해주세요. - 소스

<!--/if_product_common_info_event/--> <div class="detail-common-info-event"> <!--/loop_product_common_info_event/--> <!--/if_product_common_info_event@image/--> <div> <a href="<!--/product_common_info_event@link_image/-->" target="<!--/product_common_info_event@target_image/-->"> <img src="<!--/product_common_info_event@image/-->" align="absmiddle" border="0" /> </a> </div> <!--/end_if/--> <!--/if_product_common_info_event@html/--> <div> <!--/product_common_info_event@html/--> </div> <!--/end_if/--> <!--/end_loop/--> </div> <!--/end_if/--> <!--/if_product_common_info_event_product_html/--> <div class="detail-common-info-event"> <!--/product_common_info_event_product_html/--> </div> <!--/end_if/-->

4. 디자인 편집탭 - 일반 공통정보 - 추천 위치 : <!--/if_link_review_board_more/--> <li class="review-board"> <a href="<!--/link_review_board_more/-->"><h3>리뷰보드 <span>[<!--/number/review_board_total_count/-->]</span></h3></a> <div class="toggle-btn"> <a href="#" class="blank">열기</a> </div> </li> <!--/end_if/--> 하단에 아래 소스를 추가해주세요. - 소스

<!--/if_product_common_info/--> <li class="commoninfo"> <h3 class="toggle">교환/반품/환불/취소</h3> <div class="conts" data-open="off"> <div class="detail-common-info"> <!--/loop_product_common_info/--> <!--/if_product_common_info@provider/--> <dl> <dt>공급관련 정보</dt> <dd><!--/product_common_info@provider/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@revocation/--> <dl> <dt>청약철회 및 계약해제</dt> <dd><!--/product_common_info@revocation/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@refund/--> <dl> <dt>교환/반품/보증 조건과 절차</dt> <dd><!--/product_common_info@refund/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@conflict/--> <dl> <dt>분쟁처리 사항</dt> <dd><!--/product_common_info@conflict/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@business/--> <dl> <dt>거래약관</dt> <dd><!--/product_common_info@business/--></dd> </dl> <!--/end_if/--> <!--/if_product_common_info@image/--> <div> <a href="<!--/product_common_info@link_image/-->" target="<!--/product_common_info@target_image/-->"> <img src="<!--/product_common_info@image/-->" align="absmiddle" border="0" /> </a> </div> <!--/end_if/--> <!--/if_product_common_info@html/--> <div> <!--/product_common_info@html/--> </div> <!--/end_if/--> <!--/end_loop/--> </div> </div> <div class="toggle-btn"> <a href="#">열기/닫기</a> </div> </li> <!--/end_if/--> <!--/if_product_common_info_product_html/--> <li class="commoninfo"> <h3 class="toggle">교환/반품/환불/취소</h3> <div class="conts" data-open="off"> <div class="detail-common-info"> <!--/product_common_info_product_html/--> </div> </div> <div class="toggle-btn"> <a href="#">열기/닫기</a> </div> </li> <!--/end_if/-->

5. CSS 편집탭 - 이벤트 공통정보

/* 상품 상세 이벤트 공통 정보 */ .detail-common-info-event { width:90.3125%; margin:10px auto; word-break: break-all; } .detail-common-info-event img {max-width: 100%;} .detail-common-info-event div {margin-top:10px; }

6. CSS 편집탭 - 일반 공통정보

/* 상품 상세 일반 공통 정보 */ .detail-common-info { padding:0 10px 20px; border-bottom:1px solid #aeaeae; word-break: break-all; } .detail-common-info img {max-width: 100%;} .detail-common-info dl { padding-top:20px; font-size:inherit; font-weight:normal; letter-spacing:-0.5px; } .detail-common-info dl dt { padding-bottom:10px; color:#444; font-weight:bold; } .detail-common-info dl dd { padding-left:10px; color:#777; line-height:20px; } .detail-common-info div {margin-top:10px; }

<< 적용예시 >>
목록 1:1 문의