Customization & Styling in Loyalty Points

Bold Loyalty Points V1 allows you to customize your loyalty program to fit your store's theme.


At this time, version 1 of Bold Loyalty Points is unavailable for new installations. If you are currently using version 1 of Bold Loyalty Points, you will be able to continue using the app as your account will now be grandfathered.



  1. From the 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 your 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.




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