商品詳細ページの商品選択部分について、
添付のようなにデザインを変更したいです。
（バリエーションごとにカートに追加するが表示されるイメージです。在庫切れの場合は[Sold Out]を表示したいです。）
shopifyを使用するのが今回が初めてで、
HTML/CSSの基本は理解しておりますが、LIQUIDはあまり知識がございません。
該当ショップのテーマは「Dawn」を使用しております。
よろしくお願いします。
Topic summary
ユーザーがShopifyの商品詳細ページで、バリエーションごとに「カートに追加」ボタンを表示するデザイン変更を希望しています。在庫切れの場合は「Sold Out」を表示したい意向です。
ユーザーの状況：
- Shopify初心者でHTML/CSSの基本は理解している
- 使用テーマは「Dawn」
- Liquidの知識はあまりない
提案された解決策：
- LiquidとCart APIで実装 - 技術的に対応可能だが、LiquidやJSのスキルが必要
- アプリを利用 - 「add to cart button」や「variants」などのキーワードでアプリストアを検索
- テーマで対応 - 希望機能を持つテーマを探す
- パートナーやエキスパートに依頼 - 自力での対応が難しい場合
Variation Table Listingなどの関連アプリも紹介されています。
実装したことはありませんが、恐らくliquidと以下のCart APIで対応できるかなと思います。
https://shopify.dev/api/ajax/reference/cart
他方、liquidやJSが書けない場合は以下のような対応が検討できます。
■アプリで対応する
アプリを探して対応する形になります。
https://apps.shopify.com/variation-table-listing?locale=ja
※上記アプリの使用経験はありませんが、アプリストアで「add to cart button」や「variants
」あたりのワードで探すと他にもある程度見つかると思います。
■テーマで対応する
あるのかどうか不明ですがご要望の機能を持つテーマを探すことも検討できます。
■依頼する
自力で対応不可の場合はエキスパートやパートナーに依頼されることをお勧めします。