Shopifyの商品をカートに追加した状態でカートページへ遷移するリンクの作り方

はじめに

Shopifyでは商品ページの「カートに追加」ボタンを押すとカートに商品が追加されます。しかし、特定の商品をカートに追加した状態で、ユーザーを自動的にカートページへ遷移させるリンクを作りたいケースもあります。

たとえば、

本記事では、Shopifyの /cart/add を活用して 商品をカート追加済みの状態でカートページに遷移する 方法を紹介します。

Shopifyで特定の商品をカートに追加するには、以下の形式のURLを使用します。

https://yourstore.com/cart/add?id=[variant_id]&quantity=[数量]

商品にオプションがなく variant_id が 123456789 の場合、以下のリンクをクリックすると商品がカートに追加されます。

https://yourstore.com/cart/add?id=123456789&quantity=1

※ [yourstore.com] は自分のShopifyストアのURLに置き換えてください。

商品に色やサイズなどのバリエーションがある場合、各バリエーションごとに variant_id が異なります。正しい variant_id を取得し、同じ形式でカート追加リンクを作成してください。

Shopifyでは、カート追加後にカートページ (/cart) にリダイレクトさせるには、URLの末尾に &return_to=/cart を追加します。

例:

https://yourstore.com/cart/add?id=123456789&quantity=1&return_to=/cart

このリンクを開くと、

ユーザーは追加の操作をせずに、カート確認・購入手続きへ進むことができます。

Shopify Plus ストアを利用している場合、チェックアウトページ (/checkout) に直接リダイレクトも可能です。

https://yourstore.com/cart/add?id=123456789&quantity=1&return_to=/checkout

ただし、Shopify Plus でない場合、/checkout へのリダイレクトは利用できません。

Shopifyでは、/cart/add で複数の variant_id を同時に指定できます。

複数商品のカート追加リンク例:

https://yourstore.com/cart/add?id=123456789,223456789&quantity=1,2&return_to=/cart

この場合、

variant_id の取得方法を間違えない
- 商品ごとに variant_id は異なります。誤ったIDを指定すると、正しく商品が追加されません。
リダイレクト後の動作を確認する
- &return_to=/cart が機能するか、実際にブラウザで動作確認してください。
キャッシュの影響を考慮する
- 一部のブラウザではキャッシュが影響する場合があるため、テスト時はシークレットモードで確認するのがおすすめです。
ストアURLは適宜変更する
- yourstore.com の部分は 自分のShopifyストアのドメイン に変更してください。

本記事では、Shopifyで 特定の商品をカートに追加し、カートページに自動遷移するリンク の作成方法を解説しました。

✅ 基本のカート追加リンク

https://yourstore.com/cart/add?id=[variant_id]&quantity=[数量]

✅ カート追加後にカートページへ遷移するリンク

https://yourstore.com/cart/add?id=[variant_id]&quantity=[数量]&return_to=/cart

✅ 複数の商品を同時に追加するリンク

https://yourstore.com/cart/add?id=[variant_id1],[variant_id2]&quantity=[数量1],[数量2]&return_to=/cart

この方法を活用することで、SNSや外部サイトから直接カートページへ誘導する ことが可能になります。ぜひ、実際のストア運営に役立ててみてください！