Cafe24新着情報
[商品管理] [商品キュレーション] 商品カテゴリ画面にハッシュタグを基盤として商品表示される機能の追加およびデザインガイド(HTML/CSS)のご案内
2019-06-19
平素よりcafe24をご利用いただき、ありがとうございます。
この度、ショップの商品カテゴリ一覧にハッシュタグを基盤とした商品表示ができる機能が追加されましたのでご案内いたします。
詳細は以下をご参照ください。
■ アップデート内容
ハッシュタグを基盤としてショップの商品カテゴリ画面に商品を表示できる機能が追加されました。
(例 : 下位カテゴリに、商品キュレーションのハッシュタグを設定、項目に "#四季#春#夏#秋#冬"が設定されている場合、該当のハッシュタグ商品のみを集めて表示可能)
- 位置 : 商品管理 > 商品カテゴリ管理 > カテゴリ設定
- 位置(PCショップ) : PCデザイン > デザイン編集
- 位置(モバイルショップ) : Mobileデザイン > デザイン編集
1. カテゴリ設定 > カテゴリ情報にハッシュタグを登録
- 商品管理 > 商品カテゴリ管理 > カテゴリ設定の商品キュレーションハッシュタグ設定に、表示させたい商品のハッシュタグを登録します。
- 商品管理 > 商品カテゴリ管理 > カテゴリ設定の商品キュレーションハッシュタグ設定を「表示する」と設定します。
ハッシュタグ商品表示モジュールが追加されていても、「表示しない」と設定する場合、商品カテゴリにハッシュタグが表示されません。
▼ 商品カテゴリ情報の商品キュレーションハッシュタグ設定(例 : #四季、#春、#夏、#秋、#冬)
2. デザイン編集ウィンドウで商品カテゴリ(list.html)にハッシュタグ表示モジュールを追加
- デザインガイドに従って希望の位置に表示モジュールを追加します。
■ PCショップ - スマートデザイン
- 位置 : デザイン管理 > 商品(product) > 商品カテゴリ(list.html)
- ハッシュタグ商品を表示したい位置に以下のソースを追加します。
▼ 以下のようにソースを追加します。
| <div module="product_listhashtag" class="ec-base-product"> <!-- $count = 8 ※ 表示させる商品の数量を数字で設定し、設定しない場合は最大200件に自動設定されます。 ※ 商品表示数が多いと、ショップに負荷がかかる場合があります。 $basket_result = /product/add_basket.html $basket_option = /product/basket_option.html --> <div class="title"> <h2> <span>{$title}</span> </h2> </div> <ul class="prdList grid4"> <li id="anchorBoxId_{$product_no}"> <div class="thumbnail"> <div class="prdImg"> <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><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="icon"> <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div> <div class="button"> <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></div> <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon} </div> </div> </div> <div class="description"> <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong> <ul module="product_ListItem" class="spec"> <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li> <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li> </ul> </div> </li> <li id="anchorBoxId_{$product_no}"> <div class="thumbnail"> <div class="prdImg"> <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><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="icon"> <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div> <div class="button"> <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></div> <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon} </div> </div> </div> <div class="description"> <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong> <ul module="product_ListItem" class="spec"> <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li> <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li> </ul> </div> </li> </ul> </div> |
■ モバイルショップ
- 位置 : モバイルショップ > 商品(product) > リスト型(list.html)
ギャラリー型 (list_gallery.html)
サムネイル型 (list_thumb.html)
- ハッシュタグ商品を表示したい位置に以下のソースを追加します。
▼ 以下のようにソースを追加します。
| <div module="product_listhashtag" class="ec-base-product"> <!--@css(/css/module/product/listhashtag_swipe.css)--> <!-- $count = 9 ※ 表示させる商品の数量を数字で設定し、設定しない場合は最大200件に自動設定されます。 ※ 商品表示数が多いと、ショップに負荷がかかる場合があります。 $line = 1 $grid = 3 $swipe = yes --> <h2>{$title}</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} {$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="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="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> |
- 新規作成経路 : /css/module/product/listhashtag_swipe.css
| .xans-product-listhashtag.ec-base-product { margin:0; background-color:#ffffff; border-bottom:1px solid #d5d5d5; } .xans-product-listhashtag:first-child h2 { border-top:0; } .xans-product-listhashtag.ec-base-product h2 { margin:0; padding:14px 14px 0; font-size:14px; line-height:15px; color:#4a5164; background:none; } .xans-product-listhashtag.ec-base-product > .prdList { padding-top:14px; } .xans-product-listhashtag .paginate { margin:0 0 14px; background:#ffffff; } |
▼ ハッシュタグ表示モジュールを設定したショップ画面
■ 参考
- 設定されたハッシュタグ表示モジュールには、[商品管理 > 商品表示設定 > 商品情報項目設定 > (タブ)商品一覧 > おすすめアイテム]で設定された商品情報と同一の情報が表示されます。
- (TIP) デザインガイドモジュール名(product_listhashtag)にシーケンス番号を付け、希望のハッシュタグが設定された商品のみを表示することができます。
(例 : 商品キュレーションハッシュタグ設定で 「#四季、#春、#夏、,#秋、#冬」の順で設定し、モジュール名を「product_listhashtag_1」と設定すると、最初に登録された「#四季」ハッシュタグを持った商品のみ表示されます。)
- 商品キュレーションサービスは[商品管理 > 商品キュレーション > キュレーション設定]でお申し込みいただけます。
cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。
引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、0120-150-264または[お問い合わせ]まで、お気軽にお問い合わせください。