Skip to product information
1 of 1
Published:2023.06.07

How to display checkboxes on the product details screen of the Shopify theme "Dawn" and enable the purchase button when all are checked

How to display checkboxes on the product details screen of the Shopify theme "Dawn" and enable the purchase button when all are checked

  • Product information management and editing
  • LIQUID
  • Javascript
  • HTML/CSS
View full details

We are sometimes asked to set a checkbox on the Shopify product screen so that the product cannot be purchased (cannot be added to the cart) if it is not checked. The setting method differs depending on the theme, but here is an example of the setting for the Dawn theme.


Setup Step 1: Add the scheme to "main-product.liquid" and the label to "ja.schema.json"


Step 2: Modify the code in "main-product.liquid"


Setup Step 3: Add the "Checkbox before purchase" block in the product information section of the product template


After making a purchase (all items are ¥0), you will be able to view the sample code.

If you have already made a purchase, please login here.

Sample Codes

Test Theme :Dawn/Rise 15.2.0

Add scheme to "main-product.liquid"

{
	"type": "pre_purchase_checkbox",
	"name": "t:sections.main-product.blocks.pre_purchase_checkbox.name",
	"limit": 3,
	"settings": [
	  {
	    "type": "textarea",
	    "id": "checkbox_label",
	    "default": "20歳以上です。この商品を購入することができます。",
	    "label": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_label.label",
	    "info": "t:sections.main-product.blocks.pre_purchase_checkbox.settings.checkbox_label.info"
	  }
	]
},


Related Post