Widget design
Set up the features of Joy's loyalty widget
Last updated
Was this helpful?
[Updated] Joy Loyalty
Set up the features of Joy's loyalty widget
Last updated
Was this helpful?
Who can use this feature?
Basic features is available in all plans
Enhanced features (Display) are available for: Professional, Advanced, Enterprise plans.
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.
Select Branding -> Widget Design -> Setup
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.
Set up Widget Theme
Adjust the colors, fonts, and images to align with your brand’s identity. Choose your widget theme color. You can choose the template or upload your image
Set up Membership card
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
Set up Display
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 popup for widget: Select where to instantly display the widget popup when customers visit your store. Turn it off to stop the instant popup
Hide widget button: Hide the widget button; the widget is by default displayed on the website
New customer account: Enable to use a custom login link if you use Shopify's "New customer account" mode
Advanced CSS: Expand your widget design with CSS
