「あと〇〇円で送料無料」といった表示は、Amazonや楽天市場などのさまざまなECストアで目にする言葉でしょう。これは「送料無料バー」と呼ばれる販促パーツです。送料は購入をためらわせる大きな要因のひとつですが、あと少しで送料が無料になると分かると、購入者は「もう1点足そうかな」と前向きになります。
特に北海道や沖縄などの離島に住んでいるユーザーにとっては、購入を大きく左右するものといっても過言ではありません。
Shopifyでこの送料無料バーを設置したいと考えたとき、「標準機能で出せるのか」「アプリが必要なのか」「無料でできるのか」「コードを触らないとダメなのか」といった疑問が出てくるはずです。
本記事では、送料無料バーの基本から、実装方法、アプリの選び方、客単価につなげる運用のコツ、設置時の注意点までをまとめて解説します。自社ストアに合った設置方法を選ぶための参考にしてください。
目次
Shopifyの送料無料バーとは？
送料無料バーは、カート内の合計金額に応じて「あと〇〇円で送料無料」という情報をリアルタイムに表示する通知パーツです。まずはその役割と効果を整理しておきましょう。
あわせて読みたい
「あといくらで送料無料」を可視化する通知
送料無料バーの最大の特徴は、送料無料までの残り金額を「あと〇〇円」という形で可視化することです。購入者は、あといくら買えば送料が無料になるのかをひと目で把握できます。
多くの送料無料バーは、商品をカートに追加・削除するたびに表示金額が自動で更新されます。「あと1,000円」「あと500円」といったように、購入者の行動に合わせてメッセージが変化していくのが基本的な仕組みです。
告知バーとの違い
サイト上部に固定表示する点では、送料無料バーはよくある「告知バー」と似ています。しかし両者は役割が異なります。
告知バーは「セール開催中」「新商品入荷」など、すべての訪問者に同じ内容を伝える静的な通知です。一方の送料無料バーは、カート金額という一人ひとり異なる状況に応じて、表示内容が動的に変わります。つまり送料無料バーは、購入者の「あと少し」に寄り添って行動を後押しする、よりパーソナルな販促導線だといえます。
期待できる効果
送料無料バーを設置する目的は、装飾ではなく売上への貢献です。主に次の2つの効果が期待できます。
ひとつは、カゴ落ちの防止です。送料への不安は、購入直前の離脱（カゴ落ち）を生む代表的な原因です。送料無料までの道筋をあらかじめ示しておくことで、「送料がいくらか分からず不安」という理由での離脱を減らせます。
もうひとつは、客単価（AOV／平均注文額）の向上です。「あと〇〇円で送料無料」という表示は、送料無料ラインに届くよう、もう1点の追加購入を自然に促します。結果として、1回の注文あたりの金額を引き上げる効果が見込めます。
Shopifyの標準機能では送料無料バーは設置できない
結論から言うと、標準機能だけでは送料無料バーは設置できません。その理由と対処法を解説します。
「あと〇〇円」のリアルタイム表示は標準にない
Shopifyには、カート金額に応じて「あと〇〇円で送料無料」とリアルタイムに表示するバー機能は標準搭載されていません。カートの状況に連動して動的に文言を変える仕組みは、標準の管理画面からは用意できないのです。
ただし「送料無料の配送条件」自体は設定できる
一方で、「〇〇円以上のご購入で送料無料」という配送条件そのものは、Shopifyの配送設定で作成できます。特定の金額を超えたら送料を0円にする、といったルールは標準機能の範囲です。
つまり、「送料を無料にする条件」は設定できても、「その条件をストア上でリアルタイムに見せるバー」は別途用意する必要がある、というのがShopifyの現状です。
実装の選択肢はアプリとLiquid（コード）の2つ
送料無料バーを表示させる手段は、大きく2つに分かれます。ひとつはアプリを使う方法、もうひとつはテーマのLiquid（コード）を編集して自作する方法です。次章で、それぞれの特徴を見ていきましょう。
Shopifyに送料無料バーを設置する方法
送料無料バーの実装方法を、アプリとコード編集の2軸で比較します。自社がコードを触れる体制かどうかも踏まえて、適した方法を選びましょう。
アプリで設置する
もっとも手軽なのが、送料無料バー用のアプリを使う方法です。Shopify App Storeには送料無料バーを表示できるアプリが複数あり、管理画面から設定するだけで、コードを書かずにバーを設置できます。
デザインや文言、表示金額の調整も管理画面から行えるため、エンジニアがいなくても運用担当者が自分で設置・更新できるのが強みです。多くのアプリはカート金額に応じたリアルタイム更新にも対応しています。
Liquid・コード編集で実装する
もうひとつは、テーマのLiquidを直接編集して送料無料バーを自作する方法です。デザインや挙動を細部まで自由に作り込めるため、ブランドの世界観に完全に合わせたい場合や、独自の表示ロジックを組みたい場合に向いています。
ただし、実装にはLiquidやJavaScriptの知識が必要で、テーマ更新時にコードのメンテナンスが発生する点には注意が必要です。設置後の文言変更なども、その都度コードを触ることになります。
現実的にはアプリ導入がおすすめ
自由度の高さではコード実装に分がありますが、多くのストアにとっては、アプリ導入が現実的な選択肢です。設置・変更のたびにエンジニアの手を借りずに済み、運用担当者だけで施策を回せるためです。
キャンペーンごとに文言や送料無料ラインを変えたい、スマホ表示にも手間なく対応したいといった運用面を重視するなら、アプリの導入が有力です。
送料無料バーのアプリ導入なら「送料無料バー＆アップセル.amp」
アプリで送料無料バーを設置する場合の具体的な選択肢として、弊社and.dが開発する国産アプリ「送料無料バー＆アップセル.amp」をご紹介します。
【主な機能・特徴】
・送料無料までの残金表示｜カート内金額に応じて「あと○○円で送料無料」をリアルタイム表示
・文言表示の柔軟切り替え｜商品未追加時や送料無料達成後など、状況に応じてメッセージ内容を変更
・カラーや表示位置のカスタマイズ｜ブランドの世界観に合わせてボタンやバーを自在に調整
・デバイス別の見せ方最適化｜スマホ・PCなど端末ごとに表示非表示や配置選択が可能
・おすすめ商品の自動提示｜送料無料までの残り金額に応じて商品を自動で提案
送料無料になるまでの残り金額を表示させ、購入を促進させたい方は
「送料無料バー&アップセル.amp」を試してみる（7日間の無料体験）
送料無料バーアプリの選び方
送料無料バーのアプリは複数あり、機能や料金はさまざまです。ここでは、後悔しないための選定基準を挙げながら、あわせて代表的なアプリにも触れていきます。
日本語・日本の商習慣に対応しているか
管理画面やサポートが日本語に対応しているかを確認しましょう。前述の「送料無料バー＆アップセル.amp」や、UnReactが提供する「シンプル送料無料バー」などの国産アプリは、UI・サポートともに日本語で完結します。海外製アプリは多機能な反面、管理画面やサポートが英語のみというケースもあるため、社内の体制に合わせて選びましょう。
料金体系は自社に合っているか
無料プランや無料体験の有無、有料プランの課金体系を確認しましょう。「送料無料バー＆アップセル.amp」は有料のみ。海外製では「Free Shipping Bar」（Hextom）のように広く使われているアプリもありますが、月額課金が中心のものも多いため、機能と費用のバランスを見極めることが大切です。
デザイン・表示位置のカスタマイズ性
バーの文言・配色・角丸などをどこまで調整できるかは、ブランドイメージを保つうえで重要です。カート金額に連動して表示が変わる「Goal Banner｜送料無料バナー」や「送料無料バー＆アップセル.amp」のように、デザインを細かく調整できるアプリなら、既存のストアデザインに違和感なくなじませられます。
商品ページ・カートなど任意の位置に出せるか
送料無料バーをサイト上部の固定バーとしてしか出せないアプリもあれば、商品ページやカートなど任意の位置に表示できるアプリもあります。購入者が金額を意識するのはカートや商品ページであることが多いため、表示位置を柔軟に選べるアプリのほうが、訴求のタイミングを最適化しやすくなります。
レコメンドなど客単価アップ機能があるか
送料無料バーを「表示するだけ」で終わらせず、客単価アップまで狙うなら、付加機能の有無も見ておきましょう。残り金額を埋める商品を自動でおすすめするレコメンド機能や、ノベルティ配布と組み合わせる機能があると、「あと〇〇円」を具体的な追加購入につなげやすくなります。
Online Store 2.0テーマに対応しているか
近年主流のOnline Store 2.0（OS2.0）テーマでは、アプリブロックを使って管理画面から手軽にバーを配置できます。利用中のアプリがOS2.0に対応しているかは必ず確認しましょう。OS2.0に対応していない旧テーマでは、アプリブロックが使えず、コードの追加が必要になったり、正しく動作しなかったりする場合があります。
顧客単価を上げる送料無料バーの設計・運用のコツ
送料無料バーは、設置して終わりではありません。設計と運用を工夫することで、客単価アップの施策として効果を高められます。
送料無料ラインの決め方（客単価＋αで設定）
送料無料ラインは、現在の客単価より少し高い金額に設定するのが基本です。客単価とかけ離れた高すぎる金額では「どうせ届かない」と諦められてしまい、安すぎるとほとんどの注文が最初から送料無料になり、追加購入を促す効果が薄れます。平均注文額に少し上乗せしたラインを目安に、実際の反応を見ながら調整しましょう。
「あと〇〇円」を埋める商品をレコメンドする
「あと〇〇円」と示すだけでなく、その差額を埋められる商品を具体的に提案すると、追加購入のハードルが下がります。「あと何を買えばいいのか」を購入者に考えさせず、最適な候補を提示することで、送料無料ラインへの到達を後押しできます。前述のレコメンド機能を備えたアプリなら、この提案を自動化できます。
ノベルティ・おまけで“あと少し”を後押しする
送料無料に加えて、「〇〇円以上でノベルティプレゼント」といった特典を組み合わせると、追加購入の動機をさらに強められます。ギフトシーズンや新商品プロモーションなど、特典が響きやすいタイミングで活用すると効果的です。
表示位置と文言をテストして最適化する
送料無料バーの効果は、表示位置や文言によって変わります。「送料無料まであと〇〇円」「あと〇〇円で送料無料！」など、言い回しを変えるだけでも反応は変化します。A/Bテストなどで複数パターンを比較し、自社の顧客に最も響く形へ継続的に最適化していきましょう。
送料無料バーを設置するときの注意点
最後に、送料無料バーを導入する際につまずきやすいポイントを整理します。逆効果やトラブルを避けるために、事前に確認しておきましょう。
スマホでの見え方・邪魔にならない配置を確認する
ECの購入は、多くがスマートフォンからです。PCで見やすくても、スマホでは文字が折り返して読みづらかったり、購入ボタンや商品情報に重なって操作を妨げたりすることがあります。必ずスマホ実機で、見やすさと邪魔にならない配置を確認しましょう。
地域別に送料無料ラインが違う場合の表示を確認する
離島や一部地域で送料条件が異なる場合、送料無料バーの表示金額と実際の送料が食い違うと、購入者の混乱やクレームにつながります。配送先に応じて残り金額を出し分けられるアプリを使うか、注記を添えるなどして、表示と実際の送料が一致するようにしておきましょう。
表示速度・ページ表示への影響を確認する
アプリやスクリプトの追加は、ページの表示速度に影響することがあります。表示速度の低下はカゴ落ちや離脱の原因になるため、導入後はページの読み込みが遅くなっていないかを確認しておくと安心です。
キャンペーン終了後の表示・設定の切り替え漏れ
期間限定で送料無料ラインを引き下げるキャンペーンなどを行った場合、終了後に設定を戻し忘れると、意図しない条件で送料無料が続いてしまいます。キャンペーンの開始・終了に合わせて、表示と設定を切り替える運用ルールを決めておきましょう。
OS2.0非対応テーマでは動作しない場合がある
前述のとおり、Online Store 2.0に対応していない旧テーマでは、アプリブロックが使えず、送料無料バーが正しく表示・動作しないことがあります。導入前に、利用中のテーマがアプリの対応要件を満たしているかを確認しておきましょう。
まとめ｜送料無料バーで送料の不安を解消し客単価を伸ばそう
送料無料バーは、送料への不安を解消し、「あと少し」の追加購入を後押しする販促導線です。Shopifyの標準機能だけでは設置できませんが、アプリを使えばコードを書かずに導入でき、運用担当者だけで施策を回せます。
大切なのは、送料無料バーを「ただ表示する装飾」で終わらせないことです。送料無料ラインの決め方やレコメンドとの組み合わせまで設計し、スマホ表示や地域別送料といった注意点を押さえたうえで運用すれば、送料無料バーは客単価とCVを伸ばす確かな施策になります。
and.dでは、Shopifyの構築から送料無料バーをはじめとする販促機能の実装・運用改善まで、Shopify Expertsとしてご支援しています。「自社に合った送料無料バーを設置したい」「客単価を上げる仕組みを整えたい」といった場合は、お気軽にご相談ください。
