Widget design
Set up the features of Joy's loyalty widget
Last updated
Was this helpful?
Set up the features of Joy's loyalty widget
Last updated
Was this helpful?
The Widget Design feature is your creative toolbox for crafting a loyalty program interface that looks and feels like a perfect extension of your brand. Think of it as your digital storefront's custom-made welcome mat that invites customers to explore and engage with your loyalty program.
The widget design is important because it provides a seamless, easy-to-access way for customers to interact with the program directly on your website. It allows customers to quickly view their points, rewards, and progress without navigating away from their shopping experience. A well-designed widget enhances user experience, drives engagement, and encourages participation in the loyalty program, ultimately increasing customer retention.
In the Widget Design settings, there are four sections you can customize:
Widget Theme: Edit the theme appearance, including theme colors, text colors, and widget icons.
Membership Card: Customize the colors and design of the virtual tier card.
Display: Choose fonts, select the widget language, set the widget height on mobile, and arrange the order of content blocks.
Advanced Settings: Configure instant pop-up for widget settings and hide the widget button.
Before customers sign in
Information: you can customize the text color here
Content alignment: you can choose the alignment of content (left, center or right)
Button: you can customize the color and the text color of the button
Card background: you can choose the background color or upload your own image
After customers sign in
The color and text color of the card will be the same with before-customers-sign-in card to ensure your brand identity
If you want to change the information on the card. Click on "VIP Tier" in the guide
Customize the font, language of the widget, and the order of the content blocks
Font: Choose a suitable font for your widget from a diverse library of fonts to match your store's style
Translation: Select the language for your widget. If you want to make detailed customizations to the translations of content titles, adjust them in the Translation settings or contact us for assistance
Mobile Display: Choose the size of the widget when displayed on mobile devices
Widget Content Blocks: Enable or disable content blocks and arrange their order to prioritize the most important information
The order of the content blocks is arranged from top to bottom, meaning that the content block appearing at the top will be displayed first
Instant pop-up for widget: Select where to instantly display the widget pop-up when customers visit your store. Turn it off to stop the instant pop-up
Desktop: Recommended for larger screens where popups don't block essential content
Mobile: Consider enabling only when necessary, as instant popups on small screens can frustrate visitors and increase abandonment
Control which pages will display the instant popup:
Select from options like:
Home page
Product pages
Collection pages
Cart pages
Blog pages
Custom page
Custom instant widget popup URL
Check the appropriate boxes for the pages where you want the pop-up to appear
Hide widget button: Hide the widget button; the widget is displayed by default on the website
New customer account: Enable to use ofa custom login link if you use Shopify's "New customer account" mode
Advanced CSS: Expand your widget design with CSS
Yes! The loyalty widget button will still be visible and accessible on mobile devices. Customers can tap the button whenever they want to view their points, rewards, or tier status.
After saving your settings, you can view your store on both desktop and mobile devices to see the widget behavior. You can also use your browser's device emulation mode (often available in developer tools) for quick testing.
While instant visibility might decrease slightly, the improvement in mobile user experience often leads to better overall engagement. Customers who aren't interrupted by popups are more likely to browse longer and engage with your loyalty program when they're ready.
Currently, the instant pop-up appears when customers first visit your store or the selected pages. Future enhancements may include timing controls.
Yes, the device-specific display settings should work with all Shopify themes that support the Joy Loyalty widget.
