商品詳細ページの商品選択部分について

Topic summary

ユーザーがShopifyの商品詳細ページで、バリエーションごとに「カートに追加」ボタンを表示するデザイン変更を希望しています。在庫切れの場合は「Sold Out」を表示したい意向です。

ユーザーの状況:

  • Shopify初心者でHTML/CSSの基本は理解している
  • 使用テーマは「Dawn」
  • Liquidの知識はあまりない

提案された解決策:

  1. LiquidとCart APIで実装 - 技術的に対応可能だが、LiquidやJSのスキルが必要
  2. アプリを利用 - 「add to cart button」や「variants」などのキーワードでアプリストアを検索
  3. テーマで対応 - 希望機能を持つテーマを探す
  4. パートナーやエキスパートに依頼 - 自力での対応が難しい場合

Variation Table Listingなどの関連アプリも紹介されています。

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.

商品詳細ページの商品選択部分について、

添付のようなにデザインを変更したいです。

(バリエーションごとにカートに追加するが表示されるイメージです。在庫切れの場合は[Sold Out]を表示したいです。)

shopifyを使用するのが今回が初めてで、

HTML/CSSの基本は理解しておりますが、LIQUIDはあまり知識がございません。

該当ショップのテーマは「Dawn」を使用しております。

よろしくお願いします。

実装したことはありませんが、恐らく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

」あたりのワードで探すと他にもある程度見つかると思います。

■テーマで対応する

あるのかどうか不明ですがご要望の機能を持つテーマを探すことも検討できます。

■依頼する

自力で対応不可の場合はエキスパートやパートナーに依頼されることをお勧めします。