こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回はスマホの商品詳細ページに「LINEで送る」ボタンを設置する方法をご紹介します！
こんなお悩みありませんか？
・「LINEで送る」ボタンを商品詳細ページに表示したい！
そもそも「LINEで送る」ボタンって？！
LINEといえば、無料でチャットや通話が楽しめる、いまや国内では相当な普及率となっている人気のコミニュケーションツールです。
LINEで送るボタンは、Webサイトの情報をLINEの友だちやグループにシェアしたり、タイムラインへかんたんに投稿することができます。
↓↓このようなボタンをスマホの商品詳細ページに設置することができます。
[難易度 ★☆☆ ]
サイトへの流入率を更にアップ！
「LINEで送る」ボタンを設置する方法！
それでは早速、みていきましょう！
設定方法
（1）表示設定！
【プロモーション】>【SNSボタンの設定】
「LINEで送るボタンの設定（スマホのみ対応）」表示するを選択します。
（2）タグを入力！
【ショップデザイン（スマホ）】>【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【商品詳細画面】へ
「HTML編集」エディターエリアの「Twitter」や「Facebook」ボタンの下などに
下記のタグを追記してください。
|
1 |
<{$line_btn}> |
▼スマホベースデザイン【Primary】利用の場合
→『クラス名』も忘れず追記してください。
|
1 2 3 4 5 6 |
<ul class="snsBtn"> <li class="snsTwitter"><{$twitter_btn}></li> <li class="snsFacebook"><{$facebook_btn}></li> <!--▼LINEで送るボタンを追加--> <li class="snsLine"><{$line_btn}></li> </ul> |
▼スマホベースデザイン【ベーシック】利用の場合
|
1 2 3 4 5 6 7 8 |
<ul id="ssnBtn"> <li><{$twitter_btn}></li> <li><{$facebook_btn}></li> <li><{$mixi_check_btn}></li> <li><{$mixi_good_btn}></li> <!--▼LINEで送るボタンを追加--> <li><{$line_btn}></li> </ul> |
スマホテンプレートベースデザイン【Primary】、【Primary・黒】を新しく適用された場合は、既にソースが入力されているのでそのままご利用いただくことができます。
（2）CSSを指定する！
【Primary】ご利用の場合は（1）と同じ商品詳細画面の
「CSS編集」エディターエリア内に、下記のスタイル指定も追記してください。
▼スマホベースデザイン【Primary】利用の場合
|
1 2 3 4 5 6 7 8 9 10 11 |
/* SNS */ .snsBtn li{ display:inline-block; padding:0 5px; } .snsBtn iframe{ vertical-align: middle; } .snsBtn .snsFacebook iframe{ width: 85px !important; } |
CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記しましょう！
設置完了！
→商品ページをシェアしてみましょう！
LINEアプリがインストールされていないスマートフォンをご利用の場合は
LINEアプリをインストールしてログインしてご利用ください。
いかがでしたでしょうか。
LINE利用者が多い20～40代向けの商材をお持ちのショップ様はぜひ設置して
商品ページの拡散や宣伝にお役立てください。
それではまた！
