モバイルキャンペーン、商品検索、商品分類(サムネイル式)ページにポイントの項目を表示したいです。 – Cafe24 Japan

該当ページにデザインソースを追加してください。詳細内容は、以下をご参考ください。

共通追加事項

管理画面の「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>

よくある質問

関連記事