Customizing the Rewards Widget
Visit the Rewards Widget Page under On-Site Displays inside the Loyalty Program
Switch to the Style & Visibility tab on this page. Here, you can control whether to show/hide the rewards widget completely or only on desktop or mobile as per your needs.
Scroll to the Visibility section on this page. This toggle button here is used to enable or disable the rewards widget across the website.
You can also show or hide the rewards widget separately on desktop or mobile. To control desktop visibility, scroll down to the Desktop Settings and to control the mobile visibility, scroll down the Mobile Settings section on this page. You will find the toggle button to show the rewards widget individually for desktop and mobile.
For example, to show the widget on desktop but to hide in mobile devices, here is how the settings look like:
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
You can also control whether to show or hide the rewards widget on certain pages of your website. For example, you may want to hide the widget on a promo page on your website.
Scroll to the Advanced Visibility section on this page and enter the pages on which to show or hide the reward widget.
If you only want to show the rewards widget certain pages of your website, use the Show Only On These Pages field.
If you only want to hide the rewards widget on certain pages of your website, use the Hide Only On These Pages field.
Ideally, don't use both the fields as the same time.
To match pages with some common path name, you can use the "*" character in the path. For example, to show the widget only on the product pages of your shopify store, you can use path "/products/*".
For example, to hide the rewards widget the login and signup pages, you can do as shown in the below image.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Nector supports three different styles for the rewards widget:
To change the style of the widget, Switch to the Style & Visibility tab on this page. And scroll down the Desktop Settings section, and select the desired style under Widget Type field. If you have selected the Floating or Sticky style, you can optionally change the text that is shown under the Widget Text field.
Scroll down the Mobile Settings section, and change the Widget Type here as well.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
You can change the default gift icon shown in the widget. Scroll down the Icon section, and enter the link to the icon to be used.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
For best results, make sure the icon has a good resolution and there is no background in the image.
By default, the rewards widget is shown in the bottom left section. To change this, switch to the Style & Visibility tab on this page. To change the position of the widget on desktop, scroll down to Desktop Settings section and change the Position and Offset . To change the position of the widget on mobile, Scroll down the Mobile Settings section and do the same.
Position: The supported positions are bottom right, bottom left, top right and top left.
Offset: Offset is the distance between the top or bottom edge of the screen and the widget. If you have selected top left or top right position, then offset is the distance from the top of the screen. If you have selected bottom left or bottom right position, then offset is the distance from the bottom of the screen.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
By click on the rewards widget, a popup opens where the customer can view their coins, earn and redeem coins, and do many more things.
To customize the content of this popup, switch to the Banner & Content tab on this page.
By default, your brand color is shown in the top section of the popup. To add/change the banner in place of the brand color, scroll to the Banner section on this page. And upload a banner with the dimensions mentioned there.
To change the content shown when the customer is logged out, scroll to the Logged Out Config section on this page. Here, you can change the title, description and the various CTA buttons' text.
To change the content shown when the customer is logged it, scroll to the Logged In Config section on this page. Here, you can change the title.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Partner offer store has discounts & offers from various partner brands of Nector. Your customers will have a lot more options redeeming their coins.
To get your brand listed in the partner offer store, get in touch with us via the live chat or write to us at support@nector.io.
To configure the partner offer store, switch to the Partner Offer Store tab on this page. You can disable the partner offer store entirely or you can select which brands or category of brands to show or hide.
By default, all brands that conflict with your brand's category are disabled.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Visibility
Switch to the Style & Visibility tab on this page. Here, you can control whether to show/hide the rewards widget completely or only on desktop or mobile as per your needs.
Scroll to the Visibility section on this page. This toggle button here is used to enable or disable the rewards widget across the website.
Show/Hide on Desktop or Mobile Separately
You can also show or hide the rewards widget separately on desktop or mobile. To control desktop visibility, scroll down to the Desktop Settings and to control the mobile visibility, scroll down the Mobile Settings section on this page. You will find the toggle button to show the rewards widget individually for desktop and mobile.
For example, to show the widget on desktop but to hide in mobile devices, here is how the settings look like:
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Show/Hide on Specific Pages
You can also control whether to show or hide the rewards widget on certain pages of your website. For example, you may want to hide the widget on a promo page on your website.
Scroll to the Advanced Visibility section on this page and enter the pages on which to show or hide the reward widget.
If you only want to show the rewards widget certain pages of your website, use the Show Only On These Pages field.
If you only want to hide the rewards widget on certain pages of your website, use the Hide Only On These Pages field.
Ideally, don't use both the fields as the same time.
To match pages with some common path name, you can use the "*" character in the path. For example, to show the widget only on the product pages of your shopify store, you can use path "/products/*".
For example, to hide the rewards widget the login and signup pages, you can do as shown in the below image.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Widget Style
Nector supports three different styles for the rewards widget:
Edge Style
Floating Style
Sticky Style
To change the style of the widget, Switch to the Style & Visibility tab on this page. And scroll down the Desktop Settings section, and select the desired style under Widget Type field. If you have selected the Floating or Sticky style, you can optionally change the text that is shown under the Widget Text field.
Scroll down the Mobile Settings section, and change the Widget Type here as well.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Changing the icon of the widget
You can change the default gift icon shown in the widget. Scroll down the Icon section, and enter the link to the icon to be used.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
For best results, make sure the icon has a good resolution and there is no background in the image.
Widget Position
By default, the rewards widget is shown in the bottom left section. To change this, switch to the Style & Visibility tab on this page. To change the position of the widget on desktop, scroll down to Desktop Settings section and change the Position and Offset . To change the position of the widget on mobile, Scroll down the Mobile Settings section and do the same.
Position: The supported positions are bottom right, bottom left, top right and top left.
Offset: Offset is the distance between the top or bottom edge of the screen and the widget. If you have selected top left or top right position, then offset is the distance from the top of the screen. If you have selected bottom left or bottom right position, then offset is the distance from the bottom of the screen.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Banner & Widget Content
By click on the rewards widget, a popup opens where the customer can view their coins, earn and redeem coins, and do many more things.
To customize the content of this popup, switch to the Banner & Content tab on this page.
By default, your brand color is shown in the top section of the popup. To add/change the banner in place of the brand color, scroll to the Banner section on this page. And upload a banner with the dimensions mentioned there.
To change the content shown when the customer is logged out, scroll to the Logged Out Config section on this page. Here, you can change the title, description and the various CTA buttons' text.
To change the content shown when the customer is logged it, scroll to the Logged In Config section on this page. Here, you can change the title.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Partner Offer Store
Partner offer store has discounts & offers from various partner brands of Nector. Your customers will have a lot more options redeeming their coins.
To get your brand listed in the partner offer store, get in touch with us via the live chat or write to us at support@nector.io.
To configure the partner offer store, switch to the Partner Offer Store tab on this page. You can disable the partner offer store entirely or you can select which brands or category of brands to show or hide.
By default, all brands that conflict with your brand's category are disabled.
Once you make any changes, scroll to the top or bottom of the page and click on the Save button.
Updated on: 28/03/2024
Thank you!