Shopify Widget Installation.

⚠️ Alpha Feature: The Shopify integration is currently in alpha testing and is not officially supported. Features may change without notice. Not recommended for production use.

The storefront widget lets customers see their loyalty points and available rewards directly on your Shopify store. They can check their balance, browse rewards, and even redeem points—all 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 in the partner sidebar
2. Go to your connected store's dashboard
3. Click the Widget tab
4. Find your embed code in the dark code block
5. Click Copy Code — you'll see a ✓ confirmation

The code looks something like this:

<script src="https://yourdomain.com/widget.js" data-key="rl_pub_xxxx"></script>

Installing the Widget on Shopify

Step 1: Open Shopify Admin

Log 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 widget code before the closing </body> tag:

    <!-- Loyalty Widget -->
    <script src="https://yourdomain.com/widget.js" data-key="rl_pub_xxxx"></script>
  </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 Integration Settings:

What Customers See

Guest View (Not Logged In)

Customers who aren't logged in see:

• Your loyalty program name
• How many points they earn per dollar spent
• Preview of available rewards
• A prompt to sign in or create an account

Member View (Logged In)

Logged-in customers see:

• Their current points balance
• Available rewards they can claim
• Recent transaction history
• 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 alpha version, only code-based discounts are supported. Automatic discounts are planned for a future release.

Widget Appearance

The widget adapts to your branding. Customize it in Integration 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. Log in to your loyalty account on the main platform
2. Visit your Shopify store
3. The widget should recognize you and show your 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 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 Integration 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 script code
4. Click Save

The widget will no longer appear. Your Shopify integration remains connected—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
• Integration Settings — Customize point rules and widget
• Creating Rewards — Define what customers can earn

Note: As an alpha feature, official support is not available. Report issues via the feedback system, but resolution is not guaranteed.