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:
Main widget
Customer account hub
Optional storefront widgets
Floating widget
Cart widget
Points widget
This article focuses on the introduction and set up of optional storefront widgets.
Floating widget
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
Cart widget
Introduction
The cart widget is a widget placed on the cart page to allow customers to use or redeem rewards to add to cart.
The widget encourages customers to use their points on rewards offered by the brand and enables quick redemption right on the page. They can also access rewards they have previously redeemed but not used and allow them to apply the reward to their cart
Set up
If you are setting up via the setup wizard within the admin, step 1 and 2 will be completed for you.
Navigate to the "cart" page within the theme editor of your chosen theme
Within the cart page, drag and drop the "Cart widget" to an available section
Make sure the “Main widget” app embed is enabled on the selected theme
Save your changes in the theme editor
Points widget
Introduction
A widget placed on the site’s header bar to allow customers to see their points balance and access their account page from anywhere in the site.
The widget creates exposure to your loyalty program and acts as an access point to your loyalty program interface.
Set up
This app block requires customisation on your theme to set up. Please refer to the instructions or contact us for details
Go to the theme editor and select a theme
Ask your developers to modify your store header bar to include an extension point for app blocks
Drag and drop the “Points widget” app block into the navigation. You might need to adjust the styling to fit your theme’s configuration
Make sure the “Main widget” app embed is enabled on the selected theme
Save your changes in the theme editor
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.