Re: Cart - Add an 'Agree to terms and conditions' checkbox
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.
I added the codes to my my Dawn Theme and able to see the terms and conditions box, but it is not alligned properly, how to allign it? Also the Check out Box became more height
Please help me
Hi everyone,
The question above is kind of old but in case someone comes across this same issue, I'm also using the Dawn theme, I solved it by placing the code that goes in the main-cart-footer.liquid just at the end of the section that begins with <small class="tax-note caption-large rte">, as follows:
And the checkbox looks like this:
Mike
Hi Rasmus,
Yes, I added the code just before the </div> tag, as you can see below I placed it several lines before the line
<button type="submit" id="checkout" class="cart__checkout-button button"...
as follows:
Other suggestions I took to deal with the issue that it was possible to click on the Checkout button even if the checkbox was not selected were the following:
- Create custom.js in Assets and put in there the code that was supposed to go in theme.js or theme.js.liquid.
- Add the following in theme.liquid just before the </head> tag :
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
{{ 'custom.js' | asset_url | script_tag }}
After those changes it look like this in my case:
I hope it helps,
Mike
Hello. I'm not an expert but reading all of the replies in here, I was able to do it on my Narrative theme.
I followed the steps posted here but I did some modifications to make it work on my theme.
I repeat, I"M NOT AN EXPERT I JUST DID THIS ON MY OWN haha! It may or may not work for you.
So here it is...
First, I put these codes on my custom.js and NOT in the theme.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;
}
});
});
Second, my cart is a drawer, so I also put these codes on my cart-drawer.liquid. Not just on my cart-template.liquid.
NOTE: THESE CODES ARE MODIFIED. NOT THE ONE ORIGINALLY POSTED AT THE TUTORIAL.
I added attribute to the <a> tag. So my T&C will open as a POPUP.
If you want to open it in a NEW TAB instead, just change the target="popup" to target="blank" and remove the following words up to false;.
I also added a style property inside the <a> tag with the color that I want for the link. You can remove it or change it whatever you like.
<p style="text-align: center"; 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="/pages/terms-conditions" target="popup" onclick="window.open('http://alibaby.ph/pages/terms-conditions','popup','width=600,height=600'); return false;" style="color: #ff8da0">terms and conditions</a>.
</label>
</p>
These are the results:
BONUS:
I tried adding the same codes on my customers/register.liquid and voila! IT WORKED! LOL.
I added some style to make it centered.
This is how my liquid file looked like.
<!-- /templates/customers/register.liquid -->
<div class="page-width customers-register">
<div class="grid">
<div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
<div class="customers-register__container">
<h1 class="customer-form__title h2" style="text-align: center">{{ 'customer.register.title' | t }}</h1>
{% form 'create_customer' %}
{{ form.errors | default_errors }}
<div class="grid">
<div class="grid__item medium-up--one-half">
<label for="FirstName" class="label--hidden">{{ 'customer.register.first_name' | t }}</label>
<input type="text" name="customer[first_name]" id="FirstName" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus>
</div>
<div class="grid__item medium-up--one-half">
<label for="LastName" class="label--hidden">{{ 'customer.register.last_name' | t }}</label>
<input type="text" name="customer[last_name]" id="LastName" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words">
</div>
</div>
<label for="Email" class="label--hidden">{{ 'customer.register.email' | t }}</label>
<input type="email" name="customer[email]" id="Email" class="{% if form.errors contains 'email' %} input--error{% endif %}" placeholder="{{ 'customer.register.email' | t }}" {% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off">
<label for="CreatePassword" class="label--hidden">{{ 'customer.register.password' | t }}</label>
<input type="password" name="customer[password]" id="CreatePassword" class="{% if form.errors contains 'password' %} input--error{% endif %}" placeholder="{{ 'customer.register.password' | t }}">
<p style="text-align: center"; 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="/pages/terms-conditions" target="popup" onclick="window.open('http://alibaby.ph/pages/terms-conditions','popup','width=600,height=600'); return false;" style="color: #ff8da0">terms and conditions</a>.
</label>
</p>
<p style="text-align: center">
<input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
<a href="{{ shop.url }}" class="btn btn--clear">{{ 'customer.register.cancel' | t }}</a>
</p>
{%endform%}
</div>
</div>
</div>
</div>
And this is the actual result:
THAT'S ALL! I HOPE THIS COMMENT HELPED YOU ON YOUR NARRATIVE THEME AS WELL! YOU CAN PRIVATE MESSAGE ME IF YOU HAVE QUESTIONS! THANKS!
Community Blog Articles
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025