The Design page is where you control how loyalty looks and works on your store: the launcher button and its popup, and your loyalty page. Its editor lets you change colors, fonts, images, texts and the sections customers see, and shows each change in a live preview of your store before you save.
The loyalty page and nudges depend on your plan. If your plan doesn't include one, the editor names the plan that does, next to the setting, with a View billing link.
Before you start
Customers see your design only when both of these are true:
The Loyalty on your store card on the Design page shows On. If it shows Off, click Turn on.
The Appstle Loyalty app embed is on in your theme. If it's off, the card says customers can't see loyalty until the app embed is on. Click Activate app embed in the banner above the card, then click Save in the theme editor that opens.
Open the editor
In Appstle Loyalty, click Design.
Click Customize. The Loyalty design editor opens full screen.
To jump straight to one panel, click Edit texts, or click the ... button and choose Colors, fonts and images or Who sees loyalty, and where.
To change how customers reach loyalty, through the launcher or only on the loyalty page, click Change on the Loyalty on your store card. The editor opens on the Visibility panel.
Find your way around the editor
Use the Launcher and Loyalty page tabs at the top left to choose what you're editing. The six panels are down the left side, and a live preview of your store fills the rest of the screen. To find a setting or text fast, type in the search box in the top bar.
Each panel covers one part of your design and shows only the settings for what you picked, the launcher or the loyalty page.
Panel | What you do there |
Style | Start from a look (Current, Minimal, Bold, Soft or Classic), or click Match my store to use your theme's colors and fonts. Then fine-tune colors, fonts, the launcher icon and position, and the popup logo. |
Content | Choose which sections customers see, such as Ways to earn, Ways to redeem, Your rewards, Referrals, VIP tiers, activity history and FAQ. For the loyalty page, also set the section order and banner image. For the popup, change the icons. |
Texts | Edit every text customers read, screen by screen, in each language your store uses. |
Visibility | Turn loyalty on or off, choose how customers reach it, limit it to signed-in customers or to customer tags, and pick the pages where the launcher shows. For the loyalty page, set its address and how it shows in search engines. |
Behavior | Set where the sign-in and create account links go, what happens after a customer copies or redeems a reward code, and whether messages and nudges show. |
Advanced | Add your own custom CSS and custom HTML. |
Preview your changes
Use the controls at the top right of the editor to see your design the way customers do.
Preview as: choose Guest (not signed in), Member (signed in, with sample points and rewards) or VIP member. VIP member is available when your store has active VIP tiers.
Page: choose which popup screen to show. On the loyalty page this menu is called Section.
The language menu: choose the language you preview and edit. It shows when your store has more than one language.
The desktop and phone icons: switch between a desktop and a phone frame.
Edit and Preview: in Edit mode, click any part of the preview to change its text, colors or image in a panel on the right. Preview works like your store, so you can click through it.
Save or discard your changes
To review what you changed, click the unsaved changes count in the top bar, such as 3 unsaved changes.
Click Save in the top right corner. The editor confirms with Design saved.
To go back to what's saved instead, click Discard, then Discard changes. To undo one change at a time, use the undo arrow in the top bar.
Nothing changes on your store until you click Save.
Things to know
On-site blocks, the cart rewards widget, and checkout and account blocks aren't in the editor. Each has its own card below the preview on the Design page. Click Manage on a card to change it.
If you click Turn off on the Loyalty on your store card, customers no longer see the launcher, the loyalty page, on-site blocks, the cart rewards widget, checkout and account blocks, or nudges. Points for visiting your store and loyalty emails stop too. Points from orders keep working, and customers still see the loyalty page and their points balance in new customer accounts.
FAQs
Why don't I see my saved design on my store?
Check the Loyalty on your store card on the Design page. If it shows Off, click Turn on. If it says customers can't see loyalty until the app embed is on, click Activate app embed in the banner and save your theme. Then reload your store.
Still missing? Check the Visibility panel. Settings like Show the launcher only to signed-in customers or Hide the launcher on these pages can hide loyalty from you.
Can I show loyalty in more than one language?
Yes. Choose a language from the language menu in the top bar, then edit its texts in the Texts panel. The preview switches to that language too. If a language has no texts yet, the menu offers to add them, for example Add French texts.
Where did the Widget Settings pages go?
They're now panels in the editor. Here's where each old page moved:
Old page | Where it is now |
Visibility & Branding | Visibility |
Labels | Texts |
FAQ | Texts, then choose FAQ in the Page menu |
Appearances | Style |
Image & Icons Customizations | Content |
Dedicated Page Section Orders | Content, on the Loyalty page tab |
Configurations | Behavior |
Custom CSS | Advanced |
Integrate Custom HTML | Advanced |