How to Set Up the Loyalty Progress Bar Widget

Samantha Brown Updated by Samantha Brown

The Loyalty Progress Bar widget shows logged-in Loyalty members how close they are to their next Member Tier, right on your site. It displays the member's current tier badge, their points, and a visual bar toward the next tier.

Benefits

  • Motivate the next purchase: A visible "almost there" goal encourages members to keep earning.
  • Reinforce tier status: Each tier can have its own badge colors, so members instantly recognize their status.
  • No development work: Create, style, and place the widget from Loyalty > Widgets.
  • Mobile-ready: The widget adjusts automatically at phone widths.

Before You Begin

Make sure you have the following in place:

The widget only displays for logged-in members. Signed-out visitors see the loyalty login screen instead.

How to Set Up the Loyalty Progress Bar

Step 1: Create the widget

  1. Navigate to Loyalty > Widgets.
  2. Click + Create Widget and select Loyalty Progress Bar.
  3. A new widget named Loyalty Progress Bar is created and its Widget Details pane opens that can be edited.

Step 2: Place the widget on your site

  1. In Widget Details, enter the HTML element where the widget should render (for example, #dashboardDiv).
  2. Enter the URL of the page where it should appear (for example, loyalty-dashboard) or the page name to include the widget on (example, loyalty).
  3. Optionally you can also define URLs and page names to exclude the widget from:

Step 3: Choose a layout

  1. Click View/Edit Widget.
  2. On the Dashboard screen, select the Loyalty Progress Bar element.
  3. In the Design panel, choose a variant:

Variant

What it shows

Best for

Card

Tier badge, points headline, progress text, bar, and end labels

Account or loyalty dashboard pages

Inline

Current and next tier, progress text, bar, and end labels (no headline)

Tighter spaces within existing content

Compact

Bar and end labels only

Minimal placements, such as near the cart

Step 4: Customize content and tier badges

  1. In the Content panel, use the Hide toggles to remove elements you do not wish to display. The available toggles depend on your variant:
    • Card: all four toggles
    • Inline: Hide progress text, Hide end labels
    • Compact: Hide end labels
  2. In the Tier Badge panel, select a tier and set its Background and Text colors. The preview badge switches to that tier so you can see your changes.
  3. Repeat for each tier, then click Save in the top right corner.
Tip: Use the Preview State menu to see how the widget looks for members at different stages of your tier program.

Step 5: Publish

  1. Toggle Visible on site on.
  2. Click Publish Changes and wait for the Loyalty Program Saved confirmation.
  3. Open the page on your site while logged in as your test member to confirm the widget displays.

What Your Members Will See

The widget adapts to each member's status. It's designed to show nothing rather than an error, so your site never displays a broken or empty box.

Situation

What displays

Logged-in member working toward the next tier

Tier badge, points, progress text, bar, and end labels (based on your variant)

Member in your top tier

A full bar with the top-tier message; no progress text or end labels

Member below your lowest tier

Progress bar with no tier badge

Member in a tier you haven't styled

Badge uses the default shared colors

Signed-out visitor

The loyalty login screen

Member Tier program disabled, archived, or not set up

Nothing — the widget doesn't render

Member data can't be retrieved

Nothing — the widget doesn't render

Compact variant with no bar to show

Nothing — the widget removes itself

FAQs and Troubleshooting

The widget isn't showing on my site. Confirm that Visible on site is on, you clicked Publish Changes, the HTML element and URL match your page, and you're logged in as a member who holds a tier. Also check that your Member Tier program is active.

The widget overhangs its container on desktop. On desktop, the widget can extend past narrow columns (below about 450px). Widen the container on your page. Mobile sizing is handled automatically.

The widget sits near the top of its section with space below it. This is expected. The bar is positioned toward the top of its area rather than vertically centered.

Why don't I see all the Hide toggles? Toggles only appear for elements that exist in your chosen variant. Card has all four; Inline and Compact have fewer.

Can I change the text on the tier badge? No. The badge always shows the member's current tier name. You can change its colors in the Tier Badge panel.

Why does my Preview State list look different from another brand's? The list only includes states your tier program can produce, so it varies based on how your tiers are configured.

One tier's badge is using the default colors. That tier hasn't been styled yet. Select it in the Tier Badge panel, set its colors, then Save and Publish Changes.

How did we do?

How to set up expiration for Points or Account Credit

How to Create, Edit, and Manage Loyalty Emails

Contact