Widget design
Explore the features of Joy's loyalty widget, offering an enhanced user experience with more customization options and a modern interface.
Last updated
Was this helpful?
[New] Joy Loyalty
Explore the features of Joy's loyalty widget, offering an enhanced user experience with more customization options and a modern interface.
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.
To proceed with setting up the widget's interface, navigate to the branding settings page by selecting 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.
Let's explore the settings for each section of the Widget Design.
The Widget Theme plays a crucial role in determining the overall look and feel of your loyalty program. To help you get started, Joy provides 8 pre-designed templates featuring eye-catching palette colors.
If you find that Joy's templates do not suit your store, you have the freedom to fully customize the interface to match your preferences. This means you can adjust the colors, fonts, and images to align with your brand’s identity, ensuring a seamless integration with your website's existing design.
The membership card can be customized to align with the brand’s aesthetic, ensuring a seamless integration into the overall user experience. You can customize 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
In the Display settings, Joy allows you to 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. If you enable the display of the Privileges block, this block will always be shown at the top.
To edit the banner of the content block, click on the edit icon next to the toggle switch and upload your image. Important note,
If you want to change the title, you can do so in Translation Setting or contact us.
In the Advanced settings, there are specialized settings for displaying the widget.
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.
The widget offers enhanced customization and functionality to optimize the user experience on your website. We hope that with Joy, you will design an impressive, visually appealing, and brand-appropriate loyalty program for your store. If you need any assistance whatsoever, please don't hesitate to contact us!
