Users are seeking to add a mandatory ‘Terms and Conditions’ checkbox to the checkout process in Shopify’s Dawn theme, but struggle to find the necessary files referenced in older tutorials.
Common Challenges:
Solutions Offered:
Code Implementation: One contributor shared detailed code for adding a checkbox to the cart page using Dawn’s section block feature, including:
App Alternative: Some users opted for the ‘Terms and Conditions in Cart’ app as an easier solution
Ongoing Issues:
The discussion remains active with users troubleshooting implementation problems and requesting additional customization guidance.
Hi all,
I try to add a ‘Terms and conditions’ Checkbox to my checkout. I already found another article here in the community:
But I can not find these files in my DAWN Theme. Does anybody has a solution and can help?
Domain: www.pua-home.com
Thank you in advance.
Best regards,
Ronny
Ugh yes need help too! All the articles say to add it to assets, theme.js, but my dawn theme doesnt have that… help!
+1 for this … how difficult is it to do the most basic of customizations on Shopify lol
For anyone else that came across this, I ended up using the app
https://apps.shopify.com/terms-and-conditions-in-cart
Would prefer to just code it but this does have some added functionality, so seemed easier
I have used the same app now for my checkout, but I also need checkboxes in my contact form and my customer registration. Do you have a solution for that?
I ended up hiring a developer to customise my theme. You will find this is how Shopify works, every time you need even the most basic additional function, you need to pay either for an app or a developer to add it.
Hi PuaHome,
I have just implemented the terms and conditions checkbox to cart page of Dawn theme recently, by utilizing the section block feature. (Demo below)
Here’s the code which can copy paste below.
Go to your theme editor, go to the Sections folder, and Add a new snippet file named “cart-termsbox”
And paste this code into the file :
<p class="cart-attribute__field">
<input type="hidden" name="attributes[{{ block.settings.internal_label }}]" value="No" form="cart">
<input id="termsbox_id" {% if block.settings.mandatory %}class="required" required {% endif %} type="checkbox" name="attributes[{{ block.settings.internal_label }}]" value="Yes" {% if cart.attributes[block.settings.internal_label] != "No" %} checked{% endif %} form="cart">
<label for="termsbox_id" style="cursor: pointer;">
{{ block.settings.prelink_text }}
<a href="{{ block.settings.terms_page.url }}" target="_blank">{{ block.settings.link_text }}</a>
{{ block.settings.postlink_text }}
</label>
</p>
<style>
#termsbox_id {
transform: scale({{ block.settings.checkbox_scale }});
}
{% if block.settings.mandatory %}
#dynamic-checkout-cart, [name="checkout"][type="submit"] {
{% if cart.attributes[block.settings.internal_label] != "No" %}
pointer-events: auto;
opacity: 1.0;
{% else %}
pointer-events: none;
opacity: 0.5;
{% endif %}
}
{% endif %}
</style>
<script>
document.getElementById('termsbox_id').addEventListener('change', (event) => {
if (event.currentTarget.checked) {
document.getElementById("termsbox_id").value = "Agreed at " + (new Date()).toLocaleString();
{% if block.settings.mandatory %}
document.querySelector('[name="checkout"][type="submit"]').style.pointerEvents = 'auto';
document.querySelector('[name="checkout"][type="submit"]').style.opacity = 1.0;
document.getElementById('dynamic-checkout-cart').style.pointerEvents = 'auto';
document.getElementById('dynamic-checkout-cart').style.opacity = 1.0;
{% endif %}
} else {
{% if block.settings.mandatory %}
document.querySelector('[name="checkout"][type="submit"]').style.pointerEvents = 'none';
document.querySelector('[name="checkout"][type="submit"]').style.opacity = 0.5;
document.getElementById('dynamic-checkout-cart').style.pointerEvents = 'none';
document.getElementById('dynamic-checkout-cart').style.opacity = 0.5;
{% endif %}
}
})
</script>
Next, search for “main-cart-footer” file (located in sections/main-cart-footer), scroll to the bottom, and add the following code right before the { “type”: “@app” } part :
{
"type": "termsbox",
"name": "Termsbox",
"limit": 1,
"settings": [
{
"id": "prelink_text",
"type": "text",
"label": "Text before the link to the terms",
"default": "I have read"
},
{
"id": "link_text",
"type": "text",
"label": "The link text of the terms",
"default": "Terms and Conditions"
},
{
"id": "postlink_text",
"type": "text",
"label": "Text after the link to the terms",
"default": " and agree"
},
{
"id": "terms_page",
"type": "page",
"label": "Terms and Conditions page"
},
{
"type": "range",
"id": "checkbox_scale",
"min": 1,
"max": 3,
"step": 0.1,
"label": "Checkbox size",
"default": 1.2
},
{
"type": "checkbox",
"id": "mandatory",
"label": "Customer must check the checkbox to checkout",
"default": true
},
{
"id": "internal_label",
"type": "text",
"label": "Internal label that will be shown in the order's Additional Details",
"default": "Customer agreed to terms"
}
]
},
Then on the same file, you can add the following code, after the render block line that is below "when ‘@app’ ":
{%- when 'termsbox' -%}
<div {{ block.shopify_attributes }}>
{% render 'cart-termsbox' , block: block %}
</div>
Then after saving, you can go to your Shopify Admin, select the theme and click “Customize” , then navigate to the Cart page :
In the “Subtotal” sections on the left side bar, you can click “Add block”, and select “Terms box” (which is the snippet code you have added earlier) :
You can then edit the text for the checkbox, and click Save :
You would have to ensure customer can only checkout from the cart page, which means you have uncheck the “dynamic checkout button” on the product page in the Theme customize, and also change the “Cart type” to either “Popup” or “Page” in the Theme settings (the settings icon on left side bar in theme customize)
I have written a more detailed guide with screenshots on how to add this checkbox here : https://yagisoftware.com/articles/how-to-add-agree-to-terms-and-conditions-checkbox-in-shopify
Hope this can help!
Regards,
Axel Kee
Hello, I use the DAWN theme.
Is there a way for the terms and conditions checkbox to also be on cart type: side, not just cart type: page and popup notification.
Currently I have the terms and conditions checkbox only in cart type: page and popup notification, but I want it to also appear in cart type: side
Additionally, I want to change the color and underlining of the terms and conditions text.
How to remove the underline from the product name and shipping text in the cart.
Thanks, I’ll be attentive.
Thanks for the recommendation, this worked for me 
Hey @PuaHome , want to include a ‘Agree to Terms and Conditions’ checkbox in your Shopify cart without relying on apps? Watch this helpful tutorial: https://www.youtube.com/watch?v=smyIqWWuZvs
Thanks for the code. I implemented it but still does not work for me… This is driving me crazy, I tried everything, codes, app and support. My issue is whatever I do, the checkout button will no matter what take the customer to checkout page without the check box. The check box appears and when not checked there is a little message saying you need to check it but it still then proceeds to go to checkout page
