Shopify widget installation.

Early Access: The Shopify integration is available for early access. Try it out and share your feedback. Your input shapes how this feature evolves. Some functionality may change as we refine the experience.

The storefront widget lets customers see their loyalty points and available rewards on your Shopify store. They can check their balance, browse rewards, and redeem points without leaving your site.

Before you begin

You'll need:

• A connected Shopify integration
• Access to your Shopify theme files (Online Store → Themes → Edit code)

Getting your embed code

1. Navigate to Integrations → Shopify in the partner sidebar
2. Go to your connected store's dashboard
3. On the Overview tab, find the Widget embed code card
4. Click Copy code. You'll see a "Copied!" confirmation

The generated snippet looks like this (yours arrives pre-filled with your integration ID, public API key, domain, and installed version):

<!-- Reward Loyalty Widget v5.14.0 -->
<script>
  window.RewardLoyaltyConfig = {
    "integrationId": "019cc3a5-51cb-7315-97e1-69147399f94d",
    "apiKey": "rl_pub_xxxxxxxxxxxxxxxx",
    "apiBase": "https://your-loyalty-domain.com/api/widget"
  };
  window.RewardLoyaltyConfig.customerId = {{ customer.id | default: 'null' }};
  window.RewardLoyaltyConfig.customerEmail = '{{ customer.email | default: "" }}';
</script>
<script src="https://your-loyalty-domain.com/widget/rewards.js?v=5.14.0" defer></script>
<link rel="stylesheet" href="https://your-loyalty-domain.com/widget/rewards.css?v=5.14.0">

Three parts matter:

• window.RewardLoyaltyConfig carries your integration ID, your rl_pub_ public widget key (designed to be visible in storefront code), and the API base URL the widget calls.
• The {{ customer... }} tags are Shopify Liquid. When a customer signs in to your storefront, Shopify fills in their ID and email, and the widget switches to member view.
• The ?v= query string matches your installed Reward Loyalty version, so browsers fetch fresh widget files after an upgrade.

Important: Copy the snippet from your dashboard instead of retyping this example. The generated version contains your real keys and URLs.

Installing the widget on Shopify

Step 1: Open Shopify admin

Sign in to your Shopify admin at your-store.myshopify.com/admin.

Step 2: Navigate to theme editor

1. Go to Online Store → Themes
2. Find your current theme and click Actions → Edit code

Step 3: Find theme.liquid

In the Layout folder on the left, click on theme.liquid. This is Shopify's main layout file that wraps every page.

Step 4: Add the code

Scroll to the bottom of theme.liquid and paste the copied snippet before the closing </body> tag:

    <!-- Reward Loyalty Widget v5.14.0 -->
    <script>window.RewardLoyaltyConfig={...};</script>
    <script src="https://your-loyalty-domain.com/widget/rewards.js?v=5.14.0" defer></script>
    <link rel="stylesheet" href="https://your-loyalty-domain.com/widget/rewards.css?v=5.14.0">
  </body>
</html>

Step 5: Save and preview

Click Save in the top right corner. Then click Preview to see your Shopify store with the widget. It should appear in the corner of every page.

Widget placement

By default, the widget appears in the bottom-right corner. You can change this in Shopify Settings:

What customers see

The widget recognizes customers through your Shopify theme: the embed snippet passes the signed-in storefront customer's ID and email using Shopify Liquid. Being signed in to the loyalty site itself makes no difference to the widget.

Guest view (not signed in to your store)

Customers who aren't signed in to your Shopify store see:

• Your loyalty program name
• How many points they earn per dollar spent
• Preview of available rewards
• A prompt to sign in to see their points

Member view (signed in to your store)

Customers signed in to your Shopify store see:

• Their current points balance
• Available rewards they can claim
• Option to redeem rewards directly

How redemption works

When a customer redeems a reward through the widget:

1. They click on an available reward
2. A discount code is generated for them
3. They're prompted to apply it at checkout
4. The discount appears in their cart

Note: In the current release, only code-based discounts are supported. Automatic discounts are planned for a future update.

Widget appearance

The widget adapts to your branding. Customize it in Shopify Settings:

Testing your widget

After installation:

1. Visit your live Shopify store in a new browser window
2. Look for the widget icon in the configured corner
3. Click to expand the widget
4. Verify your program name and branding appear correctly

Testing the member view:

1. Sign in to your Shopify store with a customer account
2. Open any page. The widget reads the signed-in customer from your theme and shows their balance

Troubleshooting

Widget not appearing

Possible causes and solutions:

Widget shows wrong data

Cause: API key might be from a different integration.

Solution: Copy fresh embed code from the Widget embed code card on the Overview tab and reinstall.

"Unable to load rewards" error

Possible causes:

• Integration is paused. Resume it in the dashboard
• Store was disconnected. Reconnect the integration
• Network issue. Try refreshing the page

Widget overlaps other elements

Solution: Try a different position in Shopify Settings, or adjust your Shopify theme's CSS.

Best practices

Test on mobile devices. The widget is responsive, but verify it works well on your Shopify store's mobile layout.

Check dark mode. If your Shopify theme supports dark mode, test the widget in both light and dark themes. Set widget mode to "Auto" for automatic adaptation.

Duplicate your theme first. Before editing theme.liquid, duplicate your theme in Shopify admin so you can revert if needed.

Test the full flow. Make a test purchase on your Shopify store, verify points appear, and try redeeming a reward.

Removing the widget

To remove the widget from your Shopify store:

1. Go to Online Store → Themes → Edit code
2. Open theme.liquid
3. Find and delete the widget snippet (the comment, both script tags, and the stylesheet link)
4. Click Save

The widget will no longer appear. Your Shopify integration remains connected, and you can reinstall the widget anytime.

Next steps

After installing the widget:

1. Configure your settings to customize appearance
2. Test the customer experience by making a purchase
3. Monitor the Activity tab for webhook events

Related topics

• Connecting Your Shopify Store: Initial setup guide
• Shopify Settings: Customize point rules and widget
• Creating Rewards: Define what customers can earn

We'd love your feedback! We're improving the Shopify integration based on real-world usage. If you run into issues or have suggestions, share them through the feedback system. It helps us prioritize what to build next.