Adding a required checkbox in custom checkout.liquid on Shopify Plus store

Store Design
1

Hello there,

I want to add a required checkbox field in the shopify plus store from the checkout.liquid file which is already enabled.

The customer must tick the checkbox in order to complete the order. I did not find any tag in the checkout.liquid file to make this field required and submitted.

Please share the possible solution or code on this issue.

2

I would add a javascript to check if the box is checked and if not pop a message and prevent going to the next section.

Here’s how I would do it:

  1. Create the checkbox:

  2. Add an empty div for an error message that triggers if they don’t check it and try to proceed

  3. Add an event listener on whatever the action button on the page is, and on clicking that check to see if the box is checked, if not then reveal the error message.

If you need help implementing that feel free to reach out to my team of Shopify developers at speedboostr.com/contact.

1 Like
3

Is this code on the checkout.liquid page going to prevent the order from being processed until the checkbox is ticked? Please share your suggestions.

HTML Part:

I confirm that I am over 16 years old.*

JS Part:

4

@musfiq11 that looks like it would create a browser default popup if not checked, but you’d have to test that in your site environment to be 100% sure. You should test your site any time you make a code change to make sure everything’s all good.

In this case, apply your code to a duplicate theme then preview it to make sure it looks good and works properly. If it doesn’t work, check the dev tools console for errors (if you’re not familiar with console errors this guide will help you: https://speedboostr.com/finding-and-fixing-console-errors/).

I recommend always editing code on a backup theme, this preserves your live site and saves you if your code causes problems.