Cafe24新着情報
[商品管理] [商品キュレーション]商品カテゴリ内ハッシュタグ表示設定ガイド
2019-06-19
平素よりcafe24をご利用いただき、ありがとうございます。
商品カテゴリ内のハッシュタグ表示設定ガイドです。
詳細は以下をご参照ください。
■ PCショップ - スマートデザイン
・位置 : 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> |
■ モバイルショップ
・位置 : Mobileデザイン > デザイン編集ウィンドウ > 商品(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; }
cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。
引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、0120-150-264または「お問い合わせ」まで、お気軽にお問い合わせください。