The PDP Points Calculator shows customers on your product pages how many points they will earn by buying that product. In the Shopify theme editor the block is called Product Points Calculator. In store credit mode it is called the PDP Store Credit Calculator.
Most of its look is set in the app: display style, colours, text weight, icon, message text and click behaviour. Use custom CSS for anything those settings do not cover.
Where to Add Custom CSS
Go to Loyalty Pages and find PDP Points Calculator under Storefront. Click Customise.
Scroll to the Custom CSS section near the bottom of the settings.
Enter your CSS. Type
.mageto see the calculator's classes, or start typing a snippet name from the table below.Save your changes. The preview on the right shows the result.
The theme editor block has no CSS field of its own. Add calculator CSS in the app so it loads wherever the block is used.
Overriding Colours
The colours and corner radius you choose in the app are applied as inline styles. Layout rules such as padding, font size and borders work with a normal class selector, but to change a colour or radius that the app sets you need !important. The Text weight and Subtext weight settings are not inline, so a normal font-weight rule overrides them.
/* Works without !important */
.mage-product-points-calculator__message {
font-size: 15px;
}
/* Needs !important to beat the badge colour setting */
.mage-product-points-calculator__badge {
background-color: #1d1d1b !important;
}
CSS Snippets
The editor includes ready-made snippets. Start typing a snippet name and pick it from the list, then change the placeholder values.
Snippet | What it inserts |
| A border around the badge |
| Colour and weight for the points value only |
| A small icon before the message text |
| A badge background colour override (uses !important) |
| A new size for the message text |
CSS Class Reference
The block renders inside #mage-product-points-page-calculator. Its root element carries .mage-block plus the classes below.
Root
Class | What it styles |
| Root element for both display styles. The outer theme section wrapper also has this class. To target only the calculator, use |
| Root when Display Style is Inline text |
| Root when Display Style is Badge pill |
| Root when the block is a link (Make clickable is on) |
Message and badge
Class | What it styles |
| The earn message text, in both display styles |
| The earn message inside the badge |
| The badge pill (Badge pill style only) |
| The points value inside the message, from the |
| The extra line from Bonus active text, shown while a bonus campaign applies. Its colour comes from the Bonus active color setting, so a colour override needs |
Examples
/* Make just the points number stand out */
.mage-product-points-calculator__value {
color: #b45309;
font-weight: 700;
}
/* Add space above the block on the badge style only */
.mage-product-points-calculator--badge {
margin-top: 12px;
}
Common Mistakes to Avoid
Colour rules that do nothing. The app's colour settings are inline styles, so add !important to colour and radius rules.
Using classes that no longer exist. The bonus multiplier note has been removed, so .mage-product-points-calculator__multiplier and its --inline, --pill and --badge variants no longer match anything. To show an extra line during a bonus campaign, use the Bonus active text setting. There is also no longer a Disable Customizer Styles option for this block.
Adding CSS in the theme editor. The block has no CSS field there. Use the Custom CSS section in the app.
Troubleshooting
My CSS is not showing on the product page
Check that you saved your changes in the app.
Check that the Product Points Calculator block is added to your product template in the theme editor.
Add
!importantif you are changing a colour, background or corner radius.
For the placeholders you can use in the messages, see Dynamic Text Inserts.