Ctrlk
Product
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Customize the loyalty widgets

Style loyalty widgets from one place, use Universal Styler, and add blocks to your theme.

Use Edit Loyalty Widgets to customize customer-facing loyalty surfaces. This includes ways-to-earn and ways-to-redeem blocks, Product Redeemer, the cart point redeemer, and Customer Rewards.

Open it from the top of the Loyalty Program dashboard.

The interactive customizer

Select a widget to open its live preview and settings.

  • Click through widget states, such as selection, confirmation, and redemption.

  • Switch between Logged out and Logged in.

  • Switch between desktop and mobile.

  • Customize content, messages, colors, typography, layout, badges, buttons, errors, and Custom CSS.

Reset preview restores the original preview state.

Universal Styler vs individual edits

Universal Styler sets shared colors and typography across loyalty widgets.

  • Styler fields inherit their value from Universal Styler.

  • A manually saved change is tagged Edited in green.

  • Re-running Universal Styler does not overwrite Edited fields.

Set your brand base in Universal Styler first. Then fine-tune individual widgets.

Widget-specific settings worth knowing

  • Cart point redeemer — redemption method, message placeholders, logged-out prompt, checkout messages, and abbreviated text. See Configure the cart point redeemer.

  • Product Redeemer — grid or carousel layout, per-device card widths, card style, badges, buttons, prompts, errors, and discount-code display.

  • Ways to redeem block — title, subtitle with HTML support, grid display, redemption method, and logged-out titles and CTA.

  • Customer Rewards: per-state card text and badges for tier rewards, error messages, and grid or carousel layout, mirroring the Product Redeemer's controls. See The Customer Rewards storefront redeeming block.

Add the widgets to your theme

1

Open your theme editor

In Shopify admin, go to Online Store → Themes. Click Customize on your live theme.

2

Choose the page

Navigate to the target page. Click Add block or Add section.

3

Add the loyalty block

Under Apps, choose a Roadmap loyalty block, such as Redeem Loyalty Points. Position it on the page.

4

Save

Click Save. The block uses settings from Edit Loyalty Widgets.

Some blocks offer Use Config From. Choose From Admin for Edit Loyalty Widgets settings. Choose From Blocks for theme-editor settings.

Related guides

PreviousProgram status, start date, and tester domains
NextCreate a loyalty page in new customer accounts

Last updated