Common CSS/Styling Used for Loyalty Points

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

  1. From "Shopify Admin", select Apps.

    Select Apps

  2. Select Loyalty Points by Bold.

    select Loyalty Points by Bold

  3. Select Settings.

    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.

    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 {

Next Steps:

Blog Posts: