Cafe24新着情報
[商品管理] [商品キュレーション] ショップのメイン画面にハッシュタグを基盤として商品表示される機能の追加およびデザインガイド(HTML/CSS)のご案内
2019-06-19
平素よりcafe24をご利用いただき、ありがとうございます。
この度、商品情報に登録されたハッシュタグを基盤としたショップのメイン画面に商品を表示できる機能が追加されましたのでご案内いたします。
詳細は以下をご参照ください。
■ アップデート内容
ハッシュタグを基盤にショップのメイン画面に商品を表示できるモジュールが追加されました。 (例: ハッシュタグ「今月の新商品」が設定された商品のみをメイン画面に表示可能)
- PCショップ設定方法: PCデザイン > デザイン編集
- モバイルショップ設定方法: Mbileデザイン > デザイン編集
1. 商品情報にハッシュタグを登録
ショップ運営者[商品登録/修正 > 基本設定 > ハッシュタグ設定]にハッシュタグを登録します。
▼ 商品情報にハッシュタグを設定(例: #ホットアイテム)
2. 表示させるハッシュタグ、表示商品数、表示方法を設定
提供される値を変更し、希望のハッシュタグ商品が表示されるように設定することができます。
▼ 設定の例(ハッシュタグ: ホットアイテム、表示商品数: 8件、表示順: 商品登録日降順)
▼ ハッシュタグ表示を設定したショップ画面
- 設定したハッシュタグ表示の商品情報は、ショップ管理画面[商品管理 > 商品表示設定 > 商品情報項目設定 > (タブ)メイン画面 > おすすめアイテム]で設定した商品情報の表示設定と同一の情報です。
3. デザインの設定
ハッシュタグ表示を使用するためにはデザインソースを追加する必要があります。
以下の案内を参考にして希望の位置にデザインを追加してから使用してください。
■ PCショップ
- 方法: 商品を表示させたい場所に以下のソースを追加します。 (推奨位置: index.html)
<div module="product_hashtaglist" class="ec-base-product"> <!--@css(/css/module/product/3390/hashtaglist.css)--> <!-- $hashtag = ベーシック、サンプル
※ ハッシュタグを入力すると該当のハッシュタグが含まれた商品が自動で表示されます。 $count = 8 ※ 表示させる商品の件数うぃ数字で設定でき、設定しない場合は最大200件まで自動的に制限されます。 ※ 商品表示数が多いと、ショップに負荷がかかる場合があります。 $basket_result = /product/add_basket.html $basket_option = /product/basket_option.html $orderby = RD ※ 表示方法は以下を参考に変更可能です。
RD = 商品登録日降順 RA = 商品登録日昇順 UD = 商品修正日降順 UA = 商品修正日昇順 PD = 販売価格降順 PA = 販売価格昇順 SD = 販売数降順 SA = 販売数昇順 CD = 照会数降順 CA = 照会数昇順 LD = いいね数降順 LA = いいね数昇順 --> <div class="title"> <h2> <span>#Recommended_Products</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> |
■ モバイルショップ
- 方法: 商品を表示させたい場所に以下のソースを追加します。(推奨位置: index.html)
<div class="ec-base-product typeThumb" module="product_hashtaglist"> <!--@css(/css/module/product/3439/hashtaglist.css)--> <!-- $hashtag = ベーシック、サンプル ※ ハッシュタグを入力すると該当のハッシュタグが含まれた商品が自動で表示されます。 $count = 9 ※ 表示させる商品の件数うぃ数字で設定でき、設定しない場合は最大200件まで自動的に制限されます。 ※ 商品表示数が多いと、ショップに負荷がかかる場合があります。 $cache = yes $orderby = RD ※ 表示方法は以下を参考に変更可能です。
RD = 商品登録日降順 RA = 商品登録日昇順 UD = 商品修正日降順 UA = 商品修正日昇順 PD = 販売価格降順 PA = 販売価格昇順 SD = 販売数降順 SA = 販売数昇順 CD = 照会数降順 CA = 照会数昇順 LD = いいね数降順 LA = いいね数昇順 --> <h2>#Recommended_Products</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> |
■ 参考
- メイン用ハッシュタグ商品表示を活用して、カート、注文書など希望の場所にハッシュ商品表示を設定することができます。
- 商品キュレーションサービスは、ショップ管理画面 [オプションサービス > cafe24サービス > 商品キュレーション > サービス概要]でお申し込みいただけます。
cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。
引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、0120-150-264または[お問い合わせ]まで、お気軽にお問い合わせください。