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 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>

Change accent color of checkbox

<style>
/* Change accent color of checkbox */
.terms-relentless .rterms-checkbox {
accent-color: #008000;
}
</style>
Was this article helpful?
Dislike