LINE@の「友だち追加ボタン」「QRコード」の設定方法

公式のLINE@を活用して、おすすめ商品や新着情報をお知らせしてみましょう。
ここでは、LINE@の「友達追加ボタン」「QRコード」をネットショップに設定する方法を説明します。

LINE@とは

普段、友人や家族間で使われているLINEアカウントとは異なりリピーター作りなどのビジネスの場面に有効となる特別なアカウントです。
お客さんと「友だち」になり距離を縮め、リピーターをどんどん増やしましょう。
詳しくは、 こちらもご確認ください。

1. 「LINE@」PC版管理画面にアクセスしてログインします。

「LINE@」PC版管理画面
https://admin-official.line.me/

認証用コードを求められることがありますので、
その場合はLINE@でご登録しているメールアドレスに届く認証コードを入力の上、ログインしてください。

2. 左メニューの「アカウント設定」をクリックします。

ページ最下部に「QRコード」と「友だち追加ボタン」の貼り付け用コードがあります。

3. QRコード、友達追加ボタンをショップに貼り付けます。

QRコードをショップに貼り付ける場合

「QRコード」を貼り付ける場合はこちらのテキストエリアにあるコードをコピーし、ご自身のショップの任意の場所に貼り付けます。
「QRコード」を使うと、PCであなたのショップを閲覧するお客様が、お手持ちのスマートフォンでLINE@アカウントを友達追加しやすくなります。

PC用テンプレート「ウェストホワイト」を使った例

以下にカラーミーショップで初期設定されているPC用テンプレート、「ウェストホワイト」のおすすめ箇所にQRコードを貼り付ける例をご紹介します。

  • 「ショップ作成」から「デザイン設定」をクリック。
  • テンプレート「ウェストホワイト」の「テンプレート編集」をクリック。
  • 「共通」の「HTML・CSS編集」をクリック。
  • 「共通HTML」229行目に以下のコードを追加します。
<div class="box" id="box_lineat">
 <h2>LINE@で友だち追加</h2>
 [LINE@の管理画面でコピーした「QRコード」のコードをここに挿入]
</div>

次に、共通CSS749行目に以下のコードを追加します。

div#box_lineat img {
width: 200px;
height: 200px;
}

このようにサイドメニューに「QRコード」が表示されます。

「友だち追加ボタン」をショップに貼り付ける場合

73bd59c269ecc2d82eb163d13db35a40

「友だち追加ボタン」を貼り付ける場合はこちらのテキストエリアにあるコードをコピーし、ご自身のショップの任意の場所に貼り付けます。
「友だち追加ボタン」を用意すると、スマートフォンであなたのショップを閲覧しているお客様が、LINE@アカウントを友達追加しやすくなります。

スマホ用テンプレート「PILOT」を使った例

  • 「ショップ作成」から「デザイン設定」デザイン設定をクリック。
  • 左サイドメニューから「スマートフォンショップ設定」をクリック。
  • 左サイドメニュー、「スマートフォンショップ設定」項目の「デザイン設定」をクリック。
  • テンプレート「PILOT」の「デザイン設定」をクリック。
  • 「共通」の「HTML・CSS編集」をクリック。
  • 「共通HTML」の末尾、56行目の下に以下のコードを追加する。
<section class="section section--main">
 <h2>LINE@で友達追加</h2>
 <div class="section-inner">
[LINE@の管理画面でコピーした「友達追加ボタン」のコードをここに挿入]
 </div>
</section>

このように、コンテンツ内に「友達を追加するボタン」が表示されます。

151b5bf7d2b17cecb745028fb0d3e68f (1)

4. 設定完了

これで設定が完了です。

2017.12.12