該当ページにデザインソースを追加してください。詳細内容は、以下をご参考ください。
共通追加事項
- 管理画面の「Mobileデザイン」へ移動、左上にある「デザイン編集」ボタンをクリックします。
- クリックすると開く「スマートデザイン編集ウィンドウ」の左下にある検索バーに「ec-base-product.css」と検索し、該当ファイルを開きます。
- 以下を参考し、青字のソースを追加後、ウィンドウの上部にある「保存」ボタンをクリックします。
.ec-base-product .description { min-height:10px; margin:0 7px; line-height:1em; text-align:left; }
.ec-base-product .description .name { line-height:1.3em; word-wrap:break-word; margin:0 0 7px; }
.ec-base-product .description .name a { font-size:13px; color:#1b1b1b; }
.ec-base-product .description .icon { margin:0 0 7px; }
.ec-base-product .description .icon img { margin:0 4px 0 0; }
.ec-base-product .description .icon .icon_img { margin:0 0 2px; }
.ec-base-product .description .price { font-size:12px; margin:0 0 7px; }
.ec-base-product .description .strike,
.ec-base-product .description .mPriceStrike { text-decoration:line-through; }
.ec-base-product .description .mileage { display:inline-block; }
.ec-base-product .description li.cart { margin:0 0 7px; }
.ec-base-product .description .color { overflow:hidden; margin:0; }
.ec-base-product .description .color .chips { float:left; width:12px; height:10px; margin:0 2px 2px 0; font-size:0; line-height:0; border:1px solid #e3e3e3; }
.ec-base-product .description .likeButton button { border:0; background:none; }
.ec-base-product .description .likeButton button strong { margin:0 0 0 3px; font-size:11px; line-height:20px; color:#757575; }
.ec-base-product .description .likeButton.selected button strong { line-height:20px; color:#2e2e2e; }
メインページにポイントを表示する
- 管理画面の「Mobileデザイン」へ移動、左上にある「デザイン編集」ボタンをクリックします。
- クリックすると開く「スマートデザイン編集ウィンドウ」の左下にある検索バーで「index.html」と検索し、該当ファイルを開きます。
- 以下、青字のソースを追加後、ウィンドウの上部にある「保存」ボタンをクリックします。
※「product_listmain_数字」単位ごとにソースを追加してください。
例) 「product_listmain_1~4」まである場合、各2箇所にソースを追加してください。合計8箇所にソースを追加することとなります。
<div class="ec-base-product typeThumb" module="product_listmain_1">
<!--
$count = 5
※ 表示する商品数を数字で設定することができ、設定しない場合、自動制限されます。(最大200点まで)
※ 表示する商品数が多い場合、ショップに負荷がかかる恐れがあります。
$moreview = yes
$cache = yes
-->
<h2>{$category_title_text}</h2>
<ul class="prdList grid3">
<li>
<div class="thumbnail">
<a href="{$link_product_detail}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
<span class="wish">{$list_wish_icon}</span>
</div>
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} r{$new_icon} {$recommend_icon} {$product_icons} {$pickup_icon}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price}<span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span><span id="span_product_price_text">{$product_tax_type_text}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display|display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="color {$colorchip_display|display}">
<div module="product_Colorchip">
<span class="chips" style="background-color:{$color};" {$color_image}></span>
<span class="chips" style="background-color:{$color};" {$color_image}></span>
</div>
</li>
<li class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></li>
</ul>
</div>
</li>
<li>
<div class="thumbnail">
<a href="{$link_product_detail}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
<span class="wish">{$list_wish_icon}</span>
</div>
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons} {$pickup_icon}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span><span id="span_product_price_text">{$product_tax_type_text}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="color {$colorchip_display|display}">
<div module="product_Colorchip">
<span class="chips" style="background-color:{$color};" {$color_image}></span>
<span class="chips" style="background-color:{$color};" {$color_image}></span>
</div>
</li>
<li class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></li>
</ul>
</div>
</li>
</ul>
</div>
<div module="product_listmore_2" class="paginate typeMoreview">
<a href="#none" onclick="{$more_action}">
もっと見る(<span id="more_current_page_{$display_group}">{$current_page}</span>/<span id="more_total_page_{$display_group}">{$total_page}</span>)
<span class="icoMore"></span>
</a>
</div>
キャンペーンページにポイントを表示
- 管理画面の「Mobileデザイン」へ移動、左上にある「デザイン編集」ボタンをクリックします。
- クリックすると開く「スマートデザイン編集ウィンドウ」の左下にある検索バーに「project.html」と検索し、該当ファイルを開きます。
- 以下を参考し、青字のソースを追加後、ウィンドウの上部にある「保存」ボタンをクリックします。
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price}<span id="span_product_tax_type_text">{$product_tax_type_text}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="summary {$summary_desc|display}">{$summary_desc}</li>
<li class="color {$colorchip_display|display}">
<div module="project_Colorchip">
<span class="chips" style="background-color:{$color};"></span>
<span class="chips" style="background-color:{$color};"></span>
</div>
</li>
##中略##
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price}<span id="span_product_tax_type_text">{$product_tax_type_text}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="summary {$summary_desc|display}">{$summary_desc}</li>
<li class="color {$colorchip_display|display}">
<div module="project_Colorchip">
<span class="chips" style="background-color:{$color};"></span>
<span class="chips" style="background-color:{$color};"></span>
</div>
</li>
商品検索ページにポイントを表示
- 管理画面の「Mobileデザイン」へ移動、左上にある「デザイン編集」ボタンをクリックします。
- クリックすると開く「スマートデザイン編集ウィンドウ」の左下にある検索バーに「product/search.html」と検索し、該当ファイルを開きます。
- 以下を参考し、青字のソースを追加後、ウィンドウの上部にある「保存」ボタンをクリックします。
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price}</li><span id="span_product_tax_type_text">{$product_tax_type_text}</span>
<li class="price sale {$product_sale_visible}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="summary {$summary_desc|display}">{$summary_desc}</li>
<li class="price {$product_promotion_display|display}">
<div class="discountPeriod {$product_promotion_display|display}">
<a href="#none" class="btnNormal">割引期間</a>
##中略##
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price}</li><span id="span_product_tax_type_text">{$product_tax_type_text}</span>
<li class="price sale {$product_sale_visible}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="summary {$summary_desc|display}">{$summary_desc}</li>
<li class="price {$product_promotion_display|display}">
<div class="discountPeriod {$product_promotion_display|display}">
<a href="#none" class="btnNormal">割引期間</a>
商品分類(サムネイル式)ページにポイントを表示
- 管理画面の「Mobileデザイン」へ移動、左上にある「デザイン編集」ボタンをクリックします。
- クリックすると開く「スマートデザイン編集ウィンドウ」の左下にある検索バーに「list_thumb.html」と検索し、該当ファイルを開きます。
- 以下を参考し、青字のソースを追加後、ウィンドウの上部にある「保存」ボタンをクリックします。
<div module="product_listrecommend" class="ec-base-product">
<!--@css(/css/module/product/listrecommend_swipe.css)-->
<!--
$count = 8
※ 表示する商品数を数字で設定することができ、設定しない場合、自動制限されます。(最大200点まで)
※ 表示する商品数が多い場合、ショップに負荷がかかる恐れがあります。
$line = 1
$grid = 2
$swipe = yes
-->
<h2>おすすめアイテム</h2>
<ul class="prdList grid2">
<li id="anchorBoxId_{$product_no}">
<div class="thumbnail">
<a href="{$link_product_detail}"><img src="{$image_medium}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
<span class="wish">{$list_wish_icon}</span>
</div>
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></li>
</ul>
</div>
</li>
<li id="anchorBoxId_{$product_no}">
<div class="thumbnail">
<a href="{$link_product_detail}"><img src="{$image_medium}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
<span class="wish">{$list_wish_icon}</span>
</div>
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</li>
<li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></li>
</ul>
</div>
</li>
</ul>
## 中略 ##
<div class="ec-base-product typeDesc" module="product_listnormal">
<!--@js(/js/module/product/listnormal.js)-->
<!--
$count = 10
※ 表示する商品数を数字で設定することができます。
※ 表示する商品数が多い場合、ショップに負荷がかかる恐れがあります。
$moreview = yes
$cache = yes
$basket_result = /product/add_basket.html
$basket_option = /product/basket_option.html
-->
<ul class="prdList">
<li>
<div class="thumbnail">
<a href="{$link_product_detail}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
<span class="wish">{$list_wish_icon}</span>
</div>
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$mileage_icon} {$pickup_icon} {$benefit_icons}</li>
<li class="price {$product_sale_strike}">{$disp_product_price}<span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="summary {$summary_desc|display}">{$summary_desc}</li>
<li class="color {$colorchip_display|display}">
<div module="product_Colorchip">
<span class="chips" style="background-color:{$color};" {$color_image}></span>
<span class="chips" style="background-color:{$color};" {$color_image}></span>
</div>
</li>
## 中略 ##
<div class="thumbnail">
<a href="{$link_product_detail}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
<span class="wish">{$list_wish_icon}</span>
</div>
<div class="description">
<strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
<ul class="spec">
<li class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</li>
<li class="price {$product_sale_strike}">{$disp_product_price}<span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></li>
<li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
<li class="mileage {$mileage_icon_display}">{$mileage_value}</li>
<li class="cart">{$basket_icon}</li>
<li class="summary {$summary_desc|display}">{$summary_desc}</li>
<li class="color {$colorchip_display|display}">
<div module="product_Colorchip">
<span class="chips" style="background-color:{$color};" {$color_image}></span>
<span class="chips" style="background-color:{$color};" {$color_image}></span>
</div>
</li>