Floating Loyalty & Referral Launcher
Setting Up On-Site Display Widgets
Introduction
On-site display widgets allow customers to seamlessly interact with your loyalty program while browsing your website. From floating icons to sticky bars, widgets help boost engagement, increase visibility, and enhance the overall shopping experience.
This guide walks you through configuring, customizing, and enabling your widget so it appears exactly how—and where—you want it on your site.
Step 1 - Open the On-Site Display Settings
Navigate to the On-site Display section, then go to Launcher.
On the main screen, locate and click the Configure button.
Step 2 - Access Widget Settings
You’ll be taken to a page displaying configuration options for:
• Desktop
• Mobile
• Custom widget icons
Step 3 - Customize Desktop Settings
Click Desktop Setting to adjust your desktop widget’s colors and fonts.
Step 4 - Update Brand Settings
Step 5 - Enable Widget Visibility on Desktop
Ensure the Show the widget on desktop option is checked.
If it’s unchecked, the widget won’t appear on the website.
If you uncheck the box and save, the widget will be disabled and not visible on the website. Click on Save to apply changes.
Step 6 - Configure Animation Settings
Choose whether the widget should include animations when appearing on your site. You can disable animations entirely.
You can also adjust behavior so the widget hides while scrolling up or down.
Step 7 - Choose Widget Type
Select from three widget styles:
• Floating (default)
• Edge
• Sticky
Floating gives a hovering effect.
To test Edge, click Edge, then Save, and view the difference.
Step 8 - Choose Widget Type
Select from three widget styles:
• Floating (default)
• Edge
• Sticky
Floating gives a hovering effect.
To test Edge, click Edge, then Save, and view the difference.
The third option, Sticky, appears as a bottom bar on the website. Choose the type that best suits your brand's needs.
Step 9 - Customize Widget Text
Replace the default text (e.g., “Nectar Store”) with a message of your choice.
Step 10 - Choose Widget Placement
Select the widget’s position from:
• Bottom left
• Bottom right
• Top right
• Top left
Choose your preferred placement and proceed.
Step 11 - Adjust Offset Positioning
Use the offset slider to move the widget slightly upward or downward.
For top placements, offset adjusts downward. Set an offset value, such as 35. You can also choose to show or hide the widget on specific pages by entering URLs.
Step 12 - Hide Widget on Specific Pages
Enter URLs of pages where the widget should be hidden and paste them into the designated field.
Step 13 - Show Widget Only on Specific Pages
If URLs are added to the “show” list, the widget will appear only on those pages.
Step 14 - Save Desktop Settings
If hide URLs are set, the widget will be hidden on those pages.
Click Save to apply the settings.
These settings can be mirrored for mobile.
Step 15 - Configure Mobile Separately
You can apply different widget settings for mobile vs. desktop.
Step 16 - Customize Widget Icon
The widget icon is what users click.
You can customize it under Custom Widget Icon. Upload a 30×30 pixel PNG icon for best results.
Upload the icon directly or paste its URL. Click Save after uploading the custom icon.
Step 17 - Manage Visibility via Shopify
You can also manage widget visibility through Shopify:
Go to Themes → Customize → App embeds.
Step 18 - Locate Nector App Embed
Find Nector Loyalty and Refill under app embeds. Turn off the toggle to fully hide the widget from your storefront.
Step 19 - Save Shopify Changes
Be sure to click Save in Shopify after making changes.
Step 20 - Enable Widget Again
To re-enable, simply toggle the option back on. This completes the setup process for on-site display widgets.
Wrap-Up
You’ve now learned how to:
✅ Customize widget appearance, branding, and animation
✅ Control placement, visibility, and page-specific behavior
✅ Upload custom widget icons
✅ Manage widget display from both Nectar and Shopify
With your widget fully configured, your loyalty program becomes more visible, more engaging, and more integrated into your customers’ shopping journey. 💚
Updated on: 16/12/2025
Thank you!