商品情報にスキップ
1 1
公開日:2026.04.07

【Horizon】カート画面に「あといくらで送料無料」を表示する設定例

【Horizon】カート画面に「あといくらで送料無料」を表示する設定例

用途

  • カート編集
詳細を表示する

カート画面に「あと◯◯◯円で送料無料になります」を表示する設定例です。テーマ本体のファイルを変更せず、カスタムLiquidセクションへのコード貼り付けだけで実装できます。HorizonテーマのSection Hydration(cart:updateイベント)に対応しており、商品の追加・削除後もページ再読み込みなしで即座に金額が更新されます。


完成イメージ

チェックアウトボタンの上に残り金額が表示されます。送料無料に達すると「送料無料になりました!」に切り替わります。

カート画面に「あといくらで送料無料」を表示した状態。未達成と達成の2パターン


設定手順

テーマエディタのカートテンプレートに「カスタムLiquid」ブロックを追加し、サンプルコードを貼り付けます。設定値(金額・リンク先)は2か所のみです。

テーマエディタのカートテンプレートにカスタムLiquidブロックを追加しコードを貼り付ける手順


設定値

  • FREE_SHIPPING_THRESHOLD — 送料無料になる金額(円)。デフォルトは 15000
  • LINK_URL — 「他の商品も見てみる」のリンク先URL。不要な場合は ''(空文字)にします


補足

  • ブラウザの「戻る/進む」(bfcache)から復帰した際も正しく再表示されます
  • バーは .cart__ctas(チェックアウトボタンのラッパー)の直前に挿入されます。テーマのアップデートでクラス名が変わった場合は修正が必要です

ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Horizon 3.4.0

カスタムLiquidセクションに貼り付けるコード

コード上部の2か所(FREE_SHIPPING_THRESHOLDLINK_URL)を変更してから貼り付けてください。