Introduction
Brighten up your widget with custom banner images and brand icons to create a seamless brand experience for your customers!
Adding a Banner Image
From the Loyalty dashboard, go to On-Site Displays > Floating Widget.
Click Banner Images.
Find the Banner Image section
Simply drag the image you want to use from a folder and drop it into this space, or select 'browse' to open your computer's folders and select it from there.
💡 Pro Tip: For the best appearance, use an image that is approximately 580px × 380px. This will ensure your banner looks great on all devices!
Adding a Brand Icon
This is a great place for a symbol that represents your brand. If you have a favicon image for your Shopify store, it should fit perfectly here! The icon will appear in the header of your loyalty widget.
Go to On-Site Displays > Floating Widget.
Click Banner Images.
Find the Banner Icon section.
Again, simply drag the image you want to use from a folder and drop it into this space, or select 'browse' to open your computer's folders and select it from there.
Don't forget to click Save once you're done!
💡 Pro Tip: Use a square image approximately 60px × 60px with a transparent background for the best results. The icon will be displayed at 37px × 37px in your widget.
Removing an image
To remove an image at any time, just hover over the image and click the trash icon that appears:
Additional Customization Options
Beyond banner images and icons, you can further customize your widget to match your brand:
Colors
Customize various colors of your widget to match your brand's palette:
Go to On-Site Displays > Floating Widget.
Click Colors.
Here you can customize:
Header background color
Header text color
Button colors
Link colors
Icon colors
Corners
Adjust the roundness of corners in your widget:
Go to On-Site Displays > Floating Widget.
Click Corners.
Choose between rounded, square, or other shapes for different elements.
Custom Icons
Upload custom icons for specific sections of your widget:
Go to On-Site Displays > Floating Widget.
Click Custom Icons.
Here you can upload custom icons for:
Rewards
Ways to Earn
Ways to Redeem
💡 Pro Tip: For custom section icons, use images that are approximately 42px × 42px for the best appearance.
Common questions
Is there a limit to the number of rewards that can be shown on the widget?
The widget will show only 10 of the rewards that you have created to ensure that the rewards are displayed properly. However, if you would like to see all rewards at once, you can reach out to us anytime and we will be happy to assist you with this.
Will my banner image work on mobile devices?
Yes! Your banner image will automatically adjust to fit various screen sizes, ensuring a consistent brand experience across all devices.
Can I use animated GIFs for my banner or icon?
Yes, you can use animated GIFs for both your banner image and icon. However, for optimal performance, we recommend using static images as they load faster and provide a smoother experience for your customers.
How can I make my widget match my store's branding?
Beyond images and icons, you can customize colors, corners, fonts, and even add custom CSS. Explore all the customization options under the Floating Widget settings to create a cohesive brand experience.