【アプリ不要】Shopifyに「 LINE 追従ボタン」を無料で設置する方法！3分でできる”カゴ落ち”防止の全手順（コピペOK!）

Shopifyでストア運営をしていて、「商品は見られているのに、あと一歩で購入されない」という経験はありませんか？ その原因、実は「購入直前の小さな不安」を解消できていないからかもしれません。

「サイズ感は？」「いつ届く？」 そんなちょっとした疑問を、メールではなく使い慣れたLINEでサクッと聞けるようにするだけで、購入率は劇的に変わります。

今回は、月額有料アプリを使わずに、完全無料・たった3分でShopifyストアにLINEボタン（追尾アイコン＆商品バナー）を設置する裏技を公開します。 HTMLがわからなくても、コードをコピペするだけで実装可能です。

1. なぜShopify Inboxではなく「LINE」なのか？

Shopifyには純正のチャット機能（Shopify Inbox）もありますが、日本国内向け（特にアパレルや雑貨）なら圧倒的にLINEが最強です。

• 日常の延長: 新しいチャットツールを開くより、使い慣れたLINEの方が抵抗感がない
• 追客ができる: ブラウザを閉じてもLINEで繋がり続けられる
• 親近感: 「お店の人」が対応している安心感がある

今回は、以下の2種類のボタンを設置していきます。

1. 全ページ追尾型アイコン: 画面左下に常駐し、いつでも相談できる
2. 商品ページ埋め込みバナー: 購入を迷う瞬間に背中を押す

2. ステップ1：全ページ常駐「追尾アイコン」の設置【コードあり】

まずは、お客様がどのページにいても表示される「お守り」のようなアイコンを作ります。

準備するもの

• LINE公式アカウントの友だち追加URL（例：https://lin.ee/xxxxx）

手順：theme.liquidを編集する

1. Shopify管理画面 ＞ オンラインストア ＞ テーマ ＞ 「…」 ＞ 「コードを編集」
2. 左側のフォルダから layout ＞ theme.liquid を開く
3. コードの一番下の方にある </body> というタグを探す
4. </body> の直前に、以下のコードを貼り付ける

HTML

<a
  class="line-fab"
  href="https://lin.ee/あなたのURL"
  target="_blank"
  rel="noopener"
  aria-label="LINEで相談する"
>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/4/41/LINE_logo.svg"
    alt="LINE"
  >
</a>

/* ボタン本体のデザイン */
<style>
  .line-fab{
    position: fixed;
    left: 16px;   /* 左からの位置 */
    bottom: 20px; /* 下からの位置 */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #06C755;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    z-index: 99999;
    text-decoration: none;
  }
  /* アイコンサイズ */
  .line-fab img{
    width: 40px;
    height: 40px;
    display: block;
  }
</style>

注意点： コード内の href="https://lin.ee/あなたのURL" の部分は、必ずご自身のLINE URLに書き換えてください。

3. ステップ2：商品ページに「相談バナー」を設置する

追尾アイコンが「守り」なら、商品ページのバナーは「攻め」です。 商品説明を読んで迷っているお客様に対し、「今すぐ解決しませんか？」と提案します。

実装手順（ノーコード感覚でOK）

この設定はコード編集画面ではなく、「テーマのカスタマイズ画面」だけで完結します。

1. バナー画像を用意: Canvaなどでバナーを作成します。「公式LINEで相談する」「サイズ相談はこちら」など、お客様にとってのメリットが伝わる言葉を入れるのがおすすめです。
2. 画像をShopifyにアップロード: Shopify管理画面 ＞ コンテンツ ＞ ファイル ＞を開きます。 右上の「ファイルをアップロード」から作成した画像を追加し、リンクボタン（🔗チェーンのマーク）を押して画像のURLをコピーしておきます。
   ※URLは https://cdn.shopify.com/... から始まるものです。
