Shopifyストアで送料無料バーを表示する【アプリ利用とliquid編集】

モールECと違って自社ECサイトの場合は送料を設定されるショップが多いと思います。

そこでよく耳にするのが送料無料の設定です。例えば5000円以上、10000円以上で送料無料になるというような設定を行い、それをユーザーにわかりやすく示す実装です。

本記事ではShopifyで送料無料バーを設定するやり方を端的に解説します。

また弊社では、”運用を見据えた売れる”Shopify構築代行・運用代行サービスを行っております。

制作だけではなくその後の運用サポートまで一貫してサポートしておりますので、Shopfiyに関して気になることがありましたらお気軽にご相談ください。

Shopifyで送料無料バーを表示・設定する方法①アプリ利用

送料無料バーを設定するアプリがいくつかあります。無料で利用できるものもありますが、アプリの場合は基本的に設定やデザイン面で多くのカスタマイズをすることができないことが多いので、その点は事前に把握しておきましょう。

送料無料バー .amp

特徴

• 商品の総額に基づいて、送料無料になるまでの金額の差を表示（配送地域により、残額表示を変えることも可能）
• カート内の商品の有無に応じて、表示するメッセージを変更可能
• 送料無料バーの文字色、背景色、強調色などをなどをストアのデザインに合わせて調整可能
• PCとスマートフォンに対応した表示設定が可能
• 送料無料に到達するための残額を補う商品を自動的に推奨可能

送料無料バー

特徴

• 送料無料の閾値設定：「購入額が6,000円以上」のような条件を設定可能
• メッセージ作成：絵文字を使用して、自由度の高いメッセージの制作が可能
• カート内の商品の総額に応じて、メッセージを自動的に切り替えることができます。また、条件が満たされたときもメッセージを自動的に更新
• スタイル設定：バーの背景色や文字色を店舗のデザインに合わせて自由にカスタマイズできます。直感的な操作でデザインの変更が容易

Hextom: Free Shipping Bar

特徴

• 進行中の送料目標を伴うメッセージを表示し、セールスを促進
• 高度なターゲティング：地理的位置、顧客、ページ、商品、デバイスを対象
• スケジューリング機能：ブラックフライデーのようなイベントのために事前に送料無料の設定
• フルカスタマイズ可能で、全ページに対応、1クリックで有効化、コーディング不要 ・訪問者のローカル通貨を自動検出し、送料無料の金額を変換

Shopifyで送料無料バーを表示・設定する方法②liquid編集

上記はアプリを利用する方法をご紹介しましたが、実はアプリを利用せずにliquid編集で送料無料バーを実装することができます。

商品ページでの商品追加時や、ホームやコレクションページのクイック追加時、カートの数量変更時にも動的に反映されます。

仕組みさえ理解できれば、新規セクションとして構築したり、さらにカスタマイズしたりと汎用性も高いカスタマイズ方法です。

まとめ｜Shopifyストアで送料無料バーを表示する【アプリ利用とliquid編集】について

今回はECサイトでよく見かける送料無料の表示をShopifyで実現する方法について解説しました。可能であれば出来るだけliquidによる編集のほう、デザインやその他機能に支障がでずらいのでおすすめです。

難しい方もアプリを利用することで実現はできますので、アプリの費用を検討しながら導入を進めてみてください。

弊社では必要に応じてこのようなカスタマイズ実装をスポットでも対応しておりますので、実装をご依頼されたい方はお気軽にご相談ください。