All Collections
Getting started
Setting up OMNI widgets on your storefront
Setting up OMNI widgets on your storefront
OMNI Team avatar
Written by OMNI Team
Updated over a week ago

OMNI has a number of widgets on the storefront that will allow customers to access the loyalty program interface. This article will guide you on how to set up the following widgets

  • Main widget (mandatory)

  • Account widget (mandatory)

  • Customizing your widgets

Main widget

The main widget is a mandatory widget. It hosts the loyalty program's main user interfaces, allowing customers to see and perform key actions like redeeming and using rewards.

To set up, follow the steps below

  1. From your theme editor, select the theme you would like to edit
    ​

    If you're entering from our setup wizard or settings page, you can skip directly to step 2

  2. Click on the app embed icon on the left of the theme editor navigation and enable the "OMNI main widget" toggle

  3. Click Save, and the main widget is now enabled


    ​Continue to setup the account widget below

Account widget

The account widget is a mandatory widget. It is the entry point for your customers to your loyalty program, allowing them to access the loyalty program interface from their account page.

To set up, follow the steps below

  1. From your theme editor, select the theme you would like to edit and go to the Customer account page under Classic customer accounts.


    ​If you're entering from our setup wizard or settings page, you can skip directly to step 2

    You will need to enable classic accounts on your Shopify store first for customers to access your loyalty program

  2. You will be prompted to log-in to a customer account on your store to be able to access this page. Log in with any customer account to continue

    You can use an account you've previously created or create a new account to log in

  3. Once you're logged in, click Add section on where in the page you want to insert the OMNI account widget and choose OMNI account widget under the apps tab

    You can also drag the app section to show the OMNI account widget in different areas of your page

  4. The loyalty program UI should now be rendered on your page. If you are previewing the interface before you have launched the loyalty program, you will see a sample customer information populated for your reference.

    If you cannot see the loyalty program interface populate, you might not have enabled the OMNI main widget above.

Customizing your widget styling

OMNI's widgets offer a variety of customization options for you to customize the styling of the loyalty program widgets to match your brand's look and and feel.

You can modify the styling by

  1. Locate the app embed tab and find the OMNI main widget

  2. Click on the arrow dropdon on the OMNI main widget and styling settings will surface.

  3. Modify the individual styling settings and your changes will be reflected on the theme editor preview automatically. Save your theme once you have confirmed your changes to reflect it on the live site.
    ​

Did this answer your question?