3. カスタマイズ画面へ移動: オンラインストア ＞ カスタマイズをクリックします。
4. 商品ページを選択: 画面上部のプルダウンから「商品」 ＞ 「デフォルトの商品」を選択します。
5. ブロック追加: 左側のメニューにある「商品情報」セクション内で、「ブロックを追加」をクリックし、「カスタムLiquid」を選択します。
6. コード貼り付け: 追加されたブロックをクリックし、右側の入力欄に以下のコードを貼り付けます。

HTML

<a href="https://lin.ee/あなたのURL" target="_blank" rel="noopener">
  <img
    src="https://cdn.shopify.com/あなたの画像のURL.jpg"
    alt="公式LINEで問い合わせ"
    style="width: 100%; height: auto; display: block;"
  >
</a>

/* スマホでの見切れ防止＆デザイン調整 */
<style>
/* セクション内画像すべてに適用 */
img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
/* モバイル用の見切れ防止 */
@media screen and (max-width: 768px) {
  img {
    padding: 0 12px;
    box-sizing: border-box;
  }
}
/* 不要な下余白を削除 */
.section, .image-banner, .image-banner__media, .image-banner__content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
</style>

注意点： コード内の href="https://lin.ee/あなたのURL" の部分は、必ずご自身のLINE URLに、また、src="https://cdn.shopify.com/..." の部分は、必ず手順2でコピーした画像のURLに、書き換えてください。

4. さらに効果を高める「通知メール」への設置

購入前の相談だけでなく、「購入後の安心」もLINEで作ります。 注文確認メールや発送通知メールにLINEボタンを置いておけば、「サイズ交換したい」などの連絡がスムーズになり、顧客満足度が上がります。

Shopify管理画面 ＞ 設定 ＞ 通知 ＞ 「注文の確認」などを開き、以下のHTMLコードを好きな場所に貼ってください。

HTML

<table width="100%" cellpadding="0" cellspacing="0" style="margin: 16px 0;">
  <tr>
    <td>
      <a href="https://lin.ee/あなたのURL" style="text-decoration: none; display: inline-block;">
        <table cellpadding="0" cellspacing="0" style="background-color: #06C755; border-radius: 4px; padding: 12px 24px;">
          <tr>
            <td style="color: #ffffff; font-weight: bold; font-size: 16px; font-family: sans-serif;">
              LINEで問い合わせる
            </td>
          </tr>
        </table>
      </a>
    </td>
  </tr>
</table>

注意点： コード内の href="https://lin.ee/あなたのURL" の部分は、必ずご自身のLINE URLに、書き換えてください。

---

5. 導入後に必ずやるべき「あいさつメッセージ」戦略

ボタンを設置したら、LINE公式アカウント側の「あいさつメッセージ」も必ず設定しましょう。 ただ「登録ありがとうございます」だけではNGです。「何を送ればいいか」をお客様に教えてあげてください。

【反応率が上がるあいさつ例】

🙋‍♀️ こんな質問にお答えしています

• 「身長160cmですがSとMどっちが良い？」
• 「来週の結婚式に間に合いますか？」
• 「領収書は発行できる？」

商品ページのスクショを送っていただけるとスムーズです✨

このように具体例を出すことで、相談のハードルが一気に下がります。

結論：LINEは最強の「接客ツール」です

ECサイトは顔が見えないからこそ、不安がつきもの。 高機能なチャットボットを入れなくても、「LINEですぐに人に聞ける」という安心感があるだけで、購入率（CVR）は確実に変わります。

アプリ不要、コスト0円、作業時間3分。 リスクはゼロですので、ぜひ今すぐコードをコピペして、あなたのストアに「最強の相談窓口」を作ってみてください。

📢 Shopifyの売上アップ・構築でお悩みの方へ

「記事通りにやったけど上手くいかない」 「自分のショップに合ったLINE活用法をもっと知りたい」 「広告費ゼロで月商100万を目指すロードマップを作ってほしい」

そんな方は、現役EC運営者の個別相談をご活用ください。 理系研究職出身、データを分析してロジカルに売上を作るノウハウを、あなたのショップに合わせてアドバイスします。

▼まずは公式LINEから「相談希望」とメッセージください

---