Loyalty widget design

Overview

The first key to a successful loyalty program is visibility. Customers need to see and access it easily if you want them to engage. That’s where your loyalty widget comes in—it makes your program instantly available during the shopping journey.

The widget design is important because it provides a seamless, easy-to-access way for customers to interact with your program directly on your website. It allows them to quickly check their points, rewards, and progress without leaving their shopping flow. A well-designed widget not only fits your brand’s style but also enhances the overall user experience, drives engagement, and encourages participation—ultimately boosting customer retention.

With Joy, you can customize the widget to reflect your colors, fonts, and tone, giving your loyalty program both visibility and a professional, branded look that feels like a natural extension of your store.

Before we start

Preview mode

It is highly recommended that you have a duplicate theme on your store by using the Shopify duplicate feature. This might take a while, depending on how large your theme size is.

Then you can enable the Widget's App Embeds and hit the save button.

Later on, you can use the Preview feature of Shopify to see the widget on the storefront without affecting live customers.

Brand colors

Joy automatically detects your store’s brand palette directly from your store. You’ll see your primary, secondary, and accent colors ready to go in Settings > Colors.

• Click the color picker of the color name to update your widget’s main tone.

• These colors are suggested directly from your brand, so your widget naturally fits your storefront design.

This ensures your widget doesn’t just stand out—it feels like it belongs.

Also, these brand colors, along with the color history, are available in the color picker throughout the app, which you can easily reuse and mention.

Step 1: Open the widget design settings

From your Joy dashboard, you can go to On-site content > Branding > Widget Design. On this page, you can change widget color and style, where and how it displays, and even advanced settings like custom CSS.

Step 2: Adjust the layout

Under the Widget theme section, you can choose to have your Display type as a floating widget or a drawer. With the floating widget, it will take a small space on your storefront like a chatbox; meanwhile, the drawer can look like your cart drawer. If you already have a cart drawer, you may find this layout fits seamlessly with your current shopping experience.

On mobile, both of these styles will have the same behavior as sliding up from the bottom to be responsive.

Step 3: Adjust the layout and style

In the widget design editor, you can fine-tune different parts to make it both visible and seamless:

Header

Change the banner background (color or image), edit the welcome text, and preview how it looks for both logged-in and logged-out customers. A strong header sets the tone and makes your widget inviting. You can embed icons and text into your background to make the banner more engaging

Floating button

Change your floating button text and icon. By default, it uses the primary color; you can change it, but beware that you should choose an easy-to-read color scheme. Try not to use the grey button while the black text.

Besides, you can level up with more with the Generate AI icon feature to create an icon for your floating button. Feel free to choose the starting template from our list of presets. Prompt ChatGPT, for example, for a better prompt and input it back to Joy.

Otherwise, if you already have a floating button designed by your team, feel free to upload it.

Membership card

The membership card is one of Joy’s signature design concepts—a unique way to showcase your loyalty tiers directly inside the widget. It’s not just functional; it’s a branded experience that makes customers feel part of something special.

You can style the card to fit your brand identity:

• Black or dark tones → create a sleek, premium feel for luxury brands.

• Gold or metallic gradients → highlight top VIP tiers with an exclusive look.

• Bright colors (like teal, coral, or lime) → bring energy and playfulness, perfect for lifestyle or fashion stores.

• Background images → add personality, like coffee beans for a café or fabric textures for apparel.

By giving each tier a distinct style, the membership card makes progress and rewards feel tangible—encouraging customers to keep engaging with your program.

Arrange content

Go to the Display tab to decide which sections (like Ways to Earn or Ways to Redeem) appear first. By putting the most engaging blocks at the top, you encourage customers to interact with the parts of the program that matter most.

Font

Not always the first thing people change, but still very important. By default, it is set to Inter font to make the preview in the app and the storefront match completely. But it is recommended to use the "Inherit theme fonts" option, it will pick up your current theme fonts and display accordingly, in return, on Joy's admin design, it will not preview 100% correctly.

Step 4: Text and translations

For example, if you want to change the text of the membership card or in the widget, you will need to go to Settings > Translation > Widget design. Because our app supports translations to many languages, so each text should be changed in Translations to ensure consistency. See more on how to translate content in our guide.

Step 5: Advanced settings

Mobile display

In the display tab, you can choose how much space the widget should takes, it is best to use the 80% height option.

Show only after login

This can be a double-edged sword; not showing up to guest customers can reduce the visibility of the loyalty program. Make sure customers are aware of the loyalty program by banner, footer link, promotion, etc. Otherwise, you can try to improve the visibility like this before considering this option.

Hide widget button

Use can hide the floating button, but also consider a similar approach like "Show only after login" section above. If you hide the floating button, make sure that customers have other ways to see the widget; it can be a link button, or top menu icon, or you can just use the Loyalty page to replace.

Custom CSS

You can customize the widget with the Custom CSS feature as you wish. If you cannot make the CSS code work the way you want, feel free to reach out to our support team.

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 pop-up:

1. Select from options like:

   • Home page

   • Product pages

   • Collection pages

   • Cart pages

   • Blog pages

   • Custom page

   • Custom instant widget popup URL

2. Check the appropriate boxes for the pages where you want the pop-up to appear

FAQs

What if my store is multilingual?

Joy supports translations. You can adjust text for each supported language so customers always see the widget in a familiar way. We integrate with Shopify Translate and Adapt, so on the change of language changes, customers see the widget in the desired language.

Can customers access the loyalty program without the widget?

Definitely. You can link customers to a dedicated loyalty page or integrate Joy into your Shopify account section. The widget simply makes access faster and more visible. One recommended way is to have a top bar to trigger a drawer loyalty widget, which saves space for other widgets like a chatbox. Who knows, one day we will be integrated so well with the chatbox agent like Chatty that customers can browse and redeem right in the chat agent. Let's see.

How can I test my widget before publishing?

We recommend turning the widget on in your draft theme and previewing it on desktop and mobile. This helps ensure visibility, responsiveness, and a perfect brand fit.

Does this feature work with all Shopify themes?

Yes, the device-specific display settings should work with all Shopify themes that support the Joy Loyalty widget.

If I disable the instant pop-up on mobile, will it affect my loyalty program engagement?

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.

How can I test how the widget appears on different devices?

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.

Besides two sets of icon themes, can I add my own icon?

Yes, you can. Go to Display > Widget content blocks, see the section list with the edit icon. Click on that and you can upload your own icon.

Also, you can upload a section banner for each of the home sections.

Can I hide the widget if I prefer a loyalty page instead?

Yes. Joy lets you choose between using the floating widget, a full loyalty page, or both. Keep in mind that the widget is often the most visible option, while the page is better for SEO and detailed program info.

What should I do if the widget doesn’t show up?

First, check if it’s enabled on your theme and targeted to the right pages. One of the most common things is that you may set the widget to logged-in customers only, meanwhile you are not logged in. If it still doesn’t appear, clear cache, preview on draft theme, and contact Joy support for quick troubleshooting.