商品情報にスキップ
1 1
公開日:2023.06.07

Shopifyのテーマ「Dawn」の商品詳細画面でチェックボックスを表示し、全てチェックされた時に購入ボタンを有効にする方法

Shopifyのテーマ「Dawn」の商品詳細画面でチェックボックスを表示し、全てチェックされた時に購入ボタンを有効にする方法

用途

  • 商品情報管理・編集

実装方法

  • LIQUID
  • Javascript
  • HTML/CSS
詳細を表示する

Shopifyの商品画面でチェックボックスを設置し、チェックされていない時は商品を購入できない(カートに追加できない)ようにしてほしいという依頼をいただくことがあります。テーマによって設定方法は異なるのですが、テーマDawnでの設定例です。


設定手順①「main-product.liquid」にschemeを、「ja.schema.json」にラベルを追加


設定手順②「main-product.liquid」のコードを修正


設定手順③商品テンプレートの商品情報セクション内の「購入前チェックボックス」ブロックを追加


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

「main-product.liquid」にschemeを追加


<...
関連ポスト