Adding a loyalty icon to your store header gives customers quick, always-visible access to their points balance and rewards without needing to visit a separate account or loyalty page. This article covers how to turn it on, add it to additional themes, and customize how it looks and behaves.
Where to Enable It
There are two places in the Flits admin where you can turn this feature on:
Option 1: From the Dashboard quick setup panel
- Go to Dashboard.
- Under the Set up onsite content for your storefront panel, find item – Show loyalty points icon in header, and click Setup.
Option 2: Directly from the Dashboard
- From the Dashboard, scroll to the Show loyalty points icon in theme section.
- This card shows the current status right away - Active in live theme or Inactive in live theme.
- From here you can click View nav icon in live theme to jump straight into the Theme Editor and see/edit it on your published theme.
Option 3: From Onsite Content
- Go to Onsite content → Loyalty hub tab.
- Under Loyalty overview, find the Show loyalty points icon in header card. If it is Inactive, click Set up; if it is already Active, you will see a Deactivate button here instead.
Note: Once enabled, the icon is automatically added to your live theme. You will see an Active in live theme badge on the Dashboard card confirming this.
Adding the Icon to Other Themes
By default, the icon is only added to your live (published) theme. If you want to preview or add it to a draft or unpublished theme as well:
- From the Dashboard, scroll to the Show loyalty points icon in theme section.
- Click Try icon in specific theme.
- In the Select and add nav icon to theme popup, choose the theme you want from the drop-down list.
This lets you test how the icon looks and behaves before publishing a theme live.
Customizing the Icon via Theme Editor
Once the icon block is added, most of its behavior and appearance is controlled through the Shopify Theme Editor, under the block named Flits Rewards Header Icon. Here you can configure:
- Icon - upload your own custom icon, or choose from the free icon library.
- Redirect - choose where the icon should take customers on click (for example, Rewards Widget, Shopify accounts), or paste a custom redirect link, and toggle Open in new tab on or off.
- Position - use the custom position selector to target a specific element in your header, and choose whether to place the icon before or after that element.
- Balance - toggle Show points balance and Show store credit balance on or off, and choose the balance number format, exact value like 125.23 or abbreviated like 1.2k
- Advanced - set an account icon selector for advanced positioning, and use Custom HTML, Custom CSS, or Custom click JS for full design and behavior control.
Tip: Use Manage app (link at the bottom of the block settings) to jump straight back into the Flits admin, or Remove block if you decide to take the icon down from a theme.
Need Help?
If you need assistance setting up the loyalty points icon in your header, contact our support team at support@getflits.com.