Skip to main content

How do I reposition or restyle the loyalty widget?

Use Glow's built-in settings first. They cover the most common launcher positions, widget colors, fonts, text, and basic display options.

Written by Brandon Swift

Use Glow's built-in settings first. They cover the most common launcher positions, widget colors, fonts, text, and basic display options.

Use CSS only when you need a change that is not available in Glow's normal settings.

Move or hide the default launcher

The launcher is the floating Rewards button customers click to open the loyalty widget.

  1. In Glow, go to Settings > Account Settings.

  2. Open the Widget tab.

  3. Find Launcher Position.

  4. Choose Bottom Right, Bottom Left, Top Left, Top Right, or Hidden.

  5. Click Save Settings.

Glow Widget settings showing Launcher Position and Save Settings highlighted

Choose Hidden if you want to remove Glow's default floating launcher and open the widget from a menu link, custom button, or another page element instead.

Hiding the launcher does not turn off your loyalty program. Customers can still use Glow through a custom launch link when the Glow app embed is enabled and the page loads Glow's storefront script.

Change the widget's normal design

For most design changes, go to Settings > Widget Design.

Use Widget Design to preview the widget and adjust settings such as:

  • Widget style

  • Main color

  • Contrast color

  • Fonts, on paid plans

Widget text is managed separately in Settings > Translation.

Use Custom CSS for deeper widget styling

Go to Settings > Custom CSS when you need styling that is not available in Widget Design.

Custom CSS is available on paid plans. Stores on the Free plan see an upgrade prompt instead of the CSS editor.

Glow Custom CSS page on a Free plan showing the paid-plan upgrade prompt

Paid-plan stores can enter CSS and click Save CSS.

Glow Custom CSS editor showing the CSS field and Save CSS button

Test CSS changes carefully. Custom CSS can change the layout of the loyalty widget, and a broad CSS rule may affect more of the widget than you expected.

Move the launcher beyond the built-in positions

If the built-in positions do not fit your theme, add launcher-position CSS to your Shopify theme CSS, not to Glow's Custom CSS page.

Glow's Custom CSS styles the widget content. The launcher button itself is added directly to your storefront page, so theme CSS is the right place to adjust the floating launcher.

For a launcher in a bottom position, increase the bottom value to move it farther up from the bottom of the screen:

#loyaltyLauncher {  bottom: 85px !important;}#loyalty_callout_container {  bottom: 100px !important;}

If your launcher uses a top position, adjust top instead:

#loyaltyLauncher {  top: 85px !important;}#loyalty_callout_container {  top: 100px !important;}

The #loyalty_callout_container rule only matters when Show Launcher Text? is enabled in Settings > Account Settings > Widget. If you move the launcher and use launcher text, update both selectors so the button and text stay together.

Fix overlap with another storefront element

Some themes and apps also add floating buttons, banners, chat widgets, or sticky cart controls. If Glow overlaps one of those elements, first try a different built-in Launcher Position.

If you still need CSS, move the launcher with top, right, bottom, or left values in your Shopify theme CSS.

You can also lower Glow's stacking order with z-index, but use this carefully. If the value is too low, the launcher may appear behind another element or become hard to click.

#loyalty_callout_container,#loyaltyLauncher {  z-index: 55 !important;}

Common issues

I set the launcher to Hidden and the button disappeared

That is expected. Hidden removes Glow's default floating launcher.

If you still want customers to open the widget, add a custom link or button that launches Glow.

My CSS does not move the launcher

Make sure launcher-position CSS is added to your Shopify theme CSS. Glow's Custom CSS editor is for widget styling and paid-plan widget CSS, not the storefront launcher button.

Also check that your CSS targets the correct selector:

  • #loyaltyLauncher for the floating button

  • #loyalty_callout_container for the optional launcher text

The launcher text is separated from the button

Update both #loyaltyLauncher and #loyalty_callout_container, or turn off Show Launcher Text? in Settings > Account Settings > Widget.

The launcher is missing on only some pages

Check Settings > Account Settings > Widget > Page Visibility. Page Visibility controls where the widget is allowed to load on your storefront.

Related articles

Did this answer your question?