Appearance
Theme App Extensions Overview
Theme App Extensions let you place individual loyalty components anywhere in your Shopify store theme. Unlike the Customer Account UI Extension (which is a single, full-page dashboard), Theme App Extensions are modular — you can pick and choose which components to display, and place them on any page that supports app blocks.
Why use Theme App Extensions? They give you maximum flexibility. Show a points balance on the homepage, display available rewards on product pages, add a referral sharing widget to your blog — the choice is yours. Each block works independently and can be placed multiple times across your store.
Available Blocks
Keystone Loyalty Rewards provides six app blocks, each serving a specific purpose. Click any block to read its full documentation:
- Account Data Block — Points balance, tier status, recent activity
- Rewards Block — Browse and claim rewards from any page
- Claims Block — Claimed rewards and discount codes
- Earning Rules Block — Ways to earn points
- Referral Sharing Block — Unique referral link and social sharing
- Referral Claim Block — Claim form for referred customers
How to Add a Theme App Extension to Your Store
Step 1: Open the Shopify Theme Editor
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on your active theme.
Step 2: Navigate to the Page You Want to Edit
Use the page selector at the top of the Theme Editor to navigate to the page where you want to add a loyalty block (e.g., Homepage, Product page, Cart page).
Step 3: Add the App Block
- Click Add section or Add block in the section where you want to place the loyalty component.
- In the Apps section, find Keystone Loyalty Rewards and select the specific block you want to add.
- The block will appear in the editor. Drag and drop to reposition within the section.
Step 4: Configure the Block
- Click on the newly added block to see its settings in the right sidebar.
- Adjust the customization options (colors, layout, labels, etc.) to match your theme.
- Preview the changes. Blocks are responsive — toggle between desktop and mobile views.
Step 5: Save and Publish
Click Save to publish your changes. The block will immediately be visible on your live store.
Tip: You can add multiple instances of the same block to different pages. For example, place the Rewards block on both the homepage and product pages, each with different display settings.
Placement Ideas
| Page | Suggested Blocks | Why |
|---|---|---|
| Homepage | Account Data, Earning Rules, Referral Sharing | Welcome returning customers and showcase your loyalty program |
| Product Pages | Account Data, Rewards | Show points balance and available rewards to encourage purchases |
| Cart Page | Rewards, Claims | Remind customers to use their rewards before checkout |
| Thank You / Post-Purchase | Referral Sharing, Earning Rules | Encourage referrals and continued engagement after purchase |
| Dedicated Loyalty Page | All blocks | Create a comprehensive loyalty program page |
| Landing Page (Referrals) | Referral Claim | Welcome referred customers and let them claim their reward |
General Block Requirements
| Feature | Details |
|---|---|
| Independent Placement | Each block works independently — no dependency on other blocks |
| Responsive Design | All blocks adapt to mobile, tablet, and desktop |
| Authenticated Data | Blocks load customer-specific data via authenticated API calls |
| Loading & Error States | Loading skeletons while fetching, friendly error messages if needed |
| Enrollment Awareness | Blocks respect loyalty program enrollment status |
| Per-Block Settings | Each instance has its own settings in the Theme Editor |
| Online Store 2.0 | Requires an Online Store 2.0 compatible Shopify theme |
Frequently Asked Questions
Can I add the same block to multiple pages?
Yes. Each block can be placed on as many pages as you want, with different settings per instance.
Do blocks work with all Shopify themes?
Theme App Extensions require an Online Store 2.0 compatible theme. Most modern Shopify themes support this.
What happens if a customer is not logged in?
Blocks requiring customer data show a "Log in" message or are hidden. Earning Rules and Rewards can show general program info to visitors.
Will the blocks slow down my store?
No. All blocks load data asynchronously and do not block page rendering.
Can I use blocks instead of the Customer Account UI Extension?
Yes. You can use Theme App Extensions on any page as an alternative or complement to the full dashboard.