Notice: End-of-Life Announcement for all Shopify themes by Barrel > Read More

Close

Add an “agree to terms and conditions” checkbox

This tutorial was written for Mosaic version 1.0.7 and newer. We do not support this customization for older versions of the theme.

Some stores need to have their customers agree to some terms and conditions first, before they check out.

Shopify has a helpful guide on how to do this here, but their instructions won’t work out of the box for the Mosaic theme. Instead, we’ve tweaked their instructions to specifically work for our Mosaic theme.

 

  1. Go to Edit HTML/CSS to edit the theme code. Shopify has a guide on how to do this here.
  2. In the Snippets folder, open the file called site-cart.liquid. Around line 15, you should see this line of code:
    <form action="/cart" method="post">

    Add the following code in blue, such that this line of code now looks like this:

    <form class="js-cart-form" action="/cart" method="post">
  3. Now, still in this same file, scroll down to around line 102, and look for this chunk of code:
        <h3 class="">{{ 'cart.labels.excluding_tax_and_shipping' | t }}</h3>
      </div>
      <a href="/collections/all" class="js-continueShopping button block sm_s12 med_s25 lg_s13 xxl_s14 sm_hide">{{ 'cart.labels.continue_shopping' | t }}</a>
      <button class="cart-checkout block s1 sm_s12 med_s25 lg_s13 xxl_s14 u-margin-b-sm" type="submit" name="checkout">{{ 'cart.labels.checkout' | t }}</button>
      <a href="{{ continue_shopping_url }}" class="block sm_s12 med_s25 lg_s13 xxl_s14 sm_show u-center sm_show"><h4>‹ {{ 'cart.labels.continue_shopping' | t }}</h4></a>
    </div>

    Right after the first line of code above, add in the following code in blue, such that it now looks like this:

        <h3 class="">{{ 'cart.labels.excluding_tax_and_shipping' | t }}</h3>
    <!--This code adds the checkbox to the Cart page--> 
    <p>
     <input style="display:inline;" type="checkbox" id="agree" />
     <label style="display:inline;" for="agree">
     I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
     </label>
    </p> 
      </div>
     <a href="/collections/all" class="js-continueShopping button block sm_s12 med_s25 lg_s13 xxl_s14 sm_hide">{{ 'cart.labels.continue_shopping' | t }}</a>
      <button class="cart-checkout block s1 sm_s12 med_s25 lg_s13 xxl_s14 u-margin-b-sm" type="submit" name="checkout">{{ 'cart.labels.checkout' | t }}</button>
      <a href="{{ continue_shopping_url }}" class="block sm_s12 med_s25 lg_s13 xxl_s14 sm_show u-center sm_show"><h4>‹ {{ 'cart.labels.continue_shopping' | t }}</h4></a>
    </div>
  4. Now scroll to the bottom of this file. You should see a section of code that looks like this:
    {% else %}
    
     <h2>{{ 'cart.labels.empty_cart' | t }}</h2>
     {% capture link %}
     <a href="/collections/all">{{ 'cart.labels.browsing_link_label' | t }}</a>
     {% endcapture %}
     <a href="/collections/all" class="js-continueShopping button s1 sm_s12 med_s25 lg_s13 xxl_s14">{{ 'cart.labels.continue_shopping' | t }}</a>
     </div> <!-- closing tag for title row -->
     <span class="ie8-after"></span>
    </div> <!-- close .cart-row -->
    
    {% endif %}

    Right above this section of code, add in the following code in blue, such that it now looks like this:

    <script>
    $('.js-cart-form').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>
    
    {% else %}
    
     <h2>{{ 'cart.labels.empty_cart' | t }}</h2>
     {% capture link %}
     <a href="/collections/all">{{ 'cart.labels.browsing_link_label' | t }}</a>
     {% endcapture %}
     <a href="/collections/all" class="js-continueShopping button s1 sm_s12 med_s25 lg_s13 xxl_s14">{{ 'cart.labels.continue_shopping' | t }}</a>
     </div> <!-- closing tag for title row -->
     <span class="ie8-after"></span>
    </div> <!-- close .cart-row -->
    
    {% endif %}
  5. Now you’re going to copy the same code in blue from the previous step, Step 4, into another file. In the Snippets folder, open the file called ajax-cart.liquid. The last two lines of code should look like this:
    </form>
    
    </script>

    Between these two lines is where you’ll copy and paste the code in blue from Step 4 above. Your code should now look like this:

    </form>
    
    <script>
    $('.js-cart-form').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>
    
    </script>
  6. Now, still in ajax-cart.liquid, scroll up to around line 78 to find this section of code:
     <h3 class="c-gray">{{ 'cart.labels.excluding_tax_and_shipping' | t }}</h3> 
     </div>
     <a href="{% raw %}{{{ continue_shopping_url }}}{% endraw %}" class="button block sm_s12 med_s25 lg_s13 xxl_s14 sm_hide">{{ 'cart.labels.continue_shopping' | t }}</a>
     <button class="cart-checkout block s1 sm_s12 med_s25 lg_s13 xxl_s14 u-margin-b-sm" type="submit" name="checkout">{{ 'cart.labels.checkout' | t }}</button>
     <a href="{% raw %}{{{ continue_shopping_url }}}{% endraw %}" class="block sm_s12 med_s25 lg_s13 xxl_s14 sm_show u-center"><h4>‹ {{ 'cart.labels.continue_shopping' | t }}</h4></a>
     </div>
    </form>

    Now add in the code in blue below (you’ll notice this is the same code as in Step 3), just after the first line:

     <h3 class="c-gray">{{ 'cart.labels.excluding_tax_and_shipping' | t }}</h3> 
    <!--This is the code that adds the checkbox--> 
    <p>
     <input style="display:inline;" type="checkbox" id="agree" />
     <label style="display:inline;" for="agree">
     I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
     </label>
    </p> 
     </div>
     <a href="{% raw %}{{{ continue_shopping_url }}}{% endraw %}" class="button block sm_s12 med_s25 lg_s13 xxl_s14 sm_hide">{{ 'cart.labels.continue_shopping' | t }}</a>
     <button class="cart-checkout block s1 sm_s12 med_s25 lg_s13 xxl_s14 u-margin-b-sm" type="submit" name="checkout">{{ 'cart.labels.checkout' | t }}</button>
     <a href="{% raw %}{{{ continue_shopping_url }}}{% endraw %}" class="block sm_s12 med_s25 lg_s13 xxl_s14 sm_show u-center"><h4>‹ {{ 'cart.labels.continue_shopping' | t }}</h4></a>
     </div>
    </form>
  7. Now, still in ajax-cart.liquid, scroll to around line 7 to find this line of code:
    <form action="/cart" method="post">

    Now add in the code in blue below

    <form class="js-cart-form" action="/cart" method="post">
  8. That’s all the code changes that you need to make! Now all you have to do is make sure that your Terms and Conditions page is set up properly. If you haven’t already, go and create a new page called Terms and Conditions. At the bottom of the page editor, click on “Edit website SEO.” In the field called “URL and handle” make sure that the end of the URL there says /pages/terms-and-conditions. It should look like this:2016-03-03_0044

 

And that’s it!