こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回はスマホの商品詳細ページに「LINEで送る」ボタンを設置する方法をご紹介します!

こんなお悩みありませんか?

・「LINEで送る」ボタンを商品詳細ページに表示したい!

そもそも「LINEで送る」ボタンって?!

LINEといえば、無料でチャットや通話が楽しめる、いまや国内では相当な普及率となっている人気のコミニュケーションツールです。
LINEで送るボタンは、Webサイトの情報をLINEの友だちやグループにシェアしたり、タイムラインへかんたんに投稿することができます。

↓↓このようなボタンをスマホの商品詳細ページに設置することができます。
LINEで送る

[難易度 ★☆☆ ]
サイトへの流入率を更にアップ!
「LINEで送る」ボタンを設置する方法!

それでは早速、みていきましょう!

設定方法

(1)表示設定!

【プロモーション】>【SNSボタンの設定】

「LINEで送るボタンの設定(スマホのみ対応)」表示するを選択します。

LINEで送るボタンの設定

参考:オンラインマニュアル「SNSボタンの設定」

(2)タグを入力!

【独自デザイン(スマホ)】>【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【商品詳細画面】へ

「HTML編集」エディターエリアの「Twitter」や「Facebook」ボタンの下などに
下記のタグを追記してください。

▼スマホベースデザイン【Primary】利用の場合

→『クラス名』も忘れず追記してください。

▼スマホベースデザイン【ベーシック】利用の場合

スマホテンプレートベースデザイン【Primary】、【Primary・黒】を新しく適用された場合は、既にソースが入力されているのでそのままご利用いただくことができます。

(2)CSSを指定する!

【Primary】ご利用の場合は(1)と同じ商品詳細画面の
「CSS編集」エディターエリア内に、下記のスタイル指定も追記してください。

▼スマホベースデザイン【Primary】利用の場合

CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記しましょう!

設置完了!

→商品ページをシェアしてみましょう!

「LINEで送る」ボタンを設置

LINEアプリがインストールされていないスマートフォンをご利用の場合は
LINEアプリをインストールしてログインしてご利用ください。

いかがでしたでしょうか。
LINE利用者が多い20~40代向けの商材をお持ちのショップ様はぜひ設置して
商品ページの拡散や宣伝にお役立てください。

それではまた!