Agree to Terms Checkbox in Shopify Cart

January 16, 2024
by Shahriar Kabir

Add Agree to Terms Checkbox in Shopify Cart (No App)

Agree to Terms Checkbox in Shopify Cart to the cart page is a crucial step for any Shopify store. It ensures customers are aware of and agree to your terms before purchasing, which is important for legal compliance and transparency. In this tutorial, we will use Shopify’s Dawn theme as our example, but the process is similar for most Shopify themes.

Prerequisites of Agree to Terms Checkbox in Shopify Cart

Basic understanding of HTML and JavaScript.
Access to your Shopify store’s admin panel.
Any Shopify theme (we’ll use Dawn as an example).

If you prefer video tutorials over text, feel free to skip this post and watch the video below. If not, please continue reading.

Step 1: Accessing Your Theme Code

Log in to your Shopify admin.
Go to ‘Online Store’ > ‘Themes’.
Find your theme (Dawn, in our example), click ‘Actions’, and then ‘Edit code’.

Step 2: Locating the Cart Template

In the Dawn theme, the relevant file is main-cart-footer.liquid in the ‘Sections’ folder. For other themes, look for a similar cart template file, often named cart.liquid, cart-template.liquid, or something similar.

Step 3: Adding the Checkbox HTML

Open the cart template file (e.g., main-cart-footer.liquid in Dawn).
Locate the section where the checkout button is.
Insert the following HTML for the checkbox:

<div class="agree-to-terms" style="text-align:right;">
  <input type="checkbox" id="agree" name="agree">
  <label for="agree">I agree to the <a href="/pages/terms" target="_blank">Terms and Conditions</a></label>
</div>

Replace /pages/terms with the URL of your terms and conditions page.

Step 4: Adding JavaScript for Checkbox Control

Now, we need to add a JavaScript snippet to enable or disable the checkout button based on the checkbox’s state. Place this script at the end of the cart template file (e.g., main-cart-footer.liquid in Dawn):

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var agreeCheckbox = document.getElementById('agree');
    var checkoutButton = document.getElementById('checkout');

    // Disable the checkout button initially
    checkoutButton.disabled = true;

    agreeCheckbox.addEventListener('change', function() {
      checkoutButton.disabled = !this.checked;
    });
  });
</script>

This script disables the checkout button by default and toggles its enabled state based on whether the checkbox is checked.

Step 5: Testing and Adjustments

Save your changes.
Test the functionality on your cart page. Ensure the checkout button is disabled initially and becomes enabled only when the checkbox is checked.
If the button doesn’t behave as expected, revisit the script and HTML to ensure they’re correctly implemented.

Conclusion

You have successfully added an ‘Agree to Terms Checkbox in Shopify Cart page. This feature is not just about compliance, but also about building trust with your customers. While we used the Dawn theme for this example, the principles apply across most Shopify themes with minor adjustments.

Additional Tips

Always backup your theme before making changes.
Test extensively across different devices and browsers.
Style your checkbox and label to match your store’s design.
Consult legal advice to ensure your terms are enforceable.

This tutorial provides a solid foundation for Shopify store owners, even beginners, to enhance their store functionality while adhering to best practices in e-commerce.

Have you tried this customization? How did it work for your store? Let us know in the comments below!

Explore Our Shopify Apps

Savify

All-in-One discount automation.

Cart Lock

Block orders to avoid unexpected purchases.

PayRules

Hide, sort & rename payment methods.

ShipRight

Hide, sort & rename shipping methods.

Shahriar Kabir

Founder of KlinKode and certified Shopify expert with 10+ years of hands-on experience in e-commerce development. Learn more at kabirdev.com.

Comments (22)

Amy Krahenbuhl
April 12, 2024 - 1:29 am

Thank you for the tutorial. It was easy to follow and I was able to add them to checkout. How do I insert terms and conditions to the link I just created?
- Shahriar Kabir
  May 5, 2024 - 7:28 pm
  
  Sorry I don’t understand your question. Could you please use our contact page to send your question with screenshot?
Svaroop
June 18, 2024 - 1:40 am

How can I capture this input in the order infirmation
- Shahriar Kabir
  June 26, 2024 - 3:53 pm
  
  Are you referring to the checkout page? You can only modify it if you’re a Shopify Plus user or use an app.
Joseph
June 26, 2024 - 7:10 am

Hey, Shahriar.
Thank you for the great tip.
One problem – the “I agree” message is shown even if the cart is empty. Is there a fix?
- Shahriar Kabir
  June 26, 2024 - 3:52 pm
  
  Yes, you can modify the liquid code to conditionally display it only when the cart object is not empty.
Betti Bota
October 2, 2024 - 12:49 am

Thanks for this great support, it worked perfectly fine. However, I use 2 languages in my store, and could not detect this part with T Lab. Do you have an idea how to fix that? Thank you!
- Shahriar Kabir
  December 22, 2024 - 10:38 pm
  
  You can add the language specific words in your Shopify theme’s locale JSON files.
Betti Bota
October 15, 2024 - 1:05 am

Hi Shahriar, thanks a lot for this help. I managed to follow your steps and figured the conditional display in case the cart is empty. However, if I do any change in the cart on the cart page (adding items or deleting), the checkbox disappears and I cannot proceed with the purchase. Force display in CSS did not work. Do you have any reco? Thank you!
- Shahriar Kabir
  December 22, 2024 - 10:40 pm
  
  I think your JS code is not well written. Please try to take help from a professional.
Clemens
October 29, 2024 - 11:55 am

You’re a legend! Thanks so much!
Sofia
May 13, 2025 - 7:05 pm

Does your website have a contact page? I’m having a tough time locating it but, I’d like to send you an email.
I’ve got some recommendations for your blog you might be interested in hearing.

Either way, great site and I look forward to seeing it improve over time.
Ted
September 6, 2025 - 3:41 am

Everything is very open with a very clear clarification of the
challenges. It was really informative. Your website is extremely
helpful. Many thanks for sharing!
Lavern
September 9, 2025 - 1:07 pm

Hello friends, its enormous post about educationand
completely explained, keep it up all the time.
Georgetta
September 11, 2025 - 6:04 am

It’s impressive that you are getting ideas from this paragraph as
well as from our argument made at this time.
Corine
September 19, 2025 - 12:41 pm

It’s in reality a nice and useful piece of information. I am
happy that you just shared this helpful info with us. Please keep us informed like this.
Thanks for sharing.
Kraig
September 24, 2025 - 6:24 am

This paragraph is in fact a fastidious one it helps new web
people, who are wishing for blogging.
Kris
October 10, 2025 - 10:43 pm

Ahaa, its nice dialogue about this article at this place at this webpage, I have read all that, so at this time me also
commenting at this place.
Marcy
October 14, 2025 - 4:37 am

I love it when folks come together and share ideas.
Great blog, continue the good work!
Lakesha
October 25, 2025 - 9:45 am

Hi! Do you use Twitter? I’d like to follow you if that would be okay.
I’m absolutely enjoying your blog and look forward to new updates.
Fiona
October 27, 2025 - 9:11 pm

Keep on writing, great job!
Lonna
November 1, 2025 - 5:29 am

It’s the best time to make some plans for the longer term and it’s time to be happy.
I’ve learn this publish and if I may I wish to counsel you
some interesting issues or advice. Maybe you could write
next articles relating to this article. I wish to learn more issues
approximately it!