Use Glow's built-in design settings first, then use Custom CSS only when you need a more specific styling change.
Most stores can customize the loyalty widget with these areas:
Settings > Widget Design for widget style, preview, colors, and fonts.
Settings > Translation for customer-facing text.
Settings > Account Settings > Widget for launcher position and launcher options.
Settings > Custom CSS for advanced widget styling on paid plans.
Before you start
Keep the changes small and test as you go. A color or font change is easy to review, but broad CSS can affect more of the widget than expected.
Also note:
Widget Design changes save automatically.
Font controls are available on paid plans.
Custom CSS is available on paid plans.
The Widget Design preview is helpful, but it does not include every storefront feature. Test important changes on your live storefront too.
Start with Widget Design
In Glow, go to Settings > Widget Design.
Choose a widget style.
Adjust Main Color and Contrast Color.
If your plan includes font controls, choose fonts for headings, body text, and buttons.
Review the preview on the right side of the page.
Glow currently offers these widget styles:
Modern (Recommended)
Pop Up
Because these settings save automatically, make changes only when you are ready for them to apply.
Change widget text
Use Settings > Translation to edit wording in the widget, including labels, buttons, messages, tab names, and customer-facing program text.
When editing text, keep any variables wrapped in {} unless you intentionally want to remove that dynamic value. For example, {points_name} is replaced with your program's points name when customers see the widget.
Move or hide the launcher
The launcher is the floating button customers click to open the loyalty widget.
To move or hide it:
Go to Settings > Account Settings.
Open the Widget tab.
Find Launcher Position.
Choose Bottom Right, Bottom Left, Top Left, Top Right, or Hidden.
Click Save Settings.
Choose Hidden only if you plan to open the widget from another link or button on your storefront.
Use Custom CSS for advanced styling
Use Settings > Custom CSS when you need styling that is not available in Widget Design.
Custom CSS is available on paid plans.
Use Custom CSS carefully:
Add one small change at a time.
Test on desktop and mobile.
Test on a product page, collection page, cart page, and any page where customers commonly use the widget.
Keep a copy of your last working CSS so you can quickly roll back.
If the launcher itself needs to move beyond the built-in position options, add that launcher-position CSS in your Shopify theme CSS. Glow's Custom CSS styles the widget content, while the launcher is added directly to the storefront page.
Test your changes
After changing design settings or CSS:
Refresh your storefront.
Open the widget as a logged-out visitor.
Sign in as a safe test customer and open the widget again.
Check the main widget tabs, reward redemption flow, referral area, and any page where the launcher appears near other floating buttons.
Check mobile width before you consider the change finished.
Common issues
I changed Widget Design but do not see it on my storefront
Refresh your storefront page and reopen the widget. If it still does not appear, check that the Glow app embed is enabled and that Page Visibility allows the widget on the page you are testing.
I do not see font controls
Font controls are available on paid plans. Free-plan stores see an Upgrade option in the Fonts area.
I do not see the Custom CSS editor
Custom CSS is available on paid plans. Free-plan stores see an upgrade message instead of the editor.
My CSS broke the widget layout
Remove the last CSS change you added, save again, and retest. Then reapply smaller changes one at a time.
The widget overlaps another storefront button
First try a different Launcher Position in Settings > Account Settings > Widget. If that does not solve it, use Shopify theme CSS for launcher positioning.
Related articles