Adding and Customizing the Loyalty Spotlight

Goals and Outcomes

Shoppers don’t always notice the value of a loyalty program during the shopping journey. Spotlight brings loyalty into the journey with an on-site, mobile-first component that highlights rewards and benefits at key moments, helping drive engagement, participation, and purchases while enabling one-click reward application to cart.

Use Spotlight to:

• Increase loyalty visibility by showing rewards and points directly in the shopping flow.

• Drive customer login rates by encouraging earlier and faster logins.

• Boost loyalty participation and turn loyalty value into revenue.

In this article, you’ll learn how to add and customize the Loyalty Spotlight experience in your Shopify store.

Loyalty Spotlight Overview

How It Works

The Spotlight experience can appear on any page of your store and consists of two components:

• The Trigger (CTA): the compact entry point customers see on the page. It’s a call-to-action encouraging shoppers to click, log in, and see their rewards.

• The Drawer: the expanded loyalty experience that opens when the CTA is clicked.

The components adapt to the shopper’s login state and display relevant information accordingly.

The Trigger (CTA)

The Trigger is a small, visible call-to-action that encourages shoppers to log in and explore your loyalty program. It appears as an app block that you can place anywhere in your Shopify theme. When clicked, it opens the Spotlight Drawer.

You can customize the CTA text for different shopper states:

• Logged-out visitors (e.g., Sign in to see your VIP rewards)

  

• Logged-in customers (e.g., Hey ##customer_name##, redeem your ##points_balance## points!)

  

The login URL is automatically pulled from your Shopify store. After logging in or signing up, shoppers are redirected back to the page they were on before, where the drawer opens and displays their personal loyalty information.

The Drawer

The Drawer is the expanded Spotlight experience that opens after a shopper clicks the CTA. It displays personal loyalty information without taking shoppers away from the page they are currently browsing, using a familiar and intuitive drawer-style interface.

For logged-out visitors

The drawer becomes visible once the shopper logs in.

For logged-in customers

The drawer displays real-time loyalty information, including the customer’s:

• Points balance

• Tier status and points multipliers (if there are any)

• Available rewards they can redeem (incl. active birthday/anniversary rewards, and rewards that require a minimum spend/purchasing a specific item)

Shoppers can see their available rewards and apply them with one click directly to the cart, without copy-pasting codes.

Limitations

• Because the Loyalty Spotlight experience is built within Shopify, general Shopify theme limitations may affect functionality or customization.

• The Loyalty Spotlight is not supported on Shopify legacy themes (Online Store 1.0).

• If your store uses both Shopify’s new Customer Accounts and the Only Members Who Signed Up opt-in strategy, new customers cannot complete program signup from the drawer. They must sign up through the Rewards Page, the Account Page extension, or another signup area in your store.

• Free product rewards, custom coupons, and coupons tied to a Segment ID are currently not supported and will not appear under the Rewards section at this stage. You can add a link to your Rewards Page.

• Right-to-left languages are not supported.

Adding the Spotlight Experience to Your Shopify Store

Note

If you want to test the Spotlight experience first, we recommend duplicating your theme and adding it there.

To add the Spotlight components to your Shopify theme:

1. Go to your Shopify admin.

2. Navigate to Online Store > Themes > Customize.

3. In the theme editor, click App embeds in the upper left corner.

4. Look for Yotpo Spotlight Drawer and toggle it on. Make sure Yotpo Loyalty & Referrals is also enabled.

   

5. Add the Yotpo Spotlight Trigger app block to the section where you want the CTA to appear.

   

   Tip

   The Spotlight Trigger is a flexible section that you can add to multiple pages in your store (such as the homepage, product pages, or collections). You can also customize the message based on where it appears. For example, use the homepage to introduce your loyalty program, and product pages to encourage purchases.

6. Customize the settings. You can switch between Desktop and Mobile view in the theme editor to preview the experience on different screens.

7. Save your changes when ready.

Note

• The Spotlight Trigger (CTA)  is built using native Shopify components to ensure compatibility with Shopify themes and assets.  

• Because storefronts may include custom CSS or theme-level styling, we recommend reviewing your theme’s CSS and button settings to ensure the CTA appears as expected. The CTA is implemented to minimize conflicts with existing assets, but its final appearance may still be influenced by theme styles or custom modifications.

Customizing the Spotlight Components

You can customize both the Trigger and the Drawer to match your store’s design and messaging.

Customizing the Spotlight Trigger (the CTA)

1. Add the Yotpo Spotlight Trigger app block in the section where you want it to appear.

2. Click the app block to open the settings.

From here, you can:

• Edit the CTA text for logged-in and logged-out shoppers

• Adjust visual settings such as text color and font

• Control where the trigger appears on your site

Adjust Section Margins

If you want the trigger sections to match your theme's full width (edge-to-edge), adjust your theme settings.

Dawn Theme:

1. In the Shopify theme editor, click Apps in the menu.

2. Find the Spotlight Trigger section.

3. Enable Make section margins the same as theme.

Horizon Theme:

1. Open the Section settings where the Spotlight Trigger is added.

2. Under Size, change the width setting from Page to Full.

This will make the CTA section align with the rest of your theme’s layout.

Tip

If you want to prevent the Spotlight from appearing on your Rewards page, enter “/pages/rewards” in the respective field. You can hide it from any page using a URL pattern.

Customizing the Spotlight Drawer

To customize the drawer:

1. In the Shopify theme editor, go to App embeds.

2. Expand the Yotpo Spotlight Drawer.

From here, you can customize:

• Basic settings: tiles and text displayed in the drawer.

• Appearance: colors to match your brand.

• Advanced settings: labels for points, tiers, and rewards.

Updating reward names

Reward values, names, and descriptions displayed in the Spotlight are pulled directly from your Yotpo Loyalty program settings.

To edit them:

1. In the Yotpo admin, go to Manage Program > Rewards Program > Ways to Redeem.

2. Select the reward you want to edit.

3. Edit Name field.

Changes made here apply to all on-site loyalty components, including the Spotlight.

Tip

For rewards that are limited to a specific product or collection, consider naming them clearly,  so shoppers understand the requirement when redeeming the reward.

FAQs

document.dispatchEvent(new CustomEvent('yotpo-loyalty-spotlight-open-drawer'));