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

[Renster]

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!!

[Elias · 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?

[soulchild37]

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)



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

[Rob-C]

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]

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 [email protected] .

[Carllombardi]

Good Afternoon----

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

[BelgiumBaitShop]

Hi, is it possible to show on cart drawer? I got it to work on the cart page but I am using the drawer. There does not seem to be a way to customize the drawer cart with blocks

[MKSCshop]

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

[nhcon]

Hello. Do you know how to add the snippet without using the Customizer. Meaning just in the liquid files, without using the "Add Block" in the theme editor. Only using code.

[KabirDev]

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

[RayErogan]

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

[nhcon]

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

[BelgiumBaitShop]

Hi, this worked for me. 

<p class="cart-attribute__field">
  <input type="hidden" name="attributes[Akkoord gegaan met voorwaarden]" value="No" form="cart">
  <input id="termsbox_id" class="required" required type="checkbox" name="attributes[Akkoord gegaan met voorwaarden]" value="Yes" form="cart">
  <label for="termsbox_id" style="cursor: pointer;">
    Ik ga akkoord met de <a href="/pages/algemene-voorwaarden" target="_blank">Algemene Voorwaarden</a> en het <a href="/pages/herroepingsrecht" target="_blank">Retourbeleid</a>
  </label>
</p>

<style>
  #termsbox_id {
    transform: scale({{ block.settings.checkbox_scale }});
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const checkbox = document.getElementById('termsbox_id');
    const submitButton = document.querySelector('[name="checkout"][type="submit"]');
    const dynamicCheckoutCart = document.getElementById('dynamic-checkout-cart');

    checkbox.checked = false;
    submitButton.disabled = true;

    checkbox.addEventListener('change', function(event) {
      const isChecked = event.target.checked;

      if (isChecked) {
        checkbox.value = "Agreed at " + (new Date()).toLocaleString();
        submitButton.disabled = false;
        if (dynamicCheckoutCart) {
          dynamicCheckoutCart.style.pointerEvents = 'auto';
          dynamicCheckoutCart.style.opacity = 1.0;
        }
      } else {
        submitButton.disabled = true;
        if (dynamicCheckoutCart) {
          dynamicCheckoutCart.style.pointerEvents = 'none';
          dynamicCheckoutCart.style.opacity = 0.5;
        }
      }
    });
  });
</script>

and I added it to the cart-drawer.liquid like this: 

<p class="totals__total-value">{{ cart.total_price | money_with_currency }}. </p>
          </div>



{% # I added the render code here %}
          <div {{ block.shopify_attributes }}>
            {% render 'cart-termsbox' , block: block %}
          </div>

And this works fine for me. The checkbox is unchecked by default and customers need to check it in order to make a payment. To Use it in the drawer however I needed to hardcode the values as seen above. You can change them by the ones you need. I used chatgpt to do this work for me. 

If any suggestions or comments. Please feel free to ask!