ページにカートに追加ボタンを設置したい。

お世話になっております。

同サイトに別ページを制作し、その中に購入可能な商品をカートに入れるボタンを設置したいです。

通常の商品ページと同じように、バリエーションを選択し、カートに追加ボタンを押下することで、カートページに遷移させたいと考えています。

その際には選択したバリエーションがカートに入っている状態にしたいです。

可能あれば商品はタブで切り替えできて2商品のうち一つを選択。

バリエーション選択し、カートに入れるボタンを押下

カートページに遷移

上記を実現したいと考えています。

ご存じの方いらっしゃいましたらご教授をお願い致します。

宜しくお願い致します。

同サイトに別ページを制作し、その中に…

「同サイト」というのは、「同Shopifyストア」を指していらっしゃるでしょうか?

もし、「同Shopifyストア」を意味していない場合は、

下記の「購入ボタン」を利用することで、ご要望をある程度、満たせるかと思います。

https://help.shopify.com/ja/manual/online-sales-channels/buy-button

商品をタブ切り替えする、

というところだけご自身で、

作り込みが必要になるかもしれません。

「同Shopifyストア」を意味している場合は、

上記ヘルプによると、「購入ボタン」の使用は非推奨のようです。

この場合は、

https://community.shopify.com/c/shopify-design/cart-use-permalinks-to-pre-load-the-cart/td-p/613702#adding-a-buy-this-link-to-a-blog-post

こちらに記載の方法が推奨されていますね。

しっかり読んでおりませんが、

例えば、

Add To Cartボタンのリンク先を自前で準備し、

ボタンクリック時にカート画面に遷移する、

ようなことができそうです。

商品のバリエーション変更のUIや、商品自体のタブ切り替えのUIは自作する必要がありますが、

作り込めば、希望されるものに近いものができそうです。

なお、下記のような、Shopifyストアのブログに商品を埋め込めるアプリもあるようです。

https://apps.shopify.com/dropinblog-seo-friendly-blog?locale=ja

この場合、商品のタグ切り替えは難しそうですが、

アプリストアのイメージギャラリーを見る限り、

バリエーション選択までは実装できそうです。

ご参考まで。

(キュー田辺)