Common CSS/Styling Used for Loyalty Points


Making adjustments to Bold Loyalty Points requires a knowledge of CSS. If you are not comfortable with adding liquid code into your theme, one of our partners could complete this as a paid customization on your store. Please visit HeyCarson via this form.

To customize the CSS/styling for Loyalty Points, follow these steps:

  1. From "Shopify Admin", select Apps.
  2. Select Loyalty Points by Bold.
  3. Select Settings.
  4. Select Display Settings.

    select display settings

  5. Select the Custom CSS tab.

    select the custom CSS tab

  6. Add the Custom CSS as desired.

    Note: Select a heading at the bottom of this page to expand the section and learn how to style a specific element.

    add the custom css

  7. Select Save.

That's it!

Select an element to learn how to style it.


redeem button

CSS Styling

.bold-loyalties-redeem {


customer registration link

CSS Styling

.bold-loyalties-callout-nav {

CSS Styling for Mobile

.navigation-sidebar__current span .bold-loyalties-callout-nav {display: none;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .navigation-sidebar__current span .bold-loyalties-callout-nav {
     display: inline-block;
     line-height: 35px;
     width: 100%;


 Reward points

CSS Styling

.bold-loyalties-redeem-amount {


Cancel button

CSS Styling

a.btn.btn--secondary.bold-modal-close-btn {


Buy button

CSS Styling

input.btn.continue_btn {


Was this article helpful?
0 out of 2 found this helpful