Introduction
The Loyalty Hub is a widget that can be embedded directly on your online store (Shopify or PrestaShop). It displays your loyalty program without any additional development.
The widget offers a unified interface to display:
The customer profile (status, points)
The VIP tiers
The available Missions
The Rewards
The Referral program
💡 Why use the Loyalty Hub?
Loyalty mechanics are often hidden or only communicated by email. The widget improves the visibility of your program and customer engagement by making all information accessible in one click from your site.
Access the Loyalty Hub
To configure the widget, go to your Loyoly back-office:
In the sidebar, go to Branding → Modules
You will see three cards: General appearance, Loyalty page and Loyalty Hub
Click Edit under the "Loyalty Hub" card
⚠️ Prerequisite: The Loyalty Hub must be activated on your account. If you don't see this option, contact your CSM to enable it.
The Loyalty Hub editor
The editor is made up of two main tabs:
Sections — Manage the content blocks displayed in the widget (Header, Profile, Rewards, Missions, Missions page, VIP tiers, VIP tiers page, Referral, Referral page, Launcher)
Theme — Customize the visual appearance (appearance, colors, typography, buttons)
A real-time preview is displayed on the right, allowing you to visualize every change instantly. You can switch between mobile and desktop views using the icons at the bottom of the preview.
At the top of the editor, a language selector lets you preview the widget in the different configured languages.
Configure the sections
The Sections tab lets you choose which blocks to display in the widget, reorder them, and configure each one individually.
Each section comes with:
An eye icon 👁 to show or hide the section
A trash icon 🗑️ to delete the section
A lock icon 🔒 for mandatory sections that cannot be deleted
You can reorder sections by drag-and-drop to change the display order in the widget.
Header
The Header section is the first element visible in the widget. It lets you customize:
Title — The name displayed at the top of the widget
Banner image — A cover image in 1125 × 369 pixels format
✨ Tip: Use an attractive banner that reflects your brand identity. The title is multilingual: click the flag to switch between languages.
Profile
The Profile section displays the key information of the logged-in customer: their name, their status (VIP tier) and their points balance.
The Profile section handles three different states:
Default — The standard display for a logged-in customer enrolled in the program
Logged out — The display for a visitor who is not logged in
Opt-out — The display for a customer who has opted out of the program
Customization options available:
Hide VIP status — Disable the display of the VIP tier in the profile
Hide points balance — Disable the display of the points balance
Rewards
Displays the rewards available and those already earned by the customer.
Rewards — The summary in the main view
Rewards page — The detailed rewards page
You can display the Rewards page by clicking on: Display on a dedicated page in Rewards, then you can also customize the section icon.
Missions
Displays the list of missions available to the customer. This section includes:
Missions — The summary of missions in the main view
Missions page — The detailed page with all missions
⚠️ V1 limitation: Missions cannot be completed directly from the widget. They are displayed for informational purposes and redirect to the dedicated page for more details.
VIP tiers
The VIP tiers section displays the loyalty levels of your program. It is configured in two parts in the sidebar: VIP tiers for the summary displayed on the main view, and VIP tiers page for the dedicated page.
Click on VIP tiers in the sidebar. The following options appear:
Display on a dedicated page — Toggle to enable a dedicated page (VIP tiers page). Click Edit to configure it
Section title — The title displayed on the card in the main view
Section description — Short description below the title
Section icon — Default, Custom icon or No icon
VIP tiers page
Click on VIP tiers page in the sidebar. The panel displays "VIP tiers / VIP tiers page" with the following settings:
Section title — The title displayed at the top of the dedicated page.
Section description — Text displayed below the title.
Section icon — Default, Custom icon or No icon
Below, each tier appears as an expandable accordion. Each tier contains:
Tier goal — Text describing the goal to reach. Default value: ##{{tier_goal}}.
Custom reward field — Free text to describe the reward associated with the tier.
Hide program rewards.
Display the previous tier's reward.
💡 Good to know: If VIP tiers are not activated in your program, this section will not appear in the widget.
Referral
The Referral section allows your customers to share their referral link directly from the widget. Click on Referral in the sidebar to configure the card displayed in the main view: Display on a dedicated page, Section title, Section description and Section icon.
Referral page
Click on Referral page in the sidebar. The panel displays "Referral / Referral page" with three tabs:
Default — The display for a logged-in customer. In addition to the title, description and icon, you can customize the icons of the sharing channels: Messenger, X, WhatsApp and SMS (Default or Custom icon for each).
Logged out — The display for a visitor who is not logged in. Here you configure the text of the Submit button (multilingual, up to 100 characters).
Congratulations — The message displayed after a successful referral. Two fields: Success message (multilingual, up to 250 characters) and Referral button for the text of the button allowing a new referral (multilingual, up to 100 characters).
Launcher
The Launcher is the floating button that appears on your site and lets visitors open the widget.
Configuration options:
Position — Place the Launcher on the left or right of the screen
Display pages — Display the Launcher on all pages or only on certain pages
URL blacklist — Exclude specific pages via the Shopify editor
✨ Tip: If you use other third-party widgets (such as Gorgias), you can opt for the dedicated link mode rather than the Launcher. This opens the widget on a dedicated page, avoiding visual conflicts with other widgets.
The link distribution mode is configured directly from the widget extension.
Customize the theme
The Theme tab lets you customize the overall appearance of the widget so it blends perfectly with your brand's visual identity.
Appearance
Configure the border radius and grid spacing of the widget for a rendering consistent with the design of your site.
Colors
Define the color palette of the widget. You can customize primary colors, background colors, text colors and accent colors.
Typography
Choose the fonts, sizes and text styles used in the widget.
💡 Good to know: The widget uses Google Fonts by default. If a Google Font is not available, a fallback font is automatically applied.
Buttons
Customize the shape, dimensions and style of the buttons displayed in the widget.
Save and publish
Once your changes are complete:
Check the rendering in the real-time preview (mobile and desktop)
Check the different languages via the language selector
Click Save in the top right to save your changes
If you delete a section and want to restore it, you can do so by clicking Add a section then choosing the corresponding section from the list.
Sharing
After finalizing your configurations, share your widget by following these steps:
Go to Communications
Select Share
Click Settings (Loyalty Hub)
Choose Add to Shopify
The widget can be deployed in two ways:
Via Launcher — A floating button on your site opens the widget in a side panel
Via a dedicated link — The widget is displayed on a dedicated page of your site, accessible via a button or a link in your navigation
✨ Recommendation: The segmented display by sections (with detailed pages for each feature) is recommended for better readability and navigation for your customers.
Frequently asked questions
Is the Loyalty Hub compatible with all Shopify themes?
Yes, the widget is designed to work with all Shopify and PrestaShop themes. It is independent and does not interfere with your site's existing design.
Can I use the widget without the Launcher?
Yes, you can choose to integrate the widget via a dedicated link rather than the Launcher. This option is ideal if you already have other widgets on your site (such as Gorgias).
Can customers complete missions inside the widget?
In the current version, missions are displayed for informational purposes. Customers are redirected to the dedicated page to complete them. A direct integration is planned for a future version.
How do I hide a section from the widget?
In the Sections tab, click the eye icon 👁 next to the section you want to hide. It will no longer be visible in the widget but will remain configurable.
Are my site's fonts compatible?
The widget supports Google Fonts. If you use a custom font that is not available on Google Fonts, a fallback font will be automatically applied. You can adjust the typography from the Theme tab.