Glow includes a built-in launcher position setting for the loyalty widget. Use that first if you want the launcher to move for both desktop and mobile.
If you only want to change the launcher position on smaller screens, add a small CSS rule to your Shopify theme.
Start with the built-in launcher setting
In Glow, 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.
This setting controls the default launcher position everywhere the widget appears.
Move the launcher on mobile only
To move the launcher only on mobile screens, add CSS to your Shopify theme stylesheet or your theme's custom CSS field.
This example moves the launcher to the bottom left on screens that are 600px wide or smaller:
@media only screen and (max-width: 600px) { #loyaltyLauncher { top: auto !important; right: auto !important; bottom: 20px !important; left: 20px !important; } #loyalty_callout_container { top: auto !important; right: auto !important; bottom: 35px !important; left: 83px !important; }}
You can change the bottom, left, right, and top values to match your theme. For example, increase bottom: 20px if the launcher overlaps a sticky cart button, chat button, cookie banner, or mobile navigation bar.
If you show launcher text
If Show Launcher Text? is set to Yes, Glow also shows a small text callout next to the launcher. The callout uses:
#loyalty_callout_container
Move the callout with the launcher so the two elements stay aligned.
If the callout feels cramped on mobile, you can also go to Settings > Account Settings > Widget and set Show Launcher Text? to No.
Where to add the CSS
Add this CSS in Shopify, not in Glow's widget Custom CSS editor.
The launcher button is added to your storefront page as:
#loyaltyLauncher
Glow's widget Custom CSS editor is for styling the widget content itself. The launcher button sits outside the widget, so mobile launcher-position rules should live in your Shopify theme CSS.
If you are not sure where your theme stores custom CSS, ask your theme developer or Shopify support to help you add the snippet safely.
Troubleshooting
The CSS does not change the launcher position. Confirm the CSS was added to the active Shopify theme, then refresh the storefront. The !important values are needed because Glow sets the launcher's position directly when it creates the button.
The launcher is not showing at all. In Glow, check Settings > Account Settings > Widget > Launcher Position. If it is set to Hidden, Glow will not create the default launcher button.
The launcher only overlaps on one page. If the widget should be hidden on a specific page instead of moved, use Page Visibility in the Widget tab.
Related articles