How do I change the styling of the terms and conditions checkbox app (CSS)?

In this article

This article has some CSS snippets that you can add to your theme.

Add the code snippet to your theme.liquid file right after the first <head>  tag at the top of the page (see screenshot below). If you need more instructions click the link below.

Here is more information on how to edit your theme files.

CSS snippets

To top

Change font of the text 

<style>
/* Change font of the text */
.terms-relentless span {
font-family: 'DM Sans', sans-serif !important;
}
</style>

Change spacing above and below the terms and conditions checkbox

<style>
/* Change spacing above and below the terms and conditions checkbox */
.terms-relentless {
margin-bottom: 14px !important;
margin-top: 0px !important;
}
</style>

Change color of terms and conditions link

You can change the color of the text link in our app. If that doesn’t work or you want a specific color not offered in the app you can use the code below.

<style>

/* Change color of terms and conditions link */
.terms-relentless a {
color: #227CED !important;
}
.terms-relentless a:hover {
color: #005ACC !important;
}
</style>

Change text from all capital letters to normal

<style>
/* Change text from all capital letters to normal */
.terms-relentless label {
text-transform: none !important;
}
</style>

Left align text

<style>
/* left align text */
.terms-relentless {
text-align: left !important;
}
</style>

Remove terms and conditions checkbox from the ajax cart/ only allow checkbox on cart page

<script>
/* Remove terms and conditions checkbox from the ajax cart*/
var rterms = {
settings: {
only_cart_page: true
}
};
</script>

Change spacing above and below the terms and conditions checkbox

<style>
/* Change spacing above and below the terms and conditions checkbox */
.terms-relentless {
margin-bottom: 14px !important;
margin-top: 0px !important;
}
</style>
Was this article helpful?
Dislike