Solved

Dawn Theme - How To Add Terms Conditions Checkbox To Cart?

Renster
Visitor
2 0 0

Hello! I have searched the forum and found the guide for adding the T&Cs checkbox to the cart, however the instructions aren't meshing with the files in the Dawn theme I'm using...

 

https://community.shopify.com/c/shopify-design/cart-add-an-agree-to-terms-and-conditions-checkbox/m-... 

 

For example, step 1 of the "sectioned theme" instructions says to edit theme.js or theme.js.liquid in the Assets folder - the only theme*.* file in my assets folder is theme-editor.js. I do have a theme.liquid file in my Layout folder. Those are my only 2 theme* files - and so I'm not sure which one to edit.

 

Step 2 says "In the Sections directory, click cart-template.liquid. If there is no cart-template.liquid file in the Sections directory, then click cart-template.liquid or cart.liquid in the Templates directory." Of course, Dawn has none of those files in those spots... I have zero cart-template files anywhere. I have a cart.json under Templates and cart.js under Assets, but those aren't even liquid files.

 

So has anyone with Dawn theme implemented this and any tips on which files or instruction set I should follow? Thank you in advance for your insights!!

Accepted Solution (1)

Elias
Shopify Staff
2720 272 473

This is an accepted solution.

Hello, @Renster.

 

Thank you for reaching out and posting this question!

 

I've taken a look at the guide, Cart - Add An 'Agree To Terms And Conditions' Checkbox, and it looks like this tutorial is designed for our vintage themes (eg. Brooklyn, Debut, etc.). Since you're using one of our newer themes, then this tutorial wouldn't be recommended for this customization.

 

If you're looking for an easier method to add the terms and condition checkbox to the cart page, then you can consider using a third-party app, such as ROAR: Terms and Conditions Box or EZ Term and condition checkbox. Both of these apps are completely free and the app developer is always available to assist you if you need help with one of their apps - you can reach out to them directly using the contact information found in the Support section of their app's page.

 

That being said, if you prefer adding the terms and condition checkbox through custom coding, then you can see if the Shopify Community can share some insight or you may want to consider hiring a developer to assist you with this customization. If you need help finding a developer for your store, then I'd recommend taking a look at our directory of certified developers on Shopify Experts

 

I noticed that you're a new member of our Shopify Community! I'd love to hear more about your business. What kinds of products are you selling? Do you have a marketing plan prepared for your store?

 

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 9 (9)

Elias
Shopify Staff
2720 272 473

This is an accepted solution.

Hello, @Renster.

 

Thank you for reaching out and posting this question!

 

I've taken a look at the guide, Cart - Add An 'Agree To Terms And Conditions' Checkbox, and it looks like this tutorial is designed for our vintage themes (eg. Brooklyn, Debut, etc.). Since you're using one of our newer themes, then this tutorial wouldn't be recommended for this customization.

 

If you're looking for an easier method to add the terms and condition checkbox to the cart page, then you can consider using a third-party app, such as ROAR: Terms and Conditions Box or EZ Term and condition checkbox. Both of these apps are completely free and the app developer is always available to assist you if you need help with one of their apps - you can reach out to them directly using the contact information found in the Support section of their app's page.

 

That being said, if you prefer adding the terms and condition checkbox through custom coding, then you can see if the Shopify Community can share some insight or you may want to consider hiring a developer to assist you with this customization. If you need help finding a developer for your store, then I'd recommend taking a look at our directory of certified developers on Shopify Experts

 

I noticed that you're a new member of our Shopify Community! I'd love to hear more about your business. What kinds of products are you selling? Do you have a marketing plan prepared for your store?

 

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

soulchild37
Shopify Partner
163 9 46

Hi Renster,

I have just implemented the terms and conditions checkbox to cart page of Dawn theme recently, by utilizing the section block feature. (Demo below)

checkbox_demo.gif

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"
    }
  ]
},

 

 

 

 

11main-cart-footer.png


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>

 

 

12when.png

 


Then after saving, you can go to your Shopify Admin, select the theme and click "Customize" , then navigate to the Cart page : 

13cart.png

 

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) :

14add_block.png


You can then edit the text for the checkbox, and click Save :

16block_settings.png

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

Spent too much support time dealing with order cancellation request from customer? Wouldn't it be good if customer can cancel order on their own without bugging your support? Try out Cancellable app! https://apps.shopify.com/cancellable . I also write articles about store customization that can improve your customer shopping experience here : Yagi Software Blog
Rob-C
Visitor
2 0 0

This is Awesome ! Thanks @soulchild37 ! easy to follow, and the subsequent page was very helpful also. 

 

One question. I noticed the box is checked by default. is there anyway to make it unchecked by default so customers will have to check it themselves ? Are you available for future customization work ? 

soulchild37
Shopify Partner
163 9 46

Hi @Rob-C , you're welcome!

I think you have checked another post reply that have the changes to make the checkbox to be unchecked by default, but I will post it here again for future readers.

To make the checkbox become unchecked by default, go to the third line of the snippets/cart-termsbox.liquid, and replace it with this line :

<input id="termsbox_id" {% if block.settings.mandatory %}class="required" required {% endif %} type="checkbox" name="attributes[{{ block.settings.internal_label }}]" value="Yes" form="cart">

 

I am available for minor customization for store, you can reach me at axel@yagisoftware.com .

Spent too much support time dealing with order cancellation request from customer? Wouldn't it be good if customer can cancel order on their own without bugging your support? Try out Cancellable app! https://apps.shopify.com/cancellable . I also write articles about store customization that can improve your customer shopping experience here : Yagi Software Blog
Carllombardi
Shopify Partner
2 0 0

Good Afternoon----

 

This solution is perfect for me. My only request is for it to only show on certain product variations. Any tips?

MKSCshop
Tourist
10 2 3

Great! Is it possible to add this to cart-drawer ?

KabirDev
Shopify Partner
243 58 63

If anyone looking for a clean way to add the t&c checkbox in 2024, you can watch this short video https://youtu.be/smyIqWWuZvs?si=zTz323LuzUN9njXW

If my answer helps, please give it a Like and Accept as Solution.
- You can join in our Facebook group for Shopify help.
- Contact me directly at shahriar@kabirdev.com
RayErogan
Tourist
5 0 1

It works on Cart page but it does not work on Drawer. How can we make it work on drawer?

nhcon
Shopify Partner
11 0 4

Also looking for this. I haven't tinkered with it yet, but want to know if someone else has already figured this part out.