On-site Content Overview
On-site Content Overview: Designing Your Loyalty Experience
The On-site Content section is the "face" of your loyalty program. It allows you to customize the visual interface your customers see on your Shopify store. By tailoring these elements, you ensure that your rewards program feels like a native, professional extension of your brand identity.
You can manage all storefront settings by navigating to On-site Content in the left-hand sidebar menu of the Kefi app.
1. The Loyalty Widget (Floating UI)
The Loyalty Widget is the primary touchpoint. It "floats" on your website, allowing customers to check their points, discover tasks, and redeem rewards without leaving the page they are browsing.
A. General Settings (Aesthetics)
In the General tab, you define the "look and feel."
Brand Colors: Set your Primary Color (for buttons and icons) and Secondary Color (for text) to match your store’s palette.
Header Customization: Choose between solid colors or a Gradient for the widget header. A well-chosen gradient can make your widget look modern and premium.
Live Preview: Always use the Preview Pane on the right. You can toggle between Desktop and Mobile views to ensure the widget looks perfect on all devices before hitting "Save."
B. Content Customization (Copywriting)
The Content tab is where you define your brand voice. You can change every piece of text, including:
The Logged-Out State: Customize the "Hook." Use the Join Card Title (e.g., "Become a VIP") and Subtitle (e.g., "Start earning points today") to convert guests into members.
The Logged-In State: Personalized messaging for your members. Use dynamic variables like {n} to show customers exactly how many rewards are ready for them to claim.
Section Labels: Rename the core headers. Instead of "Ways to Earn," you might use "Our Challenges" or "Earn Credits."
2. The Launcher Settings
The Launcher is the persistent button that sits on the corner of your screen to open the widget.
Visibility: You can choose to show the launcher on Mobile Only, Desktop Only, or Both.
Tip: We recommend "Both" to maximize engagement.Positioning: Choose Bottom Right or Bottom Left. Make sure it doesn't overlap with other apps like your Live Chat bubble.
Iconography: Select an icon that represents "Value." Choose from a gift box, a trophy, a heart, or a star to catch the user's eye.
3. The Dedicated Loyalty Page
While the widget is for quick actions, the Loyalty Page is your program’s full-screen "Headquarters." This is a dedicated landing page on your Shopify store.
How to Build It:
Shopify Integration: Kefi integrates directly with the Shopify Theme Editor.
Modular Blocks: You can add specific "Kefi Blocks" to this page, such as:
Loyalty Banner: A hero section with a custom background image.
How it Works: A step-by-step guide (1. Join, 2. Earn, 3. Redeem).
Ways to Earn/Redeem Grids: Visual layouts showing all active rules.
Pro Tip: Make this page discoverable! After creating it, go to Online Store → Navigation in Shopify and add it to your Main Menu or Footer.
4. Customer Account Page Integration
For a truly seamless experience, Kefi allows you to embed the loyalty dashboard directly into the native Shopify Customer Account Page.
The Benefit: When a customer logs in to check their order history, they immediately see their points balance and available rewards.
Setup: Click "Set up in theme editor" within the Kefi app. This will take you to your Shopify theme settings where you can enable the "Kefi Loyalty Hub" extension.
Consistency: This ensures that your loyalty program isn't just a "plugin," but a core part of the customer’s account management.
Summary Checklist for Success
Match your brand colors in General Settings.
Write a compelling copy in the Content tab to encourage signups.
Test the Launcher position on mobile to ensure it doesn't block the "Add to Cart" button.
Create a Dedicated Page for your program to improve SEO and brand authority.
Need help ?
Reach out to us via the Live Chat inside the app or
email us at wecare@keficommerce.com.