Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

Add an ‘Agree to terms and conditions’ checkbox

Jul 16, 2022Nov 15, 2022
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 Terms and Conditions checkbox before clicking the add an agree to terms and conditions checkout button, an alert pop up will prevent them from continuing.

Add an “Terms and conditions checkbox” to your cart page that customers must always be check before continuing to the checkout. Add terms and conditions to your cart that customers must check before the checkout. Popup will show if there have no available checkbox.

The app will add the date and time of when the customer has ticked the checkbox and agreed to your terms and conditions to the order details under the Additional Details section. This app can be used to add a customizable ‘agree to terms and conditions checkbox’ very easily, to your cart page or drawer. 

Terms and Conditions Checkbox Shopify

Tip: It’s not possible to checkbox to the checkout pages. It can be added only to the cart page.

Editing your theme code to add Terms & Condition checkbox this feature

  • Section directory, find the cart-template.liquidfile and locate the checkout button. The code for the checkout button will be look like the following code:
<input type="submit" name="checkout"
  class="cart__submit btn btn--small-wide"
  value="{{ 'cart.general.checkout' | t }}">
  • Then add the following code right above the add agree to terms and conditions checkbox:
{% comment %} terms and conditions checkbox {% endcomment %}
                {% if section.settings.enable_tc_checkbox %}
                <p style="width:100%; text-align: right; display:block;  margin: 10px 0;">
                  <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
                  <label style="display:inline; float:none" for="agree">
                    {{ section.settings.tc_text }} <a style="text-decoration:underline" href="{{ section.settings.tc_link }}">{{ section.settings.tc_link_text }}</a>.
                  </label>
                </p>
                {% endif %}
          {% comment %} end terms and conditions checkbox {% endcomment %}
  • For the Same file, locate the {% schema %} tag for making it dynamically manageable from the theme section. Inside the {% schema %} try to find the settings and add the following code before ]:
  ,
    {
        "type": "header",
        "content": "Terms & Conditions"
    },
    {
        "type": "checkbox",
        "id": "enable_tc_checkbox",
        "label": "Enable Terms & Conditions checkbox",
        "default": true
      },
        {
          "type": "text",
          "id": "tc_text",
          "label": "Text after checkbox",
          "default": "I agree with the "
        },
        {
          "type": "text",
          "id": "tc_link_text",
          "label": "Link text",
          "default": "Terms & Conditions"
        },
        {
          "type": "url",
          "id": "tc_link",
          "label": "Link URL"
        }
  • In the Assets directory open theme.js and add the following code at the bottom of the file:
// Terms & Conditions checkbox at the cart

$(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;
            }
        }
    );
});

Congrats, You’ve completed the coding parts. Now Terms & Condition Checkbox available on the cart page. Also, Terms and Conditions Checkbox Shopify manageable from the theme section. You can customize this from Themes>Customize>cart

Posted in Shopify Tutorials

Post navigation

Prev Setting up Tipping Options on Your Shopify Store
Next Add a customization form to products

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Shopify vs Squarespace: Which Is Best for Your Business in 2023?
    Shopify vs Squarespace: Which Is Best for Your Business in 2023?Jan 23, 2023
  • Shopify Hydrogen and Oxygen Supporting Shopify Storefront
    Discover Shopify Hydrogen and Shopify Oxygen: The Future of Shopify Storefront ShopifyJan 19, 2023
  • Magento To Shopify Migration – A Detailed Guide
    Magento To Shopify Migration – A Detailed GuideJan 16, 2023
  • How to use Shopify API Integrations with other tools or platforms?
    How To Use Shopify Api to Build Custom Integrations With Other Tools Or Platform?Jan 7, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved