Adding an I agree with the terms or I certify that I am 18 years of age checkbox to your cart page.

Here, we will show how to add an “I agree with the terms and conditions of sales”, or “I certify that I am 21 years of age or older” checkbox to the Shopping Cart page, next to the checkout buttons. If the checkbox is not checked, your shopper will not be able to check out.

Click here to see the demo

First step: adding the checkbox

Take note that such checkbox cannot be added to the Payment Page at checkout. The checkbox can only be added to your Shopping Cart page. So let's add it there. Go to Themes > Template Editor > Templates > cart.liquid, or simply click here to open your cart.liquid template in the online Template Editor.

On line 74 in cart.liquid, after the line of code <div id="cart-meta">, so right inside that #cart-meta div element, add the following code:

<p style="float:none; text-align:right"> 
  <input type="checkbox" id="agree" style="float:none" /> 
  <label for="agree" style="display:inline; float:none" >
    I agree with the <a href="/pages/terms-and-conditions-of-sales">terms and conditions of sales</a>.
  </label>
</p>

Rephrase the I agree... text as you please, and make sure to provide the correct link to your Terms & Conditions page. You'll need to create that page, if you haven't already.

If you need to perform an age check, use the following instead:

<p style="float:none; text-align:right"> 
  <input type="checkbox" id="agree" style="float:none" /> 
  <label for="agree" style="display:inline; float:none" >
    I certify that I am 21 years of age or older.
  </label>
</p>

Save your cart.liquid template.

Second step: adding the JavaScript to perform the actual check

Go to Themes > Template Editor > Assets >  shop.js, or simply click here to open the shop.js file in the online Template Editor.

At the very end of the file add the following JavaScript:

$('input[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
  if($('#agree').is(':checked')){
    $(this).submit();
  }
  else{
    alert("You must agree with our terms and conditions of sales to check out.");
    return false;
  }
});

If that's an age check you are doing, replace the alert call with that one:

alert("You must be 21 years of age or older to check out.");

Then save. You are done

Bonus track: showing the Terms and Conditions in a lightbox.

The New Standard theme uses a lightbox plugin called Colorbox. Let's use that plugin to show the Terms in a lightbox when the shopper clicks on the Terms and Conditions link.

At the very bottom of your cart.liquid template, add this — and make sure that you are using the right handle, that is, the handle of the page which contains your terms and conditions of sales:

<div style="display:none">
  <div id="terms" style="padding:30px 20px; width:600px;">
  {{ pages.terms-and-conditions-of-sales.content }}
  </div>
</div>

Still in cart.liquid, replace this bit of code you had added in step 1:

I agree with the <a href="/pages/terms-and-conditions-of-sales">terms and conditions of sales</a>.

... with that one:

 

I agree with the <a class="inline" href="#terms">terms and conditions of sales</a>.

And save. You are done. Unless...

if you have installed your New Standard theme before or on Friday November 2nd 2012, you'll need to add a bit of JavaScript to your shop.js file.

On line 715 in shop.js, after this block of code:

  $('.lightbox').colorbox( {
            maxWidth:"95%",
            maxHeight:"95%",
            scalePhotos:true} );

... add this other code block:

  $('.inline').colorbox( {
            maxWidth:"95%",
            maxHeight:"95%",
            inline:true} );

Click here to see the demo



Comment on this post (32 comments)

  • Guillermo says...

    cheap jerseys with free shipping.How much is discount nfl jerseys china?
    Cannot miss the custom jersey creator too.

    August 18, 2017

  • Mona says...

    cheap jerseys for women.Great service of online buy jersey usa wholesale,and enjoy our
    where can i buy jerseys for cheap 79% off.

    August 02, 2017

  • Lee says...

    cheap nike jerseys from china.cheap nike jerseys from china.
    The sponsors have paid anything from an estimated ?8m to ?120m to
    have their names associated with what is one of the two biggest Nike Vikings 14 Stefon Diggs Purple Team Color Womens Stitched NFL Elite Jersey suppliers.

    July 30, 2017

  • Vern says...

    cheap Bruce Irvin jerseys | Order Us Jerseys authentic china online,Custom personalized hockey jerseys
    canada from us.

    July 17, 2017

  • Jenny says...

    mvp jerseys on sale | 93 Lawrence Guy Jersey, cheap baseball, basketball,
    hockey, soccer jerseys with affordable price, buy 66 Trey Hopkins Jersey from China

    June 09, 2017

  • Salvatore says...

    56 Brooks Reed Jersey.74 Malcolm Bunche Jersey cheap for sale from china 30
    Ed Reynolds Jersey factory, you will get free gift at this store also with top quality.

    June 08, 2017

  • Kimber says...

    Desmond Bishop Jersey.Chinese Jerseys Cheap-Welcome to buy cheap wholesale Jerrell Powe Jersey
    with free shipping and best service in our jerseys online shop.

    June 03, 2017

  • Anja says...

    where can i buy cheap jerseys – Professional 34 Jonas Gray Jersey Outlet Sale, cheap jerseys with free
    shipping From China Store for NFL Fans. Buy Discount NFL Football Jerseys, Hockey jerseys here.

    May 31, 2017

  • Pablo says...

    Nike Packers 52 Clay Matthews Green Team Color
    With C Patch Mens Stitched NFL Game Jersey.China messi replica jersey youth, NHL, MLB, NCAA, and other Nike Saints 9 Drew Brees Black
    Team Color With C Patch Mens Stitched NFL Elite Jersey
    from best jerseys suppliers and wholesalers, free shipping service and authentic quality sports jerseys.

    May 31, 2017

  • Mohamed says...

    95 Kapron Lewis-Moore Jersey | Us Jerseys From China authentic china online,
    Custom personalized cheap Roy Miller jerseys from
    us.

    May 11, 2017

  • Leave a comment