Streamline Custom Product Orders: Adding Required Terms Checkboxes to Shopify Products

Okay, store owners, let's dive into a topic that pops up surprisingly often in the Shopify community: how to add a mandatory "terms and conditions" checkbox to certain products without turning your store into a coding nightmare or messing up your beloved product variants. This is a real pain point, and a recent thread with `offroadjim` really highlighted the community's expertise in tackling it head-on.

The Challenge: Mandatory Terms for Specific Products

`offroadjim` came to the community with a clear need: they were running an Athens theme store and needed a "terms-required checkbox" on about 50 specific products. The catch? They absolutely had to keep using Shopify’s built-in variants, and their existing product options app wasn't cutting it because it forced them into creating a separate option set for each product, which then broke their variant images. Sound familiar? It’s a classic scenario where a one-size-fits-all app might not quite fit your unique business flow.

`offroadjim` wanted something specific:

(Checkbox) - I Agree With The Below Terms and Conditions

Displayed below it - "By placing this order, I acknowledge that this item is custom-made to order and is non-returnable, non-exchangeable, and not eligible for store credit. All sales are final. Production time for this custom item is currently 10–12 business days. Once the order has been accepted into production, it cannot be cancelled. This product is excluded from our Free Shipping offer."

And critically, the product shouldn't be added to the cart if the checkbox wasn't ticked, and the acceptance needed to show up on the order details.

Community to the Rescue: Code-Based Solutions Take Center Stage

Initially, `offroadjim` tried a few suggestions but ran into trouble, with products still adding to the cart even without the checkbox being checked. This is where the community really shone, with experts like `ajaycodewiz`, `Moeed`, `devcoders`, and `Custom-Cursor` stepping in to offer robust, code-based solutions. The consensus quickly formed: using product tags with a custom Liquid and JavaScript snippet was the most flexible and reliable way to go.

This approach lets you maintain Shopify’s native variants and apply a required terms checkbox only to the products that need it, without the overhead of a complex app that might conflict with your theme or other functionalities.

How to Implement a Required Terms Checkbox (The Code Way)

The solution that ultimately worked perfectly for `offroadjim` was a comprehensive code snippet shared by `ajaycodewiz`. It involves adding a `Custom liquid` block to your product template and leveraging product tags to control where it appears.

Here’s a step-by-step guide to get this working in your store, based on `ajaycodewiz`'s tested method for the Athens theme (but easily adaptable for most themes):

Step 1: Tag Your Products

First, you need to tell Shopify which products require this checkbox.

  1. Go to your Shopify Admin and navigate to Products.
  2. Select the 50 (or however many) products that need the terms checkbox.
  3. Click More actions > Add tags.
  4. Type terms-required (or any other descriptive tag you prefer) and click Add, then Save.

Select the products and choose Add tags

Create the terms-required tag

Step 2: Add the Custom Liquid Code to Your Product Template

This is where the magic happens.

  1. From your Shopify Admin, go to Online Store > Themes.
  2. Find your current theme, click Actions > Customize.
  3. In the theme editor, navigate to a product page (you might need to select a product that has the `terms-required` tag).
  4. In the left sidebar, under Product information, click Add block.
  5. Search for and select Custom liquid (it might just be called "Liquid" in some themes).
  6. Add block, then pick Custom liquid

  7. Set the Position of this new block to Right (this helps it sit nicely with your buy buttons, as `ajaycodewiz` noted for Athens). Leave Heading and Icon empty.
  8. Paste the code, set Position to Right

  9. Drag this Custom liquid block in the block list so it sits just above your Buy buttons block.
  10. Paste the following code into the Custom liquid field:
  11. {% if product.tags contains 'terms-required' %}
    
    {% endif %}
  12. Customize the text and link: In the code, find the line:
    I have read and agree to the Terms and Conditions.
    You can replace "I have read and agree to the Terms and Conditions." with `offroadjim`'s desired checkbox text: "I Agree With The Below Terms and Conditions". You'll also want to update the `href` to your actual terms page or any relevant policy.
  13. Add the full terms text: To display the detailed terms below the checkbox, as `offroadjim` wanted, you can add another `` or `

    ` tag right after the `

    ` if you want it outside the label structure. For example:

    By placing this order, I acknowledge that this item is custom-made to order and is non-returnable, non-exchangeable, and not eligible for store credit. All sales are final. Production time for this custom item is currently 10–12 business days. Once the order has been accepted into production, it cannot be cancelled. This product is excluded from our Free Shipping offer.

    Notice the `name` attribute in the `input` tag. `ajaycodewiz` pointed out that changing `name="properties[Terms accepted]"` to `name="properties[I Agree With The Below Terms and Conditions]"` makes the order display exactly what you want!
  14. Save your changes.

This code snippet works by adding a `terms-locked` class to the `` element, which then uses CSS to make the "Add to Cart" and payment buttons (like Shop Pay) visually disabled and unclickable until the checkbox is checked. It also displays a clear error message.

Here’s what you should see on your product page:

Add to cart blocked while the box is unticked

Ticking the box unlocks both buttons

And yes, `ajaycodewiz` confirmed it! The terms acceptance does come through on the order, appearing in the same block as your other product properties. If you use the modified `name` attribute as shown above, it will read exactly as "I Agree With The Below Terms and Conditions: Yes" on the order.

Order in admin: the terms acceptance on the line item

The App Alternative: When Code Isn't Your Comfort Zone

While the code solution proved successful for `offroadjim`, it's totally understandable if diving into Liquid, CSS, and JavaScript isn't your cup of tea. For those who prefer a no-code approach, a dedicated "terms/confirmation checkbox" app can be a fantastic alternative.

`Easify-Jennifer` from Easify Custom Product Options highlighted how their app could tackle this, allowing you to create a required checkbox option once and then apply it to specific products. The key here is using an app designed for checkboxes or custom options, rather than a general product options app that might interfere with your variant setup, as `offroadjim` initially experienced. These apps often integrate seamlessly, preserve your native variants and images, and offer a user-friendly interface for managing your terms.

image

image

image

Ultimately, whether you choose the DIY code route or a dedicated app, the key is finding a solution that fits your technical comfort level and your store's specific needs without compromising core Shopify functionalities like variant images. The beauty of the Shopify ecosystem and its vibrant community is that there's almost always a way to make your store work exactly how you envision it, even for niche requirements like a mandatory terms checkbox. If you're looking to start your own store and need this kind of flexibility, remember that Shopify offers robust customization options right out of the box, with a community ready to help you navigate them.

Share:

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools