...
KlinKode

How to Add an ‘Agree to Terms and Conditions’ Checkbox in Shopify Cart (without APP)

  • Home
  • Shopify Tutorials
  • How to Add an ‘Agree to Terms and Conditions’ Checkbox in Shopify Cart (without APP)
terms-conditions-checkbox

How to Add an ‘Agree to Terms and Conditions’ Checkbox in Shopify Cart (without APP)

Adding an ‘Agree to Terms and Conditions’ checkbox 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

  • 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

  1. Log in to your Shopify admin.
  2. Go to ‘Online Store’ > ‘Themes’.
  3. 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

  1. Open the cart template file (e.g., main-cart-footer.liquid in Dawn).
  2. Locate the section where the checkout button is.
  3. 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

  1. Save your changes.
  2. Test the functionality on your cart page. Ensure the checkout button is disabled initially and becomes enabled only when the checkbox is checked.
  3. 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 and Conditions’ checkbox to your 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!

Comments (6)

  • 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.

Make a comment

Your email adress will not be published. Required field are marked*

Prev
Next
Drag
Map
Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.