そのメッセージはある水曜日の朝、スクリーンショットと古いコードを添えて届きました。アルミ製スーツケースや旅行用品を扱うコペンハーゲンのオンラインストア（ここでは Havn & Co. と呼びます）のオーナーが、競合店のカートで見かけたものを自分の店にも欲しいと考えたのです。商品の下に「安心パック：紛失・盗難・破損からの保護」と書かれた小さなボックスがあり、お客様が決済前にオンにできるスイッチが付いています。
「まったく同じものが欲しい。テキストも画像も色も自分たちで変えられるように。新しいアプリは入れたくありません」。本事例では、この Shopify 配送保証トグルをどのように構築したかを紹介します。機能の役割、各部分が必要な理由、本番ストアで見つかった意外な事実、そしてテーマエディターに追加したすべての設定です。
本事例について：デンマークのお客様との実際のShopifyプロジェクトに基づいています。ストア名は変更しており、画像はイラストです。機能・設定・テストは納品した内容そのままに記載しています。
プロジェクト概要
| クライアント | スーツケースと旅行用品を扱うデンマークのオンラインストア（価格はデンマーククローネ） |
| プラットフォーム | Shopify、Horizonテーマ 3.5、カートアプリ Upcart |
| 機能 | カートドロワー内の任意「安心パック」（配送保証）スイッチ |
| 納品物 | snippet 1つ、スクリプト 1つ、スタイルシート 1つ、テーマ設定の新グループ Safety package、テーマファイル4つへの小さな追記 |
| 条件 | 保証アプリの追加なし、テーマ変更なし、すべてテーマエディターで編集可能、デンマーク語の文言 |
依頼内容：ストアが求めたもの
スクリーンショット、コード例、短い通話をもとに、要望を次の5つに整理しました。
- カート内の保証ボックス：商品のすぐ下に、アイコン・タイトル・短い説明・オン／オフのスイッチ。
- ワンタップで追加・削除：合計金額が即座に更新され、ページの再読み込みは不要。
- すっきりしたカート：保証が紛らわしい追加の商品行として表示されないこと。
- テーマエディターでの完全な管理：テキスト、画像、サイズ、色、価格用の商品を、コードに触れずに変更できること。
- デンマーク語の文言：Sikkerhedspakke と Beskyttelse mod tab, tyveri og skade。
配送保証トグルとは？なぜストアが導入するのか
配送保証トグルを使うと、お客様は決済直前の最後のステップで、荷物の紛失・盗難・破損に備えた少額の料金を支払うかどうかを自分で選べます。スイッチの裏側にあるのは普通のShopify商品（イラストでは49クローネ）で、それがカートに追加・削除されます。
数百クローネのスーツケースを売るストアにとって、この機能には3つの利点があります。
- 最適なタイミングでの安心感。「もし届かなかったら？」という不安に、迷いが生まれる決済ボタンのすぐ横で答えます。
- 注文ごとの追加収益。保証を選んだお客様の料金が注文に加わり、それを補償にどう使うかはストアが決めます。
- サポートへの問い合わせが減る。荷物が紛失しても、保証範囲があらかじめ明確です。
設計全体を決めたルールがひとつあります。EUでは、追加の有料オプションはお客様自身が選ぶ必要があります。消費者権利指令（2011/83/EU 第22条）は、追加支払いに事前チェック済みのボックスを使うことを認めていません。そのためスイッチは初期状態でオフです。任意の自動追加モードも設定画面ではっきり表示され、オフにしたお客様の選択を常に尊重します。
意外な事実：カートはテーマのものではなかった
最初のバージョンでは、Horizonテーマのカートドロワーにボックスを組み込みました。コードは動いていましたが、お客様が本番ストアを確認するとどこにも表示されていません。理由は、ストアが Upcart を使っていたからです。Upcartはテーマのカートを完全に置き換え、テーマのスタイルから切り離された独自のカートを描画するアプリです。
お客様にアプリへコードを貼り付けてもらうのではなく、私たちは本番ストアを調べ、利用できるUpcartの関数を確認して方針を変えました。設定は引き続きテーマ側にあり、小さなスクリプトが安心パックのボックスをUpcartのカートの中に配置し、Upcartが再描画しても位置を保ち、変更のたびにUpcartに更新を依頼します。テーマのカート用バージョンは、将来Upcartを外した場合の予備として残しています。
機能をひとつずつ解説
1. ワンタップのスイッチと即時に更新される合計
内容：スイッチがShopifyのカートAPIで保証商品を追加・削除し、その後カートと商品数が更新されます。理由：この瞬間にページを再読み込みすると購入の流れが途切れ、売上を失います。お客様は約1秒で新しい合計を確認できます。
2. 保証の明細行を非表示に
内容：保証商品は、Upcartとテーマのカートの両方で商品リストから非表示になります。理由：数量ボタン付きの2つ目の「商品行」はお客様を混乱させます。ボックス自体が状態を示し、価格は合計と注文にそのまま含まれます。
3. スマートなカートルール
内容：カートが変わるたびに3つのルールが自動で動きます。理由：保証だけが購入されるなど、カートがおかしな状態になってはいけないからです。
- 単独では販売しない：最後の実商品が削除されると、保証も削除されます。
- 数量は常に1：重複や数量2以上は自動で修正されます。
- 「いいえ」を尊重：自動追加が有効でも、保証をオフにしたお客様にはその訪問中に再び勧めません。
4. Upcartとテーマの両方に対応
内容：同じ機能がUpcartのカート、Horizonテーマのカート、カートページのすべてで動作します。理由：ストアはアプリを入れ替えるものです。その判断があっても、保証ボックスは作り直しなしで使い続けられるべきです。
5. 軽量で自社所有のコード
内容：テーマが読み込む小さなスクリプト1つとスタイルシート1つ。理由：別の保証アプリの月額料金がかからず、各ページにサードパーティのスクリプトも増えず、コードはストア自身のテーマにあります。
テーマエディターに追加したすべての設定
すべての設定は新しいグループにまとまっています：オンラインストア → テーマ → カスタマイズ → テーマ設定 → Safety package。以下はすべて開発者なしで変更できます。
| グループ | 設定 | 役割 |
|---|---|---|
| 全般 | Enable safety package | 機能全体のオン／オフ |
| Protection product | カートに追加される商品（と価格） | |
| Add automatically to cart | 任意の自動追加。初期はオフで、お客様の辞退を記憶 | |
| Hide protection product in the item list | カートをすっきり保つ | |
| Also show on cart page | カートページにもボックスを表示 | |
| コンテンツ | 画像、画像の幅 | 独自の画像、または内蔵の箱と盾のアイコン |
| アイコンの盾の色 | 内蔵アイコンの盾の色 | |
| タイトル、説明 | どんな文言でも、どの言語でも | |
| タイトルの横に価格を表示 | 保証の価格を表示 | |
| タイポグラフィ | タイトルサイズ、文字間隔、大文字、説明のサイズ | ストアのタイポグラフィに合わせる |
| ボックスのスタイル | 文字色と背景色、区切り線、枠線の太さと色、角丸、余白、Upcart内の左右マージン | カートのデザインに合わせる |
| スイッチ | オン・オフ・つまみの色 | ブランドカラーのスイッチ |
仕組みの裏側
ご自身でShopifyストアを構築する方向けに要点だけ。テーマは設定を小さなJSONブロックとHTMLテンプレートとして出力します。スクリプトはそれを読み、Upcartの読み込みを待ってから、Upcartの商品リストの下にボックスを配置します。MutationObserver が、Upcartが再描画するたびにボックスを元の位置に戻します。スイッチは標準のカートエンドポイントを呼び出し、その後カートを更新します。
// オンにする
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: protectionVariantId, quantity: 1 }] }),
});
// 新しい合計でUpcartのカートを再描画
window.upcartRefreshCart?.();保証の行はバリアントIDを照合して非表示にします。Upcartは各行のIDにこのIDを含めています。カートへのリクエストはキューで順番に処理されるため、スイッチを素早く何度も押しても競合は起きません。
本番ストアでのテスト
納品前に、実際のストアで分離されたブラウザセッションと代用の商品を使い、実際の注文を作成せずに動作を確認しました。
| テスト | 結果 |
|---|---|
| 商品を追加してカートを開く | 商品の下にボックスがオフの状態で表示 |
| オンにする | 保証が追加され、行は非表示、合計も更新 |
| オフにする | 保証が削除され、合計は商品価格に戻る |
| オンにして最後の実商品を削除 | 保証も自動で削除され、カートは空に |
お客様が得たもの
- 参考に送られたものと同じ見た目の安心パックボックスを、デンマーク語で、お客様が実際に見るカートに。
- 数分で編集できる設定グループ：テキスト、画像、色、サイズ、価格用の商品。
- 保証機能のための新たな月額アプリ契約は不要。
- すべてのカートを正しく保つルールと、EUの消費者ルールに沿った任意選択の設計。
- 保証商品の作成と機能の有効化を説明した簡単なガイド。
カスタム機能か、保証アプリか？
| 保証アプリ | カスタムトグル | |
|---|---|---|
| 月額コスト | 通常はサブスクリプションか料金ごとの手数料 | 初回の開発のみで、運用は無料 |
| デザイン | アプリのウィジェットで、スタイルは限定的 | 自社のデザインそのまま、テーマエディターで設定 |
| カート | すべてのカートアプリに対応するとは限らない | 自社のカート（ここではUpcart）とテーマ向けに構築 |
| 補償対応 | 多くはアプリ提供会社が対応 | ストア自身が対応 |
| 向いているのは | 補償対応を外部に任せたいストア | 自社で管理し、ブランド体験を重視するストア |
どちらが常に正しいということはありません。補償対応を第三者に任せたいならアプリが合理的です。料金・文言・見た目を自社で管理したいなら、カスタムトグルのほうが軽く、長期的にも安価です。
カートにはほかに何を置ける？
同じパターン（テーマエディターの設定、小さなスクリプト、その裏にある商品やカート属性）は、客単価を上げたり問い合わせを減らしたりする多くの追加機能に使えます。
- ギフトラッピング（有料オプション）。
- 送料無料までの進捗バー：もう一点の追加を後押し。
- 配送日指定：注文に保存。
- 延長保証：商品ごとに提供。
- 端数寄付：お釣りを寄付に。
- 刻印と注文メモ：入力チェック付き。
よくある質問
Upcartで使えますか？
はい。ボックスはUpcartのカート内に配置され、Upcartが再描画しても同期されます。テーマのカートやカートページでも動作します。
EUで保証を自動追加しても問題ありませんか？
有料オプションはお客様が選ぶ必要があるため、スイッチは初期状態でオフです。自動追加は任意の機能です。有効にするストアは、ご自身で法的な助言を受けてください。
価格をカート金額の割合にできますか？
標準では保証商品に設定した固定価格です。カート金額に応じた段階価格も、複数のバリアントと少しの追加ロジックで実現できます。
ストアが重くなりませんか？
いいえ。小さなスクリプト1つとスタイルシート1つだけで、カートへのリクエストはお客様がスイッチを使ったときやカートが変わったときだけ実行されます。
後から文言を変更できますか？
はい。タイトル、説明、画像、色はすべてテーマ設定なので、どの言語でも数分で変更できます。
まとめ
- 保証は判断が下される場所、つまりカート内の合計の横に置く。
- 価格を明示した任意選択にし、「いいえ」と答えたお客様を尊重する。
- 技術的な商品行は隠し、合計は正直に保つ。
- 構築前に、本番ストアが実際にどのカートを使っているか確認する。
- テキスト・色・サイズはすべてテーマエディターに置き、ストア自身が管理できるようにする。
あなたのストアにもこのような機能を入れたいですか？私たちはヨーロッパ各地のストア向けに、カスタムカート機能、Upcartやテーマとの連携、そして Shopify開発 全般を提供しています。サービス一覧をご覧いただくか、カートについてお気軽にご相談ください。