Installing and Configuring the Banner Widget
G
Written by Glenn Lee
Updated over a week ago

The Banner Widget is a horizontal banner that can be included on your site, as a reminder of your program. it is designed to be placed underneath your sites navigation menu and works especially well on the cart page, to promote contextual rewards.

In this article, you’ll learn about:

  • How to implement the Banner Widget on your Shopify storefront.

⚠️ NOTE

Before proceeding, please ensure that you have Okendo widgets and app embeds enabled. Review the Troubleshooting section of this article to find out how.

Embed the Banner Widget into your page

Go to Shopify Admin > Sales Channels > Online Store. Select Customize against your store theme.

Select the appropriate template at the top of the page. Then go to the section below the header (or create a new section for the app block) and select Add Block > Apps > Loyalty Banner Widget. The Banner Widget should now appear, below the navigation menu.

Select the app block that contains the Banner Widget and make sure Make section margins the same as theme is unchecked.

Once you've finished customising, save the template and exit.

Configure the Banner Widget elements

Configure the banner widget by going to Okendo Admin > Loyalty > On-site Displays > Banner Widget. Note the configurable elements of the widget on the left and the preview pane on the right. Review changes to the Banner Widget, in real time, via the preview pane.

Configure style elements of the Banner Widget, including button colors, button borders, icons, text and link colors.

Quickstart

Simplify the process of styling the Banner Widget by selecting Quick Start > Auto Style. Auto Style can create an entire color palette, based on the selections below and applies them across different elements of the Banner Widget:

  • Brand Primary Color

  • Primary Text Color

  • Secondary Text Color

Banner Style settings

Style settings enable merchants to modify the look and feel of the Banner Widget, in its collapsed state.

Configurable Options

Description

Icon

Select an icon to display on the Banner Widget, in it's collapsed state.

Background Color

Choose the background color for the collapsed widget.

Background Hover Color

Customize the background color on mouse hover.

Text Color

Define the color of the text.

Text Hover Color

Adjust the text color on mouse hover.

Expanded Style settings

Use this section, to configure the expanded state of the Banner Widget.

Configurable Options

Description

Brand Primary Color

Set the color for items such as slider redemptions.

Brand Positive Color

Used for positive messaging, including tick icons and success alerts.

Hide Okendo Branding

Toggle to remove 'Powered by Okendo' branding from the Loyalty Widget (available on Growth plans and above).

Text

Configurable Options

Description

Primary Text Color

Color used for main text in the Banner Widget.

Secondary Text Color

Color used for secondary text in the Banner Widget.

Link Text Color

Color used for link text throughout the Loyalty Widget.

Buttons

Configurable Options

Description

Button Background Color

Customize button colors.

Button Background Hover Color Hover

Configure button colors on mouse hover.

Button Text Color

Set the color of the button text.

Button Text Hover Color

Adjust button text colors on mouse hover.

Button Border Color

Define the color of button borders.

Button Border Hover Color

Set the color of button borders on mouse hover.

Troubleshooting

I cannot see the Banner Widget app block in my themes

Please make sure the follow are enabled:

  1. Enable Widgets in Okendo Admin

    1. Access Okendo Admin > Settings > Widgets under the Settings page.

    2. Verify that the Enable Review Widgets toggle switch is turned on.

  2. Enable Okendo App Embed in the Shopify Theme Customizer

    1. Access the Shopify admin panel > Online Store > Themes.

    2. Locate desired theme and select Customize.

    3. Go to the Theme Settings tab and click it.

    4. Locate the App Embeds tab.

    5. Toggle on the Okendo Reviews app embeds switch.

  3. Enable the Floating Widget in Okendo Admin

    1. Access Loyalty > On-Site Displays > Floating Widget > General

    2. Verify that the Show Floating Widget toggle switch is turned on

  4. Ensure the loyalty program has been launched. You will know this if under Loyalty > Settings > General, the Backdate Program section is greyed out.

If you have any specific questions or need further assistance, feel free to reach out to our support team.

Did this answer your question?