모바일 쇼핑몰에서의 금액 표시 관련 디자인 적용 TIP
자세히 알아보기
'편집'을 클릭하여 표시되는 스마트디자인 편집창에서
'전체 화면 보기'의 아래와 같은 위치에 빨간색 소스는 삭제하고 파란색 소스를 추가하세요.
'상품상세 > 관련상품'에 '참조금액ㆍ할인판매가ㆍ판매가 취소선' 표시
1) 위치 : 상품(product) > 상품상세(detail.html)
## 상단생략 ##
<div module="product_relation">
<!--@css(/css/module/product/relation_swipe.css)-->
<!--
$count = 3
$swipe = no
$line = 1
$grid = 3
-->
<h2>관련상품</h2>
<ul class="grid3" module="product_relationlist">
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img_small}" alt="{$seo_alt_tag}" class="thumb" /></a></div>
<div class="information">
<p class="name"><a href="/product/detail.html{$param}">{$name}</a></p>
<p class="price {$product_sale_strike}">{$price_unit_head}{$product_price}{$price_unit_tail}</p>
<p class="price {$product_sale_strike}">{$disp_product_price}</p>
<p class="price {$sale_price_display|display}">{$disp_sale_price}</p>
</div>
</li>
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img_small}" alt="{$seo_alt_tag}" class="thumb" /></a></div>
<div class="information">
<p class="name"><a href="/product/detail.html{$param}">{$name}</a></p>
<p class="price {$product_sale_strike}">{$price_unit_head}{$product_price}{$price_unit_tail}</p>
<p class="price {$product_sale_strike}">{$disp_product_price}</p>
<p class="price {$sale_price_display|display}">{$disp_sale_price}</p>
</div>
</li>
</ul>
</div>
## 하단생략 ##
<div module="product_relation">
<!--@css(/css/module/product/relation_swipe.css)-->
<!--
$count = 3
$swipe = no
$line = 1
$grid = 3
-->
<h2>관련상품</h2>
<ul class="grid3" module="product_relationlist">
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img_small}" alt="{$seo_alt_tag}" class="thumb" /></a></div>
<div class="information">
<p class="name"><a href="/product/detail.html{$param}">{$name}</a></p>
<p class="price {$product_sale_strike}">{$price_unit_head}{$product_price}{$price_unit_tail}</p>
<p class="price {$product_sale_strike}">{$disp_product_price}</p>
<p class="price {$sale_price_display|display}">{$disp_sale_price}</p>
</div>
</li>
<li class="item">
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img_small}" alt="{$seo_alt_tag}" class="thumb" /></a></div>
<div class="information">
<p class="name"><a href="/product/detail.html{$param}">{$name}</a></p>
<p class="price {$product_sale_strike}">{$price_unit_head}{$product_price}{$price_unit_tail}</p>
<p class="price {$product_sale_strike}">{$disp_product_price}</p>
<p class="price {$sale_price_display|display}">{$disp_sale_price}</p>
</div>
</li>
</ul>
</div>
## 하단생략 ##
2) 위치 : css > 모듈(module) > 상품(product) > relation_swipe.css
## 상단생략 ##
.xans-product-relation .strike { font-weight:normal; text-decoration:line-through; }
.xans-product-relation .strike { font-weight:normal; text-decoration:line-through; }
'최근 본 상품'에 '할인판매가ㆍ판매가 취소선' 표시
1) 위치 : 마이쇼핑(myshop) > 최근본상품(recent_list.html)
## 상단생략 ##
<ul module="product_listitem">
<li>
<div class="description">
<p class="prdImg">
<a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" width="72" height="72" class="thumb"></a>
<span class="wishIcon">{$list_wish_icon}</span>
</p>
<strong class="prdName"><a href="/product/detail.html{$param}">{$product_name}</a></strong>
<ul module="product_setproduct" class="item">
<li>{$product_name}</li>
<li>{$product_name}</li>
</ul>
<p class="price">{$price}</p>
<p class="{$strike_custom_price} {$custom_price_display|display}"><strong>{$product_custom}</strong></p>
<p class="price {$discount}"><strong>{$price}</strong></p>
<p class="{$product_sale_price_display|display}">{$product_sale_price}</p>
</div>
## 하단생략 ##
<ul module="product_listitem">
<li>
<div class="description">
<p class="prdImg">
<a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" width="72" height="72" class="thumb"></a>
<span class="wishIcon">{$list_wish_icon}</span>
</p>
<strong class="prdName"><a href="/product/detail.html{$param}">{$product_name}</a></strong>
<ul module="product_setproduct" class="item">
<li>{$product_name}</li>
<li>{$product_name}</li>
</ul>
<p class="price">{$price}</p>
<p class="{$strike_custom_price} {$custom_price_display|display}"><strong>{$product_custom}</strong></p>
<p class="price {$discount}"><strong>{$price}</strong></p>
<p class="{$product_sale_price_display|display}">{$product_sale_price}</p>
</div>
## 하단생략 ##
2) 위치 : css > 모듈(module) > 상품(product) > relation_swipe.css
## 상단생략 ##
.xans-product-recentlist .strike { text-decoration:line-through; }
.xans-product-recentlist .strike strong { font-weight:normal; }
.xans-product-recentlist .strike { text-decoration:line-through; }
.xans-product-recentlist .strike strong { font-weight:normal; }
'관심 상품'에 '할인판매가ㆍ판매가 취소선' 표시
1) 위치 : 마이쇼핑(myshop) > 나의 관심상품(wish_list.html)
## 상단생략 ##
<div module="myshop_wishlistitem">
<div class="prdInfo">
{$checkbox}
<div class="description">
## 중단생략 ##
<li class="price">
<strong class="{$discount}" title="판매가">{$product_price}</strong><span class="{$product_price_display|display}">({$product_price_ref})</span>
<strong class="{$discount}" title="판매가">{$product_price}</strong>
<strong class="{$product_sale_price_display|display}" title="할인판매가">{$product_sale_price}</strong>
</li>
## 하단생략 ##
<div module="myshop_wishlistitem">
<div class="prdInfo">
{$checkbox}
<div class="description">
## 중단생략 ##
<li class="price">
<strong class="{$discount}" title="판매가">{$product_price}</strong><span class="{$product_price_display|display}">({$product_price_ref})</span>
<strong class="{$discount}" title="판매가">{$product_price}</strong>
<strong class="{$product_sale_price_display|display}" title="할인판매가">{$product_sale_price}</strong>
</li>
## 하단생략 ##
2) 위치 : css > 모듈(module) > 마이쇼핑(myshop) > wishlist.css
## 상단생략 ##
.xans-myshop-wishlist .description .info .price .strike { font-weight:normal; text-decoration:line-through; }
.xans-myshop-wishlist .description .info .price .strike { font-weight:normal; text-decoration:line-through; }
'담긴 상품 확인창'에 '할인판매가ㆍ판매가 취소선' 표시
1) 위치 : 상품(product) > add_basket2.html
<style type="text/css">
## 중단생략 ##
.xans-order-layerbasket .price { color:#434447; font-weight:bold; }
.xans-order-layerbasket .price strong { color:#ff6600; font-family:verdana; font-size:12px; }
.xans-order-layerbasket .strike { text-decoration:line-through; }
.xans-order-layerbasket .strike strong { font-weight:normal; }
.xans-order-layerbasket .grid4 li { width:25%; }
</style>
<div module="Order_LayerBasket" class="ec-base-layer typeModal">
<h1>장바구니 담기 (총 {$item_total}개)</h1>
<div class="wrap">
<ul class="grid4" module="Order_list">
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></div>
<div class="information">
<p class="name">{$product_name_link}{$icon}</p>
<p class="option">{$option_str}</p>
<p class="price {$product_price_strike}">{$purchase_price}</p>
<p class="{$product_price_strike} {$purchase_price_ref_display|display}"><strong>{$purchase_price_ref}</strong></p>
<p class="{$discount_price_display|display}"><strong class="txtWarn">-{$discount_price}</strong></p>
<p class="{$discount_price_ref_display|display}"><strong class="txtWarn">{$discount_price_ref}</strong></p>
<p class="amount">수량 : {$quantity}</p>
<p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
</div>
</li>
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></div>
<div class="information">
<p class="name">{$product_name_link}{$icon}</p>
<p class="option">{$option_str}</p>
<p class="price {$product_price_strike}">{$purchase_price}</p>
<p class="{$product_price_strike} {$purchase_price_ref_display|display}"><strong>{$purchase_price_ref}</strong></p>
<p class="{$discount_price_display|display}"><strong class="txtWarn">-{$discount_price}</strong></p>
<p class="{$discount_price_ref_display|display}"><strong class="txtWarn">{$discount_price_ref}</strong></p>
<p class="amount">수량 : {$quantity}</p>
<p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
</div>
</li>
</ul>
## 하단생략 ##
## 중단생략 ##
.xans-order-layerbasket .price { color:#434447; font-weight:bold; }
.xans-order-layerbasket .price strong { color:#ff6600; font-family:verdana; font-size:12px; }
.xans-order-layerbasket .strike { text-decoration:line-through; }
.xans-order-layerbasket .strike strong { font-weight:normal; }
.xans-order-layerbasket .grid4 li { width:25%; }
</style>
<div module="Order_LayerBasket" class="ec-base-layer typeModal">
<h1>장바구니 담기 (총 {$item_total}개)</h1>
<div class="wrap">
<ul class="grid4" module="Order_list">
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></div>
<div class="information">
<p class="name">{$product_name_link}{$icon}</p>
<p class="option">{$option_str}</p>
<p class="price {$product_price_strike}">{$purchase_price}</p>
<p class="{$product_price_strike} {$purchase_price_ref_display|display}"><strong>{$purchase_price_ref}</strong></p>
<p class="{$discount_price_display|display}"><strong class="txtWarn">-{$discount_price}</strong></p>
<p class="{$discount_price_ref_display|display}"><strong class="txtWarn">{$discount_price_ref}</strong></p>
<p class="amount">수량 : {$quantity}</p>
<p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
</div>
</li>
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='//img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></div>
<div class="information">
<p class="name">{$product_name_link}{$icon}</p>
<p class="option">{$option_str}</p>
<p class="price {$product_price_strike}">{$purchase_price}</p>
<p class="{$product_price_strike} {$purchase_price_ref_display|display}"><strong>{$purchase_price_ref}</strong></p>
<p class="{$discount_price_display|display}"><strong class="txtWarn">-{$discount_price}</strong></p>
<p class="{$discount_price_ref_display|display}"><strong class="txtWarn">{$discount_price_ref}</strong></p>
<p class="amount">수량 : {$quantity}</p>
<p class="option {$subscription_show_display|display}"><strong>배송주기</strong> <span class="txtEm">{$subscription_option_str}</span></p>
</div>
</li>
</ul>
## 하단생략 ##
'슬라이드 목록'에 '할인판매가ㆍ판매가 취소선' 표시
1) 위치 : 상품(product) > add_basket2.html
## 상단생략 ##
<div class="zoomList">
<div class="inner">
## 중단생략 ##
<div class="information">
<p class="name"><a href="#none"><!-- 상품명 --></a></p>
<p class="price"><a href="#none"><span class="price_value"></span> <span class="price_ref"></span></a></p>
<p class="{$class_price}"><a href="#none"><span class="{$class_price_value}"></span> <span class="{$class_price_ref}"></span></a></p>
<p class="{$class_sale_price} price"><a href="#none"><span class="{$class_sale_value}"></span></a></p>
<p class="detail"><a href="#none" class="btnStrong">상세보기</a></p>
</div>
</div>
## 하단생략 ##
<div class="zoomList">
<div class="inner">
## 중단생략 ##
<div class="information">
<p class="name"><a href="#none"><!-- 상품명 --></a></p>
<p class="price"><a href="#none"><span class="price_value"></span> <span class="price_ref"></span></a></p>
<p class="{$class_price}"><a href="#none"><span class="{$class_price_value}"></span> <span class="{$class_price_ref}"></span></a></p>
<p class="{$class_sale_price} price"><a href="#none"><span class="{$class_sale_value}"></span></a></p>
<p class="detail"><a href="#none" class="btnStrong">상세보기</a></p>
</div>
</div>
## 하단생략 ##
2) 위치 : css > 모듈(module) > 상품(product) > listnormal_zoom.css
## 상단생략 ##
.xans-product-listnormal.typeZoom .zoomList { position:absolute; top:0; right:0; bottom:65px; left:0; }
.xans-product-listnormal.typeZoom .zoomList { position:absolute; top:0; right:0; bottom:0; left:0; }
.xans-product-listnormal.typeZoom .zoomList .inner { position:relative; height:100%; }
.xans-product-listnormal.typeZoom .zoomList ul { position:relative; height:100%; }
.xans-product-listnormal.typeZoom .zoomList ul:after { content:""; display:block; clear:both; }
.xans-product-listnormal.typeZoom .zoomList li { position:relative; float:left; width:100%; height:100%; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail { display:table; width:100%; height:100%; table-layout:fixed; text-align:center; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail span { display:table-cell; vertical-align:middle; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail img { max-width:100%; max-height:100%; width:auto; }
.xans-product-listnormal.typeZoom .zoomList .information { position:absolute; left:0; bottom:-65px; overflow:hidden; width:100%; height:63px; border-top:1px solid rgba(206,206,206,0.8); font-size:15px; font-weight:bold; background:rgba(227,227,227,0.8); }
.xans-product-listnormal.typeZoom .zoomList .information { overflow:hidden; position:absolute; left:0; bottom:0; padding:10px 14px; width:100%; border-top:1px solid rgba(206,206,206,0.8); font-size:15px; font-weight:bold; background:rgba(227,227,227,0.8); box-sizing:border-box; }
.xans-product-listnormal.typeZoom .zoomList .information .name { overflow:hidden; height:20px; margin:12px 110px 0 14px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .name,
.xans-product-listnormal.typeZoom .zoomList .information .price { margin:0 110px 3px 0; }
.xans-product-listnormal.typeZoom .zoomList .information .name { overflow:hidden; height:20px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .name a { display:inline-block; width:100%; color:#1b1b1b; font-weight:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xans-product-listnormal.typeZoom .zoomList .information .price { margin:2px 110px 0 14px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .price { word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .price a { color:#508bed; }
.xans-product-listnormal.typeZoom .zoomList .information .price .strike { color:#000; font-weight:normal; text-decoration:line-through; }
.xans-product-listnormal.typeZoom .zoomList .information .detail { position:absolute; right:14px; top:15px; }
## 하단생략 ##
.xans-product-listnormal.typeZoom .zoomList { position:absolute; top:0; right:0; bottom:65px; left:0; }
.xans-product-listnormal.typeZoom .zoomList { position:absolute; top:0; right:0; bottom:0; left:0; }
.xans-product-listnormal.typeZoom .zoomList .inner { position:relative; height:100%; }
.xans-product-listnormal.typeZoom .zoomList ul { position:relative; height:100%; }
.xans-product-listnormal.typeZoom .zoomList ul:after { content:""; display:block; clear:both; }
.xans-product-listnormal.typeZoom .zoomList li { position:relative; float:left; width:100%; height:100%; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail { display:table; width:100%; height:100%; table-layout:fixed; text-align:center; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail span { display:table-cell; vertical-align:middle; }
.xans-product-listnormal.typeZoom .zoomList li .thumbnail img { max-width:100%; max-height:100%; width:auto; }
.xans-product-listnormal.typeZoom .zoomList .information { position:absolute; left:0; bottom:-65px; overflow:hidden; width:100%; height:63px; border-top:1px solid rgba(206,206,206,0.8); font-size:15px; font-weight:bold; background:rgba(227,227,227,0.8); }
.xans-product-listnormal.typeZoom .zoomList .information { overflow:hidden; position:absolute; left:0; bottom:0; padding:10px 14px; width:100%; border-top:1px solid rgba(206,206,206,0.8); font-size:15px; font-weight:bold; background:rgba(227,227,227,0.8); box-sizing:border-box; }
.xans-product-listnormal.typeZoom .zoomList .information .name { overflow:hidden; height:20px; margin:12px 110px 0 14px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .name,
.xans-product-listnormal.typeZoom .zoomList .information .price { margin:0 110px 3px 0; }
.xans-product-listnormal.typeZoom .zoomList .information .name { overflow:hidden; height:20px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .name a { display:inline-block; width:100%; color:#1b1b1b; font-weight:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xans-product-listnormal.typeZoom .zoomList .information .price { margin:2px 110px 0 14px; word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .price { word-wrap:break-word; }
.xans-product-listnormal.typeZoom .zoomList .information .price a { color:#508bed; }
.xans-product-listnormal.typeZoom .zoomList .information .price .strike { color:#000; font-weight:normal; text-decoration:line-through; }
.xans-product-listnormal.typeZoom .zoomList .information .detail { position:absolute; right:14px; top:15px; }
## 하단생략 ##