Big Cartel Theme Support

How do I add a terms and conditions checkbox to the Cart page?

How do I add a terms and conditions checkbox to the Cart page?

Create the terms and conditions page

If you haven’t already created your terms and conditions page, you can do so by following the instructions at How do I add a page to my Big Cartel shop?. If you are unsure about what to include in your terms and conditions you can start by copying the content from the terms and conditions page from any of our previews - see How do I add pages as seen in Aarcade previews, like FAQ, About Us, etc.?

You should also refer to the terms and conditions of other shops in your field and get advice from a legal expert where necessary.

Create an Insert Content page

To add a terms and conditions checkbox to the Cart page, we use the x-ic-after-checkout-button insert content method. So, unless you already have a x-ic-after-checkout-button page, the first step is to create a new custom page and name it x-ic-after-checkout-button

For more information on the insert content method and creating your x-ic-after-checkout-button page, see An introduction to the Insert Content method.

Create the terms and conditions notice

IMPORTANT

Switch to HTML edit mode before proceeding - refer How do I switch to HTML edit mode?

Using the methods detailed in section Method 3: The notice class of our article How do I display a notice in my Big Cartel shop?, we use the notice class to create a notice in our x-ic-after-checkout-button page content area.

<div id="agree-checkout-wrap" class="notice danger">
Please accept our terms and conditions to enable checkout.
</div>

Note that we added the class danger to the notice div because this is a critical message and we want it to stand out. We also added a unique id - id="agree-checkout-wrap" - as this allows us to target the notice easily with style and/or script as needed.

The line of text “Please accept our terms and conditions to enable checkout.” within the notice can be whatever you prefer to suit your local requirements and language.

Linking to the terms and conditions page

It is important to include a link to the terms and conditions from the notice, so that your customer can easily access and review them. Our article How do I link to a web address or a file from my page? explains how to create a link. Following these instructions, if our terms and conditions page is located at our Big Cartel shop at..

http://myshop.bigcartel.com/terms-conditions

..we can use the relative URL..

/terms-conditions

..with a link tag. For our example, we will apply this link tag to the text “our terms and conditions” in our notice like this:

<div id="agree-checkout-wrap" class="notice danger">
Please accept <a href="/terms-conditions" target="_blank">our terms and conditions</a> to enable checkout.
</div>

Note that we also added the target="_blank" attribute to the link tag which - as explained at How do I link to a web address or a file from my page? - will cause the link to open in a new page. This ensures that the customer’s cart page is left open when they view the terms and conditions.

Adding the checkbox

To add the checkbox, we create a new line after our first line of text and use a standard HTML label and input tag:

<div id="agree-checkout-wrap" class="notice danger">
Please accept <a href="/terms-conditions" target="_blank">our terms and conditions</a> to enable checkout.
<br><label for="agree-checkout"><input type="checkbox" id="agree-checkout"> I accept</label>
</div>

Again, the text “I accept” can be changed to suit your local requirements and language. The <br> line break tag, at the beginning of the checkbox line, ensures that the checkbox is displayed on a new line when rendered on the cart page.

Adding the script

Finally we add the custom script on a new line outside of the notice div:

<div id="agree-checkout-wrap" class="notice danger">
Please accept <a href="/terms-conditions" target="_blank">our terms and conditions</a> to enable checkout.
<br><label for="agree-checkout"><input type="checkbox" id="agree-checkout"> I accept</label>
</div>
<script>
+function(a){a(".cart-total .ic-row .lbl").next().attr("colspan","2").end().remove();a(".cart-total tr.ic-row").after(a(".cart-total tr.checkout"));var b=a("#cart-form .form-item.primary button"),c=a("#agree-checkout-wrap");b.attr("disabled","disabled");a("#agree-checkout").click(function(){this.checked?(c.removeClass("danger").addClass("success"),b.removeAttr("disabled")):(c.removeClass("success").addClass("danger"),b.attr("disabled","disabled"))})}(jQuery);
</script>

This script preforms the following actions:

  • Places the notice above the checkout button rather than below it
  • Disables the checkout button if the checkbox is unchecked
  • Enables the checkout button and changes the notice’s danger class to success if the checkbox is checked

Saving changes and testing

Once you have finished creating and editing your terms and conditions checkbox, click the Done and Save links in your Big Cartel edit area to apply the changes to your shop.

It is very important that you test your Cart page functionality immediately, on multiple devices, to ensure that your customers can checkout of your shop. If you see any issues created by your terms and conditions checkbox, the quickest way to correct things is to go to your x-ic-after-checkout-button page, rename it to x x-ic-after-checkout-button and save it. This will disable the page so your checkout is restored and you can then review your code and correct it in your own time. When you are ready to re-apply the terms and conditions checkbox, change the x x-ic-after-checkout-button page name back to x-ic-after-checkout-button and test your Cart page again.

Further styling

If you wish to apply additional styling, you can use the classes available for the notice div - see section Method 3: The notice class of our article How do I display a notice in my Big Cartel shop?

You can also add CSS to your custom style coding area - see Where do I add custom style code? For example:

/* Increase font size for checkbox notice */
#agree-checkout-wrap {
	font-size: 14px;
}
/* Make disabled checkout button semiopaque */
#checkout-button[disabled] {
	opacity: 0.4;
}

AarcadeHow do I add a terms and conditions checkbox to the Cart page?