こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
前回、商品詳細ページにSNSボタンが表示されない時の対処方法をご紹介しましたが、
今回はクリエイターモードで「SNSボタン」を表示するソース例をご紹介します！
クリエイターモードで使えるタグはタグリファレンスをご確認ください。
クリエイターモードで「SNSボタン」を表示しよう
設定方法
SNSの表示設定は、商品詳細ページにSNSボタンが表示されない時の対処方法をご確認ください。
SNSボタンを表示するタグ
SNSボタンを表示する時は、下記のタグを使います。
|
1 |
$item.sns.twitter<!--X（旧Twitter）ボタン--> |
|
1 |
$item.sns.facebook<!--Facebookボタン--> |
|
1 |
$item.sns.line<!--LINEボタン--> |
SNSボタンのソース例
商品詳細ページ
表示は、サンプルショップ【Starter】の商品詳細ページで「X（旧Twitter）ボタン」と「Facebookボタン」を確認することができます。
旧管理画面：【ショップデザイン】>【クリエイターモード】>【商品詳細】「HTML」欄
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
【ショップデザイン】>【クリエイターモード】>【商品詳細】「HTML」欄
SNSボタンを表示させたい位置に追記してください。
▼HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--SNSボタン--> <ul class="item-share"> <{if {$item.sns.line}> <li><{$item.sns.line}></li> <{/if}> <{if $item.sns.twitter}> <li><{$item.sns.twitter}></li> <{/if}> <{if $item.sns.facebook}> <li><{$item.sns.facebook}></li> <{/if}> </ul> |
↓このように表示されます。
・ソースは一例となります。自由にデザインを調整して表示しましょう。
クリエイターモードでSNSボタンを表示する際にどうぞご参考ください。
それではまた！
