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

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

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

用途

  • 商品情報管理・編集

実装方法

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

Shopifyの商品ページにチェックボックスを追加し、チェックを入れないと購入できないようにする実装例です。この設定では、1つのブロックにつき最大3つの項目を設定でき、さらに特定のタグが付いた商品にのみ適用することが可能です。


テーマ「Dawn」でチェックボックスを表示し全てチェックされた時に購入ボタンを有効にするようにする方法(その2)


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


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


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


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

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

サンプルコード

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

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

関連ポスト