How to change the look of your widget with custom CSS

You can apply custom CSS to your loyalty widget by going to "Settings > Custom CSS." Custom CSS is available on all of our paid plans.

Here you can enter your custom CSS and click "Save CSS" to see it reflected on your website.

Changing the position of your loyalty widget

If you need to change the position of your loyalty widget you can include some CSS in your Shopify theme (not in Glow) to control how it displays on your site.

For example, the CSS below will move your widget UP on the screen.

/* Move the widget UP */
#loyaltyLauncher {
   bottom: 85px !important;
}

#loyalty_callout_container {
   bottom: 100px !important;
}

For example, the CSS below will move your widget DOWN on the screen.

/* Move the widget DOWN */
#loyaltyLauncher {
   top: 85px !important;
}

#loyalty_callout_container {
   top: 100px !important;
}

If the widget is overlapping another element and displaying above something on your page, you can move it UNDER other elements by lowering the z-index.

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

Please let us know if you have any questions.

Sincerely,
The Glow Team

How to change the look of your widget with custom CSS

Changing the position of your loyalty widget

Related Articles: