Setting up the Embedded Loyalty Widget

What is Embedded Widget?

Embedded Widget is an alternative to the Tab Widget for your customers to access the loyalty program interfaces on your store. Instead of accessing the loyalty program by clicking the Tab Widget at the bottom of the screen, you may choose the Embedded Widget and place it anywhere on your storefront.

Embedded Widget displays different information according to the login status of your customers.

For guest customers, they will see the name of your loyalty program.

For customers who logged in, they will see their loyalty point balance.

The loyalty program overlay will pop up when you click on the Embedded Widget (same behavior as Tab Widget).

Why should I use Embedded Widget?

Here are a couple of examples on why you may prefer to use Embedded Widget instead of Tab Widget:

“The Tab Widget at the bottom is blocking other plugins (e.g., chat) that I need, but can’t change their positions. I have no space at the bottom for the Tab Widget.”

“I want to add a link to my menu for my customers to learn more about my loyalty program.”

“I want to display the point balance for registered customers in the account page.”

How to setup Embedded Widget on my store?

To use Embedded Widget on your store, you need to be on the Standard Plan or above.

After signing up to the appropriate plan, you need to enable the Embedded Widget in the Admin Console by following the below steps

From the Merchant Console, click “Theming” -> “Rewards Tab and Links”
Scroll to the bottom and look for the "Embedded Widget" section
Click “See Code and Turn On Embedded Widget”
Copy the code snippet and click "Done, Turn On Embedded Widget Now"

Please note that the above instruction is for the latest version of our Admin Console. If you can't find the Settings above, please follow the steps below instead:

From the Merchant Console, click “Loyalty Program” -> “Loyalty Widget”
Select “Embedded” in the “Style” section
Click “Save”

Afterwards, depending on your platform (Bigcommerce or Shopify), you need to edit the theme template and add our code snippet in the HTML code according to where you want to add the Embedded Widget.

Step-by-step Guide

Depending on the theme you have chosen for your store, the file structure could be different so there is no one size fits all way to add the Embedded Widget to a store. In this step-by-step guide, we will use the default theme of Shopify (Launchpad-Star) and Bigcommerce (Classic Next (Light)) as examples and add the Embedded Widget to the top navigation menu bar.

(Please note that you may need some basic knowledge in HTML/CSS to understand this guide. Please consult a professional web developer if needed.)

For Shopify Store:

Selected theme: Debut

For more information about theme development, please refer to the Theme Documentation on Shopify and Theme Layouts Documentation on Shopify.

The top navigation bar is usually located at the top of the store with Login/Registration, Shopping Cart and Search function.

To update the theme template:

Go to your Shopify Admin Console
On the left sidebar, click “Online Store” > “Themes”
Click “Actions” button from the drop down on the upper right hand corner. and select “Edit code”

According to the file structure of the Debut theme, if we look into the layout file theme.liquid, the top navigation menu is actually imported into theme.liquid from a snippet file called header-bar.liquid. (Please note that the file structure and file name may vary for different themes.)

Looking into the snippet file header-bar.liquid, you should be able to identify the codes for the different functions accordingly.

To add the Embedded Widget on the left of the Login/Registration links, add the following Embedded Widget code in front of the Login/Registration code.

<div class="header-bar__module">

<div class="sloyalty-loyaltyprogram-points" data-font-family="Arial"
data-font-size="14px"
data-color="red"
data-font-style="normal"
data-font-weight="normal"
data-text-decoration="none"
data-text-align="center"
style="height: 20px; width: 120px; display: inline-block; vertical-align: bottom;">

</div>

The header-bar__module div class is used to wrap the Embedded Widget code for consistent styling in this case. (The div class may vary for different themes.)

After saving the header-bar.liquid file and refreshing your store homepage, you should see the “Loyalty Rewards” link showing up on the Header Bar now.

For BigCommerce Store:

For merchants who are using Stencil Theme, please refer to the BigCommerce Custom Theme Upload article on how to customize your theme.

For merchants who are using Blueprint Theme, you may refer to the example below:

Default Theme: Classic Next (light)

To understand more about how theme layout works in Blueprint Theme, please refer to the Template Files Documentation on Bigcommerce and the BigCommerce Customization Guide.

To update the theme template:

Go to your Bigcommerce Control Panel
Click Settings > Storefront > My themes > Advanced > Make a copy > Edit theme files

In Bigcommerce, the top navigation menu is known as “Top Menu” which is located under Panels -> TopMenu.html.

Looking into the file TopMenu.html, you will see the codes for the different functions accordingly.

To add the Embedded Widget on the left of the My Account link, add the following Embedded Widget code in front of the My Account code.

<li>

<div class="sloyalty-loyaltyprogram-points" data-font-family="Arial"
data-font-size="11px"
data-color="red"
data-font-style="normal"
data-font-weight="normal"
data-text-decoration="none"
data-text-align="center"
style="height: 18px; width: 100px; display: inline-block; vertical-align: bottom;">

</div>

</li>

The li tag is used to wrap the Embedded Widget code for consistent styling in this case. (This may varies for different themes.)

After saving the topmenu.html file and refreshing your store homepage, you should see the Loyalty Rewards showing up on the Top Menu.

Can I customize the styling of my Embedded Widget?

Yes. There are a number of attributes available (optional) for you to customize the styling of your Embedded Widget as listed below:

<div class=”sloyalty-loyaltyprogram-points"

style=”height: 18px; width: 100px; display: inline-block; vertical-align: bottom;”
data-font-family=”Arial”
data-font-size=”10px”
data-line-height=”14px”
data-text-align=”center”
data-font-weight=”normal”
data-color=”red”
data-font-style=”normal”
data-text-decoration=”underline”
data-hover-color=”blue”
data-hover-font-style=”normal”
data-hover-text-decoration=”underline”

></div>

Attribute Name	Attribute Value
style	Standard CSS
data-font-family	Standard Web Font
data-font-size	Font size in pixel
data-line-height	Line height
data-text-align	Text align - left, center, right
data-font-weight	font weight - bold/normal
data-color	text color by name or Hex code e.g. #0f0e00
data-font-style	font style - normal / italic / oblique
data-text-decoration	decoration - underline / overline / line-through
data-hover-color	text color when hovered by name or Hex code (e.g. #0fe00)
data-hover-font-style	font style - normal / italic / oblique
data-hover-text-decoration	decoration on hover - underline / overline / line-through

S Loyalty Help Center

In this article