該当ページにデザインソースを追加してください。詳細内容は、以下をご参考ください。
共通追加事項
- 管理画面の「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>