Overview

You can add custom CSS to any of our design components by going to Settings within the component.

Here is a specific breakdown of how this works for the Your Status Component:

For “Your status”:

.your-status-section-title { font-family: "[insert font name]" !important; } 

For “Redeem + Earn More”:

.your-status-module-main-section-title { font-family: "[insert font name]" !important; }

.your-status-section-body-title { font-family: "[insert font name]" !important; }

.your-status-body-current-status { font-family: "[insert font name]" !important; }

.your-status-body-current-description { font-family: "[insert font name]" !important; }

.your-status-line-count { font-family: "[insert font name]" !important; }

.your-status-line-balance span { font-family: "[insert font name]" !important; }

.your-status-line-balance { font-family: "[insert font name]" !important; }

.your-status-line-perk { font-family: "[insert font name]" !important; }

.your-status-module-main-button-section-title, .refer-a-friend-section-title { font-family: "[insert font name]" !important; }

.your-status-module-main-button-section-sub-title, refer-a-friend-section-subtitle { font-family: "[insert font name]" ; !important}

.your-status-module-main-add-mod-wrapper button { font-family: "[insert font name]" !important; }

Here is a specific breakdown of how this works for the Wallet Component:

Interested in changing the fonts or the membership card in the wallet, you can with custom CSS.

Instead of "PPEditorialNew" please replace it with "Cooper BT".

You will be required to paste the below in the custom CSS.

* { font-family: "Cooper BT" !important; }

.font-customButton { font-family: "Helvetica Neue" !important; }

This is how you can set it to work with buttons

Custom css for rounded corners:

In order to customize any components that are not listed, please use Inspector to evaluate the style tags and apply the same logic accordingly.

NB: The changes will not be visible to the designer, only on the website