S Loyalty Help Center

Setting up the Embedded Loyalty Widget

Last Updated:

In this article

 

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).

 

On Mobile Devices

On Mobile devices, Embedded Widget is hidden from the screen and the shoppers can access our loyalty program interfaces by clicking on the "Rewards" tab at the bottom of your screen instead.

If you want to hide the “Rewards” tab, please contact support@sloyalty.com.

  

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

  1. From the Merchant Console, click “Theming” -> “Loyalty Widget”
  2. Scroll to the bottom and look for the "Embedded Widget" section
  3. Click “See Code and Turn On Embedded Widget”
  4. 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:

  1. From the Merchant Console, click “Loyalty Program” -> “Loyalty Widget”
  2. Select “Embedded” in the “Style” section
  3. 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:

  • Default theme: Launchpad-Star

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 “...” button on the upper right hand corner. and select “Edit HTML/CSS”

According to the file structure of the Launchpad-Star 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>

</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 update the theme template:

  • Go to your Bigcommerce Control Panel
  • Click Settings -> Design -> Themes -> Edit HTML/CSS

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