Hello,
we recently changed from the Debut Theme to Dawn. The Terms and Conditions Checkbox on the Cart page in Debut has not been taken over to Dawn.
The Tutorial https://community.shopify.com/post/614939 that I used to install the checkbox in Debut specifies the codes files to be adapted.
In the Dawn Theme, I don’t find these same code files. My question: Which code files have to be adapted with which programming?
Tank you by forward.
Hey there, @Soran . Thanks so much for reaching out to the Shopify Community with your question here. I’m happy to spend some time chatting with you about your Terms and Conditions box for your Dawn theme.
Great work following along with those instructions in that other post to get a box added to your Debut theme! Some folks have difficulties reading through the coding related to themes, so it’s great to hear you were able to get that box created.
With the Dawn theme being newer than our Debut theme, it is likely that those previous instructions won’t be too relevant when being followed. However, since both themes are made by Shopify, there is a chance our Theme Specialists could assist you with this customization. I recommend that you reach out to our Support Team via the Help Portal, and speak to them about some potential assistance from us when it comes to making this change.
Another alternative is third party applications. I have two suggestions here that you can look into for having this box be a part of your cart page. One app option is free, while the other has a free-trial and some payment options:
If you have any follow up questions for me, feel free to follow up with me here!
Hi Soran,
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
Hi! We just added this code to our website this morning and works great (thank you!), but it’s automatically checking the box instead of allowing the customer to manually select it during checkout. Is there an easy way to fix this? Thanks. 
You’re welcome Alex! Thanks for bringing this up, sorry I didn’t notice my mistake in the code previously. You can edit the third line of the cart-termsbox.liquid (snippet), and change it into this :
<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] != empty and cart.attributes[block.settings.internal_label] != "No" %} checked{% endif %} form="cart">
This should make the checkbox not checked by default, please let me know if this works for you.
Thanks. I tried it but it’s not working. I looked over the line of code and it appears to be the same as the original.
I added a check for if the cart attributes is empty or not (for storing that the customer has checked the checkbox), in the previous code, I will look into it in the future.
Try using this line to replace the third line just now :
I have removed the “checked” condition, which means the checkbox will never be checked on the initial state, can you try this and see if it works?
Happy to help, you’re welcome!
Thanks Axel !
Hey there, @soulchild37 . Imogen from Shopify here!
Thanks for taking the time to jump into this thread and provide a coding solution to this request! Definitely appreciate it when Partners like you take the time to look out for merchants and provide them with a solution! As Shopify Support Staff aren’t trained in coding, it’s awesome when a Partner is able to positively impact the Shopify Community with their skillset.
I’m going to go ahead and mark this reply as a solution for this thread, so that future users and question-askers can quickly find your post!
Thanks again for keeping the Shopify Community great!
The Terms checkbox is checked by default. How do I make it unchecked by default?
anyone? Bueller?
I made a very straightforward and clean way to add the t&c checkbox in the cart. Watch it here https://youtu.be/smyIqWWuZvs?si=zTz323LuzUN9njXW
Hi, Thank you so much for this code. I have managed to implement it perfectly. However, as I was testing my site today I noticed an issue. When I send a customer an “items left in cart” email, there’s a checkout link in the mail and it goes directly to the checkout page, so you don’t see the page with the terms and conditions checkbox. Can you add a code to fix this? Your support is truly appreciated.
Hi,
How would I add this same functionality to a product page. I’d like to require folks to check that they’ve read terms and conditions before they are allowed to add products to their cart or pay using ShopPay. How would I modify the code so that I could do this?
Thanks!
