Switch from the legacy loyalty pop-up to the new rewards pop-up

Introduction

Welcome to the world of Loyalty Rewards in AiTrillion! In this article, we'll show you how to set up the redesigned rewards pop-up and display your Loyalty Rewards program directly on your store. The pop-up is what your customers see when they click the rewards launcher — it invites visitors to join your program and shows your members their points, rewards and referral link. By displaying your rewards prominently, you'll encourage customer interaction and loyalty, driving repeat business and enhancing the overall shopping experience.

Everything on this screen is arranged across four tabs. Launcher controls the floating rewards button, Appearance controls the look and wording of the pop-up, Widgets gives you codes to place loyalty content inside your theme, and Page lets you build a dedicated loyalty page.

Note: The rewards pop-up has been redesigned with cleaner cards, a clearer points summary, and editable copy for every section. Your existing settings have been preserved, so you do not need to set up your program again.

Below, we outline the simple steps to configure the new rewards pop-up:

Step 1: Go to Loyalty Rewards > Display On Store

Note: The screen opens on the Launcher tab. Four tabs run across the top — Launcher, Appearance, Widgets and Page. Each tab is saved separately, so click Save before moving to the next one.

Step 2: Switch to the new rewards pop-up from the banner at the top of the screen.

Click Got it to keep the new design and hide the banner. Click Switch back if you would rather return to the previous pop-up layout.

Note: Switching between the old and new pop-up does not delete anything. Your colours, header text, images and section labels are preserved in both directions, and you can switch again at any time.

Step 3: Customize the rewards launcher from the Launcher tab.

The launcher is the floating button customers click to open your rewards pop-up. Every change you make here appears straight away in the Live preview on the right.

Note: Ensure that the button is enabled — Show rewards launcher on your store

From this tab you can also set:

· Hide on mobile — keeps the launcher on desktop but hides it on phones.

· Button label — the text on the button, for example Rewards or Points.

· Button background color and Icon & text color — choose Light or Dark so the label stays readable.

· Button position — place the launcher at the bottom left or bottom right of the screen.

Step 4: Change the pop-up header and branding from the Appearance tab.

Open the Brand & header section to set the wording and styling at the top of the pop-up.

· Header greeting text — the small line above your program name, for example Welcome to.

· Header text (before login) — the program name shown to visitors who are not signed in.

· Header text (after login) — the program name shown to your members.

· Choose from system templates — ready-made header styles, or upload your own Header image (min 360×180px) and Body image (min 360×400px). PNG, JPG or WebP, up to 5MB.

Note: Use the Signed in / Signed out toggle above the live preview to check how the pop-up looks to both a visitor and a member.

Step 5: Edit the wording of the signed-out and signed-in cards.

Still on the Appearance tab, expand Signed-out card to change what visitors see, and Signed-in card to change what your members see. Every label in the pop-up can be rewritten here.

· Greeting prefix, Lifetime points and Available points — the member greeting and the two numbers shown at the top of the card.

· Your rewards description — supports the {available_rewards} placeholder, which is replaced with the member's real reward count.

· Ways to earn, Ways to redeem, Redeem rewards and VIP program — the navigation rows inside the pop-up.

· Refer friends. Get rewards., Activity history and Help — the remaining sections of the member pop-up.

Note: This tab only controls how each section is worded. The referral reward itself is configured under Loyalty Rewards > Set up program > Earn points.

Step 6: Copy the loyalty widget and cart redemption codes from the Widgets tab.

Click the copy icon at the right of any code box, then paste the code into the matching theme template in your store admin.

Loyalty widget — embeds the full loyalty widget inline on any page of your store:

Cart redemption — lets customers redeem their points directly on the cart page:

Note: Place the cart redemption code above your checkout button so customers see their discount before they pay.

Step 7: Show the points customers will earn on your product and collection pages.

Scroll down to Storefront embeds on the Widgets tab. These codes show shoppers how many points a purchase will earn while they are still browsing.

Product page — paste in your product detail template:

Collection page — paste in your product collection template:

Set the Display text and Text color for each, and use [[earn-pt]] as the placeholder for the points value. You can also add a Learn more text and Learn more URL link on the product page.

Note: The data-product-price value must match the template you paste into — product.price on a product page, card_product.price inside a collection loop. If the points value shows as zero, this is usually the reason.

Step 8: Display a customer's point balance anywhere on your store.

The Inline points display section is marked ADVANCED. Copy a code and paste it wherever you want the number to appear — a header bar, an account page or a product page.

Available points — the customer's current redeemable balance:

Spent points — the total points the customer has used:

Lifetime points — all points ever earned by the customer:

Each one has its own Display text field, using [[avail-pt]], [[spent-pt]] and [[lifetime-pt]] as placeholders for the value.

Note: Inline point balances are shown only to customers who are signed in. Sign in with a test customer account to check them.

Step 9: Create a custom loyalty page from the Page tab.

A custom loyalty page gives your program a dedicated page on your store that you can link from your main menu or footer.

Turn on Enable page shortcode, optionally upload a loader image (GIF, PNG, JPG or SVG, up to 1MB), then click Generate your shortcode and paste the code into your custom page template:

Note: Click View example store to see how a finished custom loyalty page looks before you build your own.

Step 10: Use CSS trigger classes to open a specific section of the widget.

Add any of these classes to an anchor tag on your page, and clicking the link opens that section of the loyalty widget directly.

· Refer a friend — ait-trigger-refer-a-friend

· Redeem points — ait-trigger-redeem-points

· Earn points — ait-trigger-wayto-earn-points

· Points report — ait-trigger-report-points

For example:

<a class="ait-trigger-refer-a-friend">Refer a friend</a>

Step 11: Once done, click Save at the bottom of the screen.

Now the new loyalty rewards pop-up will be visible on your front store.

Note: New changes take up to 15 minutes to appear on your site. To see them straight away, click the View changes link next to the save bar.

Check out more details about What is Loyalty Reward Program. Here

Important Notes

· The loyalty rewards pop-up and widgets will appear on the storefront only if Show rewards launcher on your store is enabled.

· Ensure the loyalty program is enabled from the Dashboard before configuring display settings.

· Each tab saves separately — click Save before moving to another tab or your changes will be lost.

· New changes take up to 15 minutes to appear on your live store. Use View changes to preview them immediately.

· Widget and shortcode codes must be pasted into your store theme. You will need theme edit access for Steps 6 to 10.

· Inline point balances and the signed-in card are visible only to customers who are logged in.

· You can return to the previous pop-up design at any time using Switch back in the banner. No settings are lost.

More Helpful Articles

· Loyalty Reward Widgets — enhance customer engagement with AiTrillion

· Configure the display of loyalty rewards

· VIP Program (Tier System) — getting started with VIP tier program rewards and perks

· Refer a friend — configuring referral rewards