Shopifyで「カートに追加」パーマリンクの作成手順

この記事では、aタグを用いて、Shopifyの「カートに追加」ボタンの実装する手順を紹介します。

まず、前提として、「カートに追加」ボタンはShopifyの「buy button」というアプリが有名です。特段理由がなければアプリを用いればよいかと思います。

ただjsの動きなどが気に入らない場合は、本記事で紹介する方法を検討してもよいと思います。

具体例

バリエーションが1つの場合

管理画面>商品管理>対象商品詳細ページに移動し、URLの後方に「variants.json」を追加してエンターを押すと、対象商品のjsonが返ってきます。

サンプル：https://○○○.myshopify.com/admin/products/7636542456032/variants.json

idの部分にバリエーションIDが記載されているので、コピーし、以下の雛形を参考に、リンクを加工します。
https://technosource-shop.com/cart/add/42714879230176

バリエーションが複数の場合

複数の場合でも、上述のjson形式で表示させることは可能ですが、管理画面>商品管理>対象商品詳細ページのバリエーションの各SKUの編集をクリックすると、各SKU詳細画面に遷移すると思います。この時のURLの
「https://〇〇○.myshopify.com/admin/products/1234567898745/variants/39474396561598」のvariants/の後ろがバリエーションIDになります。

サンプル：http://{shop}.myshopify.com/cart/add?id=41893345001662:1,42714879230176:1
このような書き方をすれば、2つの商品をカートに数量指定で追加することもできます。

このようにすれば、パーマリンクからカートに商品を追加させることができます。

参考1：https://popupsmart.com/blog/shopify-add-to-cart-link

参考2：https://shopify.dev/apps/channels/cart-permalinks/cart-permalinks