Before you start
You must have a cashback reward configured in your loyalty settings before adding the widget. If no cashback reward is set up, the widget will not render anything on the page.
This setup requires access to your Shopify theme editor (Online Store > Themes).
What is the Loyalty widget?
The Skio Loyalty Widget is a Shopify theme block that shows subscribers how much credit they'll earn on a purchase. It renders dynamically on your product detail pages (PDPs) and updates automatically whenever your reward settings change.
The loyalty widget rendered on a product page, showing the credit amount a customer will earn.
How does the loyalty widget work?
Once added to your product template, the widget calculates and displays the credit amount a customer will earn based on your reward configuration. It updates in real time as the page loads: logged-in customers see their tier-adjusted reward, and anonymous visitors see the base rate with a prompt to sign in. You only need to update your reward settings in one place — the widget reflects changes automatically.
How to add the loyalty widget to your product pages
Step 1: Open your product template in the Shopify theme editor
In your Shopify admin, go to Online Store > Themes.
Next to your active theme, click Customize.
In the top bar of the theme editor, click the page selector (it will show Home page by default). Navigate to Products and select the product template you want to edit. For most stores, this is Default product.
Navigate to your product template using the page selector at the top of the theme editor.
Step 2: Add the Skio Loyalty Widget block
In the left-hand panel, find the Template section and locate Product information.
Click Add block.
In the panel that opens, click the Apps tab.
Find and select Skio Loyalty Widget. You can also search for it using the search bar.
Click Save to save your changes.
.jpg?sv=2026-02-06&spr=https&st=2026-06-15T01%3A20%3A36Z&se=2026-06-15T01%3A34%3A36Z&sr=c&sp=r&sig=%2FjvJvNeaOYEANsujXIFFPYAtCdtTeAJLf4l0qCJ6wbI%3D)
Find Skio Loyalty Widget under the Apps tab in the Add block panel.
Note: You can drag the block to reposition it within the Product information section. Place it below the plan picker for the most natural reading flow.
Step 3: Confirm the widget appears on your PDP
After saving, preview a product page. If your cashback reward is configured in your loyalty settings, you'll see the widget render below the plan picker showing the estimated credit earn amount.
Warning: If the widget is added to your page but no credit or cashback reward is configured in your loyalty settings, the widget will not render anything. Set up your credit reward in Skio Dashboard > Loyalty > Tiers & Rewards first.
Customize the widget
You can adjust the widget's display settings from the right-hand panel in the theme editor. Click the Skio Loyalty Widget block in the left panel to open its settings.
Mode: Choose whether to display rewards as $ (cash), Credits, or Both. Defaults to cash.
Show Balance: Toggle this on to display the customer's current credit balance when they're logged in.
Logged-in message: The text shown to customers who are signed in. The default is
You'll earn {amount} back in {creditName}.Anonymous message: The text shown to customers who are not signed in. The default is
Sign in to earn {amount} back in {creditName}.Balance message: The text shown for the customer's current balance when Show Balance is enabled. The default is
You have {balance}.Login URL: The URL customers are directed to when clicking the sign-in prompt. Defaults to
/a/account/login.Styling options: Customize text color, background, border color, border radius, border width, and icon.
Note: The message fields support three variables:
{amount},{creditName}, and{balance}. If you customize the message copy, keep these variables in this exact format for them to render correctly.
The full theme editor view with the widget settings panel open.
FAQ
The widget is on my page but nothing is showing. What's wrong?
Not seeing the widget after setup? Check that:
Credits are turned on in your Skio settings
You have at least one active credit reward rule configured
The block was saved in the theme editor
Does the widget update automatically when I change my reward settings?
Yes. The widget pulls your reward configuration dynamically, so any changes you make in your Skio Dashboard loyalty settings are reflected on the page without any additional steps.
What does a logged-in customer see versus an anonymous visitor?
Logged-in customers see their personalized reward amount, including any tier multipliers that apply to their account. Anonymous visitors see the base reward amount with a prompt to sign in. If the customer is on a higher tier with a multiplier, their display will reflect that adjusted rate once they're signed in.
Can I add the widget to multiple product templates?
Yes. Repeat the setup steps for each product template you want to add the widget to. Navigate to each template via the page selector in the theme editor and add the block the same way.
My store has a custom or complex PDP. Will the widget still work?
Yes, you can still add the widget to custom PDPs, but the process may not be as straightforward as on a standard product template. Complex themes may require some manual positioning or theme customization to integrate the block cleanly. If you run into issues, contact Skio support.
Can I change the text displayed in the widget?
Yes. The Logged-in, Anonymous, and Balance message fields in the widget settings are fully editable. The default copy works out of the box, but you can customize it to match your brand voice. If you use the dynamic variables ({amount}, {creditName}, {balance}), keep them in that exact format.