OMNI offers several different widgets that you can set up on your storefront to allow customers to discover and interact with your loyalty program, including
Cart widget
Points widget
In this article: Floating Widget
Contents:
1) Introduction
1.1) What is the 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.
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 edit the widget icon displayed on your store pages. (Max 80px*80px)
You can place the widget on the Bottom left or Bottom right of the screen.
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
3) Changing theme-related settings
If you would like to change settings like:
Colors: Accent Color, Card Color, Background Color, Page Text Colour, Card Border Color, Divider Colour
Font Size
Button Styling
Icon sizes,
Please follow the following steps:
Step 1: Go to the Online Store theme editor on your Shopify Admin Page.
Step 2: Press on “Customize” to enter your theme editor.
Step 3: Head over to the “App Embeds” page.
Step 4: Look for “Main Widget” & start editing the settings as you like.
Caution: Since we prefer OMNI App users to have a consistent style and look for each of our widgets (floating widget, cart widget, and points widget), we only allow users to control the settings mentioned above in the “Main Widget” Embed. Therefore, please remember that changing these settings on "Main Widget" will change it for the other 2 widgets too. (i.e. Changing the main widget settings will affect the Floating widget and the cart widget settings too)