This block appears on product pages and shows customers how many points they'll earn for that specific product.
You can add custom CSS in your theme's CSS file or via the Shopify theme editor.
How It Works
All product points calculator elements use CSS classes prefixed with .mage-product-points-calculator. The block also carries the .mage-block class on its root element.
The block has two display styles — inline and badge — and the modifier class on the root element tells you which mode is active. Colors set via the theme customizer are applied as inline styles; to override them with CSS, use !important.
Tips
Disable customizer styles to take full control. Enable the "Disable customizer styles" option in the theme block settings. This suppresses all inline color styles and lets your CSS apply without needing
!important.Target the display style you want. Use
.mage-product-points-calculator--inlineor.mage-product-points-calculator--badgeto target a specific display mode without affecting the other.The multiplier note is optional. The
__multiplierelement only renders when a VIP tier or bonus campaign is active. Style it independently to keep it visually secondary to the main message.
CSS Class Reference
Root
Class | Description |
| Root container for both display styles |
| Applied when the block is in inline display mode |
| Applied when the block is in badge display mode |
| Shared class present on all storefront blocks |
Inline Display
Class | Description |
| The points earn message text |
| Multiplier note (e.g. "3x bonus as a Gold member") |
| Inline variant of the multiplier note |
Badge Display
Class | Description |
| Badge container (receives background and text color from customizer) |
| The points earn message text inside the badge |
| Multiplier note shown below the badge |