Joy's Widget
Explore the features of Joy's updated loyalty widget, offering an enhanced user experience with more customization options and a modern interface.
Last updated
Explore the features of Joy's updated loyalty widget, offering an enhanced user experience with more customization options and a modern interface.
Last updated
Who can use Joy's Widget?
Basic features are available for: Free users.
Advanced design features are available for: Professional, Advanced, Enterprise plans.
Hello there, valued users! We're glad you're here. Noticing that the current Joy loyalty widget interface is outdated and not optimized for UX/UI, Joy is launching a new widget starting June 1st. This new widget is designed to enhance aesthetic appeal and offer greater customization options, providing businesses with a more modern, intuitive, and flexible tool to manage their loyalty programs.
This new widget focuses on upgrading design and adding new features, including:
Tier Virtual Card: A VIP Tier card that allows users to view their current reward points and progress towards tier advancement, enhancing their shopping experience.
Privileges Block: New content block that displays the privileges enjoyed by members at each tier.
New Icon Package: A complete replacement of the old icon set with a new, more beautiful and modern icon set.
To proceed with setting up the widget's interface, navigate to the branding settings page by selecting Branding -> Widget Design -> Setup.
For merchants currently using the old widget, please select "Try now" to try the interface and features of the new widget.
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 section allows you to customize several aspects of the widget's appearance, including the widget colors, text colors, widget banner, icons, and the widget's position. 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 9 pre-designed templates featuring eye-catching gradient colors. These templates are suitable for various types of stores across different industries, giving you plenty of options to choose from.
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.
In the example image above, I used the "peachy pink" color from Joy's template and changed the Widget banner. You can use Joy's templates as a base to customize the widget interface to suit your specific needs, just as I did in my example.
Alternatively, you can completely customize the widget interface as shown in the example image. In the image, we changed the widget banner, primary and secondary colors, text color, widget icons, and widget position. These modifications allowed us to align the widget interface with the store's branding. You can change everything to tailor the interface entirely to your preferences.
The customization options provided by Joy allow you to create a unique and personalized look for your loyalty program, enhancing the overall user experience and making your store stand out. This flexibility ensures that your loyalty program not only looks good but also resonates with your customers, encouraging greater engagement and loyalty.
The membership card is a new feature of Joy's loyalty program, designed to enhance customer engagement and retention. This virtual card allows users to easily track their current reward points and monitor their progress towards tier advancements. By providing a clear visual representation of their membership status, the card encourages customers to continue engaging with the program to unlock additional benefits.
The membership card can be customized to align with the brand’s aesthetic, ensuring a seamless integration into the overall user experience. Joy allows you to easily customize the background, images, colors, and logo of the membership card. Additionally, Joy allows you to create multiple membership card designs corresponding to each tier in the VIP Tier program. Each membership tier can have a distinct card, adding an extra layer of appeal to your VIP tier program.
Here is an example of a customized membership card. I have customized the diamond-tier membership card by changing the background, colors, and logo of the card. Joy allows you to modify nearly every aspect of the membership card's design, giving you the freedom to create cards that best suit your store's branding. This flexibility lets you unleash your creativity to design the most fitting and appealing membership cards for your customers.
If you don't want to spend too much time designing a membership card, Joy also offers a set of pre-designed templates for membership cards with four tiers: Before Sign In, Bronze, Silver, and Gold. Our ready-made templates are designed to be suitable for a variety of stores across different industries. They are ideal for stores with a simple VIP tier program, allowing you to quickly implement a professional-looking loyalty card system without extensive customization.
Important Note: Currently, you cannot edit the icons of tier membership cards within Membership Card section. To change the icons for tier membership cards, you need to edit the tier icons in VIP Tier settings.
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.
In conclusion, the new 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!
Need help? Check out Frequently Asked Questions.👇
