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:
Enable Widgets in Okendo Admin
Access Okendo Admin > Settings > Widgets under the Settings page.
Verify that the Enable Review Widgets toggle switch is turned on.
Enable Okendo App Embed in the Shopify Theme Customizer
Access the Shopify admin panel > Online Store > Themes.
Locate desired theme and select Customize.
Go to the Theme Settings tab and click it.
Locate the App Embeds tab.
Toggle on the Okendo Reviews app embeds switch.
Enable the Floating Widget in Okendo Admin
Access Loyalty > On-Site Displays > Floating Widget > General
Verify that the Show Floating Widget toggle switch is turned on
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.