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

Inside Brand Settings, set your brand colors and fonts. These will automatically apply to the desktop widget.

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. 💚