Shopify themes, liquid, logos, and UX
You can add an I agree with the terms and conditions checkbox to your cart page that customers must check before continuing to the checkout. If a customer doesn't check the checkbox before clicking the checkout button, an alert pop up will prevent them from continuing.
Tip: It's not possible to add the checkbox to the checkout pages. It can be added only to the cart page that exists at http://www.your-shop-URL.com/cart.
The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.
To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.
If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.
TyW | Online Community Manager @ 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
theme.js
or theme.js.liquid
.theme.min.js
.$(document).ready(function() { $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() { if ($('#agree').is(':checked')) { $(this).submit(); } else { alert("You must agree with the terms and conditions of sales to check out."); return false; } }); });
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.<button>
or an <input>
element with the name attribute set to checkout. The code might look something like this:<button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>On a new line above the checkout button, paste the following code:
<p style="float: none; text-align: right; clear: both; margin: 10px 0;"> <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" /> <label style="display:inline; float:none" for="agree"> I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>. </label> </p>
/pages/terms-and-conditions
with the URL of your terms and conditions page.If you use Debut version 17.3.0 or higher, you will need to add JQuery to your theme.liquid file in the Layout directory.
</head>
.</head>
, paste the following code:<link rel="preload" href="https://code.jquery.com/jquery-2.2.4.min.js" as="script">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
If you use Boundless, you will also need to add the checkbox code to your theme.liquid
file in the Layout directory.
theme.liquid
file, find this line of code:<button type="submit" class="btn btn--full cart__checkout" name="checkout">
<p style="float: none; text-align: right; clear: both; margin: 10px 0;"> <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" /> <label style="display:inline; float:none" for="agree"> I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>. </label> </p>
/pages/terms-and-conditions
with the URL of your terms and conditions page.If you use Brooklyn, you will need to add the checkbox code to your ajax-cart-template.liquid
file in the Snippets directory.
ajax-cart-template.liquid
file, find this line of code:<button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
<p style="float: none; text-align: right; clear: both; margin: 10px 0;"> <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" /> <label style="display:inline; float:none" for="agree"> I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>. </label> </p>
/pages/terms-and-conditions
with the URL of your terms and conditions page.theme.js.liquid
. Find this line of code:theme.checkoutIndicator();Replace it with:
// theme.checkoutIndicator();
If you've added checkout buttons other than PayPal to your cart page, then the terms and conditions checkbox won't work properly. For example, if you have the Pay with Amazon button on your cart page, then your customers will be able to click it and check out without agreeing to your term and conditions.
If you have a payment option that has its own checkout button, other than PayPal, you will have to remove the additional checkout buttons from the cart page. After customers have checked the checkbox you've added and reached the checkout, they will still be able to select the additional payment option from the Payment method page.
cart-template.liquid
.{% if additional_checkout_buttons %} <div>{{ content_for_additional_checkout_buttons }}</div> {% endif %}
{% comment %}
and {% endcomment %}
tags. This will stop the code from being shown on your store, and you can easily add it back if you want to change your new template later. Your code should look like this:{% comment %} {% if additional_checkout_buttons %} <div>{{ content_for_additional_checkout_buttons }}</div> {% endif %} {% endcomment %}
If you are having trouble getting the 'Agree to terms and conditions' checkbox to work, then confirm that your theme is using a jQuery version of 1.7 or newer. If your theme is running a version of jQuery that is older than 1.7, then you can edit your theme code to use a supported version instead.
theme.liquid
.<head>
element, find a script tag that references your theme's jQuery source. The src
attribute for the script tag contains a URL that includes /jquery/
, followed by the version number. The tag looks something like this:<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
In the script tag above, the jQuery version being used is 1.4.2
. This is an older version of jQuery that will need to be updated for the customization to work. If your theme is using a version that is older than 1.7, replace the version number in the URL with 1.7
. The result should look like this:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
TyW | Online Community Manager @ 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
theme.liquid
.</body>
tag near the bottom of the file.</body>
tag, paste the following code:<script> $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() { if ($('#agree').is(':checked')) { $(this).submit(); } else { alert("You must agree with the terms and conditions of sales to check out."); return false; } }); </script>
cart.liquid
.<button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>
<p style="float: none; text-align: right; clear: both; margin: 10px 0;"> <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" /> <label style="display:inline; float:none" for="agree"> I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>. </label> </p>
/pages/terms-and-conditions
with the URL of your terms and conditions page.If you use Boundless, you will also need to add the checkbox code to your theme.liquid
file in the Layout directory.
theme.liquid
file, find this line of code:<button type="submit" class="btn btn--full cart__checkout" name="checkout">
<p style="float: none; text-align: right; clear: both; margin: 10px 0;"> <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" /> <label style="display:inline; float:none" for="agree"> I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>. </label> </p>Within the code you just pasted, replace
/pages/terms-and-conditions
with the URL of your terms and conditions page.If you use Brooklyn, you will need to add the checkbox code to your ajax-cart-template.liquid file in the Snippets directory.
ajax-cart-template.liquid
file, find this line of code:<button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout">
<p style="float: none; text-align: right; clear: both; margin: 10px 0;"> <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" /> <label style="display:inline; float:none" for="agree"> I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>. </label> </p>
/pages/terms-and-conditions
with the URL of your terms and conditions page.theme.js.liquid
. Find this line of code:theme.checkoutIndicator();Replace it with:
// theme.checkoutIndicator();
If you've added checkout buttons other than PayPal to your cart page, then the terms and conditions checkbox won't work properly. For example, if you have the Pay with Amazon button on your cart page, then your customers will be able to click it and check out without agreeing to your term and conditions.
If you have a payment option that has its own checkout button, other than PayPal, you will have to remove the additional checkout buttons from the cart page. After customers have checked the checkbox you've added and reached the checkout, they will still be able to select the additional payment option from the Payment method page.
cart.liquid
.{% if additional_checkout_buttons %} <div>{{ content_for_additional_checkout_buttons }}</div> {% endif %}
{% comment %}
and {% endcomment %}
tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later. Your code should look like this:{% comment %} {% if additional_checkout_buttons %} <div>{{ content_for_additional_checkout_buttons }}</div> {% endif %} {% endcomment %}
If you are having trouble getting the 'Agree to terms and conditions' checkbox to work, then confirm that your theme is using a jQuery version of 1.7 or newer. If your theme is running a version of jQuery that is older than 1.7, then you can edit your theme code to use a supported version instead.
theme.liquid
.<head>
element, find a script tag that references your theme's jQuery source. The src
attribute for the script tag contains a URL that includes /jquery/
, followed by the version number. The tag looks something like this:<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>In the script tag above, the jQuery version being used is
1.4.2
. This is an older version of jQuery that will need to be updated for the customization to work. If your theme is using a version that is older than 1.7, replace the version number in the URL with 1.7
. The result should look like this:<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
TyW | Online Community Manager @ 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
Hi,
I am using Debut theme and I could not get it working with the gived guidelines. Anything specific I should do when using Debut theme?
The button now shows on my site, but it can be bypassed by either not simply marking the box or clicking buy it now button.
Used the sectioned Theme instructions and everything worked, except for the warning doesn't pop up. You can still check out without selecting you agree. Any advice on this? I'm using the Block Shop Theme. This is what I found.
//<script type="text/javascript">
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 1200;
window.lazySizesConfig.loadMode = 3;
window.lazySizesConfig.ricTimeout = 50;
</script>
{{ 'lazysizes.min.js' | asset_url | script_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js' | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{% if template contains 'customers' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{{ 'customer_area.js' | shopify_asset_url | script_tag }}
{% endif %}
<script>//
thank you for this helpful tutorial 🙂
thank you for this helpful tutorial, saved me some money 🙂
I have the same issue when using Debut theme. Everything appears to look fine, but the logic is faulty.
If a customer does not select "I Agree" they can still click checkout and be directed straight to checkout with no pop up.
A solution to this would be much appreciated!
Good morning,
It seems as if the line was missing the required="required" in the line for the cart.liquid. It's working for me now. Try this.
Original:
<p style="float: none; text-align: right; clear: both; margin: 10px 0;"> <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" /> <label style="display:inline; float:none" for="agree"> I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>. </label> </p>
Updated with required added ----- USE THIS BELOW:
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="Replace with your link to terms and conditions here">terms and conditions</a>.
</label>
</p>
Hello Thank you for commenting on the article, it did not work for me also, I did follow your adjustments and was still not able to get the "required" portion to work out. Would you be able to assist me that? That would seriously be awesome thank you!
Hi, the info for the Brooklin theme does not match to the code. Why is it so ? I need a solution to this subject. I can not edit the code due to this problem.
Can you paste the 2 sections here?
Can you add the 2 sections here?
Just want to say to all, if you are from Germany.
This tutorial is useless, because the ckeckbox appears on cart, but not on the last step of checkout.
I spend some hours to realize that I'am working on cart-template and this file is not the checkout page, on which I test it and refresh it like idiot.
Ckeckout page appears if the buyer clicks "buy now" button and goes thru many pages with forms.
And according to german laws this checkbox muss be near of the "complete order" button on the last step.
Thanks! This worked great in my debut theme but I'm having an issue with adding it to the line above the checkout button. I tried adding a <p> and a <br> right before the input tag but it doesn't seem to be working.
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
I agree with the <a href="/pages/terms-and-conditions">terms and conditions. </a>
<br>
<p></p>
</label>
<input type="submit" name="checkout"
class="cart__submit btn btn--small-wide"
value="{{ 'cart.general.checkout' | t }}">
</div>
What if there is no theme.js or theme.js.liquid file and only a theme.min.js file?
Please can I have some assistance with this.
Hi, I followed the tutorial and everything is great, except for one thing. If I use internet explorer to reach the shop, in the shopping cart page the checkout button vanishes and doesn't work properly. The popup for consent doesn't come out and you can't finalize the payment
Hi Kalobyte,
as i am intergrating the buy button in our wordpress page, could you tell me how you solved to implement this at the last page (complete order?)
Thanks a lot and greetings from germany
I am using the Venture theme and I had noticed this and changed it to required but you are still able to bypass the checkbox. Any other solutions to fixing this problem?
The logic makes sense it just doesn't want to work! So frustrating!
User | RANK |
---|---|
220 | |
151 | |
60 | |
54 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023