送料無料バー（プログレス表示）— 「あと◯◯円」で"もう一品"を促し客単価アップ

🚚「あと500円で送料無料」——たったその一言で、カートの中身は1点増える

送料を払いたくない、という気持ちはすべての買い物客に共通する強い動機です。けれど、その背中を押す情報がストアのどこにも表示されていなければ、訪問者は「今日はやめておこう」と離脱してしまう——送料無料ラインを設定していながら、それを伝えきれずに機会を逃しているストアは少なくありません。

このセクションは、カートの金額に応じて「あと◯◯円で送料無料」をリアルタイムに表示し、プログレスバーで達成までの距離を視覚化します。カート操作（追加・変更・削除）に即座に反応してメッセージとバーが更新されるため、訪問者は「もう一品追加すれば送料が浮く」という選択を自然に意識します。客単価（AOV）を底上げする、もっとも費用対効果の高い導線のひとつです。

🛠️ 主な機能・特徴

📊 カート操作に即座に反応するリアルタイム進捗表示

• 商品の追加・数量変更・削除をフックして自動で再計算（外部のカート変更も検知）
• プログレスバーがアニメーションで進捗を可視化（達成時はバー全体が色変化）
• カート画面に遷移しなくても、商品ページ・コレクションページに設置するだけで「あと◯◯円」が常に最新の状態で表示される
• ページを戻ったとき（ブラウザバック）にも自動で再取得して整合性を維持

💬 3つの状態に合わせたメッセージ切り替え

同じバーでも、訪問者の状況に応じて伝えるべきメッセージは変わります。本セクションはカートの状態を自動判定し、3パターンのメッセージを使い分けます。

• カートが空のとき：「[金額]以上のご購入で送料無料」と、まず送料無料ラインの存在を訴求
• 未達成のとき：「あと[残額]で送料無料！」と、購入を後押しする残額メッセージ
• 達成したとき：「🎉 送料無料でお届けします！」と達成の喜びをフィードバック
• 各メッセージは [amount] プレースホルダで金額を埋め込み、文言は自由に書き換え可能

🎨 ストアのトーンに合わせて細部まで調整できる（30の設定項目）

• プログレスバーの高さ（4〜30px）・角丸（0〜50px、完全な丸型まで）
• バー背景色・進捗色（未達成）・進捗色（達成）を個別に指定
• 文字色・強調文字色（金額部分）・達成時の強調文字色を個別に指定
• アイコン絵文字（🚚 🎁 など）の差し替え・非表示切替
• メッセージサイズ（PC/モバイル別）
• 現在金額・目標金額のラベル文言とON/OFF切替
• 見出しテキスト・色・サイズ（PC/モバイル別）
• PC/モバイルの余白（上下左右）を個別調整
• 背景色・最大幅（px）

🌍 通貨表示に自動対応

• JPYなどの整数通貨は小数点なし、USDなどは小数点2桁で自動表示
• ブラウザ標準のIntl.NumberFormatを利用し、通貨記号・桁区切りもロケールに合わせて整形
• 多通貨ストアでも、訪問者の通貨に追従した金額表示が可能

📱 どの画面サイズでも違和感なく溶け込む

• PC/モバイルレスポンシブ。ブレイクポイント750px
• メッセージサイズ・余白をPC/モバイル別に個別設定
• aria-valuemin / aria-valuemax / aria-valuenow を備えたプログレスバー（スクリーンリーダー対応）

⚡ ページ表示速度を犠牲にしない設計

外部スクリプトの読み込みやアプリ連携のオーバーヘッドが発生しないため、Core Web Vitalsへの悪影響がありません。月額課金のアプリでよくある「バーが遅れて表示される」「カート操作とバーの更新にタイムラグがある」といったストレスもありません。テーマに直接組み込まれているため、初回描画から正しい金額・進捗が表示されます。

💰 料金の考え方 — アプリと比べてください

制作を請け負う方へ: カート連動のリアルタイム進捗表示をゼロから実装すると4〜6時間の工数です。本セクションなら導入は10分ほど。クライアント様のストアでもそのままお使いいただけます。

⚠️ ご購入前にご確認ください

送料無料ライン（しきい値の金額）は、セクション設定で手動で指定する方式です。Shopify管理画面の「配送と配達」で設定した送料条件は、仕様上テーマ側から自動で取得できないため、送料設定とバーの金額が自動で連動するわけではありません。

• 導入時に、ストアの送料無料ラインと同じ金額をセクション設定に入力してください（テーマエディターで数値を入れるだけです）
• 送料無料ラインを変更した際は、バー側の金額もあわせて更新してください

🔧 開発・検証について

Copilifyのセクションは、Shopify Plusパートナー企業に所属する現役エンジニアが開発しています。
月商5,000万円超のECサイト構築を手がける実案件と同じ基準で、コードの品質・表示速度・テーマエディタの使いやすさまで検証済みです。

• Shopify標準のLiquid・CSS・JavaScriptのみで構築し、特定テーマの専用機能に依存しない設計。Online Store 2.0対応テーマであれば基本的にご利用いただけます
• 開発・表示確認はDawn系テーマで実施。世の中すべてのテーマでの検証はできているわけではないため、ご不安な場合はご購入前にテーマ名を添えてお問い合わせください
• 設定画面はすべて日本語ラベル、導入手順は動画付きガイドでご案内
• 導入でつまずいた場合は無料サポートで解決まで対応