Top

Loyalty Points Liquid Install Instructions

Heads up! These instructions were recently updated to include the points earned in the cart.liquid (Step 5) + Welcome Modal (Step 6 + Snippet).

Create a backup

Loyalty Points code install requires significant changes to the theme files.
Before making these changes, we recommend creating a backup copy by duplicating the theme.

In this article:


1 - Theme

 

At the bottom of the theme.liquid, before the closing body (</body>) tag, add this code:

2 - Display Point Balance 

(If logged in this will display the total point balance, otherwise login / create an account will be displayed)

 

In the theme.liquid file or by following an include, add this line of code to display the login/logout text in the header next to My account or Login. Most Themes state "Login or Create an account", you will want to replace "Create an account" with this BOLD code so it shows "Register to earn points" (or what your display settings are set to)

3 - Customers Account - Point Transaction Table
(This displays the point transaction table on the customers account page ie:// $10.00 = 1pt and so on)

 

In the customers/account.liquid file, add this line to display the point transaction table.  We recommend inserting it below the customer.account.title and/or above the customer_orders code.

 

4.0 - Display reward points near product price
(Used to display required points to purchase the product as well as the product price ie:// 1000 points or $10.00)

 

In the product.liquid, add this line of code below where the price is displayed this line of code shows this :(*or xxx points*) next to the price.

4.1 - Show Bonus Points 
(Used to display Bonus points *if applicable* if you were to purchase the corresponding product)

 

In the product.liquid If a product has been selected in the app to offer additional bonus points, you can let your customers know with this code.  We recommend adding it below Step 4. Message you should see by default: (Reward Points: Buy this product now and earn xx Reward Points!)

4.2 - Redeem Points Button
(Used to display the Loyalties 'Buy Button' on the page which allows customers to purchase the product using Loyalty points)

 

In the product.liquid or depending on the Theme product.form.liquid  note that the placement is optional but it is usually inserted below or above the regular "add to cart" button. This is the Redeem Button code which adds a Button to the page.

4.3 - Very Bottom of product.liquid file and/or product.form.liquid file.

 

At the very bottom of the product.liquid file, add this line:

5.0 - Points earned per Product
(Used to breakdown the earned point balance per product on the cart page)

 

In the cart.liquid file insert this under {{ item.line_price | money }}

 

5.1 - Points earned in Total
(Used to display total points earned for your current purchase on the cart page)

 

Insert this line under {{ 'cart.general.checkout' | t }} or the "checkout button"

 

5.2 - Loyalty Points script

 

At the bottom of the cart.liquid file, insert this line of code.

 

6 - Referral Points link

 

One line to add to your `customers/register.liquid` inside the <form>

(We suggest to insert at the end of the form)

 

7 - Welcome Modal

 

A optional feature: add this line above "step 1" in the Theme.liquid`**Check to see if the snippet is installed.

 

Well done! You successfully completed the Loyalty Points code install!
 - Snippet Files & bold.css Asset File

 

The Loyalty Points app creates 6 snippet files and 1 asset to the published theme upon install. If themes are changed, or the snippet files are removed, you can add them again by copying and pasting the code files below.

The 6 snippet files are:

bold-loyalties-callout-nav.liquid

bold-loyalties-callout.liquid

bold-loyalties-customer-transactions.liquid

 

bold-loyalties-modal.liquid

 

bold-loyalties-product.liquid

 

bold-loyalties-welcome-modal

 

bold.css

 

Have more questions? Submit a request