Points Preview can be placed on the cart page, inside the cart drawer, or in headless storefronts. This flexibility allows merchants to show customers potential points (or other reward currency) at a critical touch point in the buying journey, when finalizing their order. By surfacing earned points early, merchants can reinforce the value of their loyalty program, encourage larger cart sizes, and increase conversion rates by giving customers an immediate incentive to complete their purchase.
In this article, you will learn:
How to add Points Preview to a cart page, cart drawer or cart implementations on headless themes
How to customize the Points Preview
How customers experience the Points Preview for cart
Tested themes for Points Preview
Before you start
⚠️ Ensure your theme supports app blocks (Shopify Online Store 2.0). Points Preview won’t display if your theme isn’t compatible.
💡 Make sure app embeds are enabled in your theme before adding the Points Preview. You may need a developer to edit your theme code for cart drawer or headless setups.
Adding Points Preview to the cart page
You can add Points Preview to the cart page using the Shopify theme editor.
In Shopify Admin, go to Online Store > Themes and click Customize next to your active theme.
Navigate to your Cart page in the theme editor.
Click Add block and select Points Preview.
Adjust padding in the block settings or customize app block styles in Okendo Admin. Once you're happy, select Save and exit the theme editor.
💡 Use Okendo Admin’s style settings to ensure the app block matches your store’s brand colors and fonts.
Adding Points Preview to the Cart Drawer
If your theme includes a cart drawer, you can add the Points Preview using a code snippet.
In Shopify Admin, go to Online Store > Themes and select Edit code next to your active theme.
2. Locate your cart drawer template. This is often called snippets/cart-drawer.liquid.
3. Paste the following snippet where you want Points Preview to appear:
<div
data-oke-loyalty-points-preview
data-oke-loyalty-target="cart-drawer"
data-oke-loyalty-points-preview-id="cart-drawer"
></div>
4. Save your changes.
5. Customize the Points Preview styles in Okendo Admin.
Adding Points Preview in a headless theme
Headless themes can use the same snippet as the cart drawer implementation:
<div
data-oke-loyalty-points-preview
data-oke-loyalty-target="cart-drawer"
data-oke-loyalty-points-preview-id="cart-drawer"
></div>
Customizing Points Preview
You can update point preview’s text, colors, icons, and alignment from Okendo Admin.
In Okendo Admin, go to Loyalty > Onsite Displays > Loyalty Points Preview Cart.
2. Use the style controls to adjust:
Text alignment
Text content
Text color
Link color
Icon
Icon color
3. The same page also contains installation instructions and the cart drawer snippet.
How it works
Points Preview retrieves the cart total.
Okendo’s Loyalty calculates the points earned on the cart total, based on the cart total, the customer's enrolment status and VIP tier points variations (where applicable), product variants, active promotions and selling plans.
Points are recalculated automatically if the cart total changes.
If no points are earned on a cart or the cart is empty, the Points Preview is hidden.
Tested themes
Points Preview has been tested against the following themes (as of August 2025).
Theme | Cart Page | Cart Drawer |
Dawn | ✅ | ✅ |
Horizon | ✅ | ✅ |
Impulse | ✅ |
|
Baseline | ✅ |
|
Empire | ✅ |
|
Focal | ✅ |
|
Woodstock | ✅ |
|
Stiletto | ✅ |
|
Trade | ✅ | ✅ |
Spotlight | ✅ | ✅ |
Refresh | ✅ | ✅ |
Colorblock | ✅ | ✅ |
Pipeline | ✅ |
|
Vision | ✅ |
|
Craft | ✅ | ✅ |
Broadcast | ✅ |
|
If you have any specific questions or need further assistance, feel free to reach out to our support team.