OMNI offers several different touchpoints you can display on your site to allow customers to discover and interact with your loyalty program, depending on your store this includes:
For stores using customer accounts
For stores using legacy customer accounts
This article focuses on the introduction and set up of the legacy floating widget
Important
To set up any optional storefront widgets, you need to make sure the "Main widget" has been enabled on your theme. Follow the instructions here to setup if you haven't.
Legacy floating widget
1) Introduction
1.1) What is the legacy floating widget?
The OMNI Floating Widget is a customized tool that provides your customers with their OMNI Member Profile everywhere on your store page to increase the accessibility of OMNI to customers, leading to an increase in usage of your store’s loyalty program, provided by OMNI. It gives you the ability to greet customers, display key content, and encourage specific actions through a non-intrusive widget that follows customers as they browse, which we will cover thoroughly later on in this widget guide.
1.2) Objectives of this widget
The objectives of this widget are to raise rewards program visibility to drive customer awareness of the member rewards program:
For unregistered shoppers: encourage customer signups by letting them learn more about the program and welcome offers through the pop-up widget that is visible everywhere on the store page.
For existing members: make OMNI rewards and basic loyalty information more visible to promote and drive usage.
1.3) How do I turn this widget on?
Step 1: Through your Shopify Admin Dashboard, click on “Online Store” through the left navigation menu, then click on the sub-menu “Themes”
Step 2: Click on the “Customize” button next to the theme to which you want to add this floating widget.
Step 3: Select the App Embed Icon, which is the 3rd icon on the list.
Step 4: Ensure you have turned “Floating widget” on and selected "Old" in the widget type.
You have now successfully turned the widget on and it’s ready to be customized further.
2) Widget Functions
This widget includes a variety of functions that you can customize to display helpful information to your customers as customers and non-customers browse through your online store.
2.1) Widget Icon
i) Customizability (For Store Owner)
You can customize the widget icon
Finetuning our default icon - by selecting background color and overlay color
Upload your own icon - Upload any image you like, with the longest side at 200px.
Set icon height - Set the height of the your icon and let the system dynamically adjust the width based on the image dimensions.
You can also configure the placement of the icon individually for desktop and mobile devices, including settings for:
widget location (bottom right OR bottom left)
widget location off set - to finetune widget placement
ii) Customers Point of View
They will see a floating widget on your store page, according to the picture you set. One example is this:
2.2) Sign-up pop-up and Widget Drawer
i) Customizability (For Store Owner)
Desktop Banner image can be uploaded for this pop-up, which the customer will see upon pressing on the small tab.
The image should meet the suggested dimensions. If it is longer than the suggested height, the image becomes scrollable
Desktop Banner Image:
Fixed height: Width 800px, Height 452px
Scrollable: Width 800px, no height limit
Mobile Banner Image:
Fixed height: Width 400px, Height 588px
Scrollable: Width 400px, no height limit
Title text and body text can be added to this banner too. (Default text: Join our Loyalty Program)
Body text: Paragraph input field and a custom addition “learn more” to lead people to your OMNI Loyalty Program FAQ
ii) Customers' Point of View
Scenario 1: Customer is logged out or a new user visits your store
If a customer has not logged in to your store or if they are a new customer, they will be given options to learn more about the program, sign up for a loyalty account, or even log in if they are an existing user.
Scenario 2: If the customer is logged in to their store account
If your customer is already logged into their store account on your website,
They will see a floating widget on your store page (just like customers who are not logged in)
Once pressed on the floating widget, a drawer will pop up on the right of the screen.
All states will show the tier, points balance, and link to My Account.
If their wallet has rewards: A slide-in screen shows all available rewards, as well as leads to pay with points or get new rewards
If their wallet is empty: A slide-in screen leads to pay with points or get new rewards
Modifying storefront widget styling
If you would like to change the styling (such as colors and font size) of the widgets above, you can configure the app-wide settings for storefront widget styling in the main widget settings. Read here for more information.
Please note that modifying the styling settings in the main widget will also impact all other storefront widgets enabled on this theme. This is to help merchants maintain a consistent look for all OMNI storefront widgets on their theme.