If you want to change the style of your loyalty program, contact us. We're happy to make any styling changes for you within 24 hours free of charge.

You can customize the styling of your loyalty program with custom CSS on the "Customize storefront > General style" page in the "Add styling with custom CSS" section.

Common customizations

CSS code snippets for the most common style changes. To apply the changes just paste the code in the "Add styling with custom CSS" field on the "Customize storefront > General style" page.

Change background color

.ll__container {

background-color: #FFFFFF !important; /* Adjust color code as needed */

}

Change font family

.ll__root-ho4ed3 {

font-family: Helvetica, Arial, sans-serif; /* Adjust fonts as needed */

}

Decrease space between Loyalty Page blocks

.ll__loyalty-page-how-it-works-ho4ed3, .ll__loyalty-page-earn-rules-ho4ed3, .ll__loyalty-page-redeem-rules-ho4ed3 {  
  
padding-top: 0px !important;  

}

Align Loyalty Page banner to center

.ll__loyalty-page-banner-ho4ed3 {

display: flex;
justify-content: center;

}

.ll__banner-content {

width: 400px !important;

}

Updated on: 06/01/2025