Shopifyの商品をカートに追加した状態でカートページへ遷移するリンクの作り方
TOPICS
はじめに
Shopifyでは商品ページの「カートに追加」ボタンを押すとカートに商品が追加されます。しかし、特定の商品をカートに追加した状態で、ユーザーを自動的にカートページへ遷移させるリンクを作りたいケースもあります。
たとえば、
- 商品ページを経由せず、ワンクリックで商品をカートに追加しつつカートページへ移動させたい
- 外部サイトやSNSから直接カート追加済みの画面へ誘導したい
- クーポンや特別オファー付きのカートURLを作成したい
本記事では、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このリンクを開くと、
- 商品がカートに追加される
- 自動的にカートページ
/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=123456789を1個 追加variant_id=223456789を2個 追加- 追加後、カートページ
/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や外部サイトから直接カートページへ誘導することが可能になります。ぜひ、実際のストア運営に役立ててみてください！
