Loyalty Points Install Instructions

Bold Loyalty Points V1 requires our Liquid code installation to function correctly on your store.

Before you start, we highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

 Caution

These instructions are for Version 1 of Loyalty Points. From within the Loyalty Points app admin, please select Additional Help > Support and FAQ to verify which version you are using.

 


 

Manual Install

Step 1: Edit theme.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Duplicate the theme you would like the installation completed on.
  4. Select Edit Code on the duplicated theme.
  5. Under Layout, select theme.liquid.
  6. Copy and paste this code right before the closing </body> tag:

    <!-- Bold: Loyalty Points - Step 1 -->
    {% include 'bold-loyalties-welcome-modal' %}
    {% include 'bold-loyalties-callout' %}
    <!-- // end bold code -->

    copy and paste this code

  7. Copy and paste this code in the header next to My account or Login: (optional)

    Note: If your theme contains Sections, you may find this code in header.liquid under Sections or a similar file. You will want to replace Create an account with this code so it shows Register to earn points (or what is set in your display settings). 

    <!-- Bold: Loyalty Points - Step 2 -->
    {% include 'bold-loyalties-callout-nav' %}
    <!-- // end bold code -->

    add this code to the header

  8. Select Save.

 


 

Step 2: Edit customers/account.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select customers/account.liquid.

    select customers/account.liquid

  5. Copy and paste this code below the customer.account.title or above the customer_orders code:

    Note:

    This code displays the point transaction table on the customers account page.

    IE. $10.00 = 1pt

    <!-- Bold: Loyalty Points - Step 3 -->
    {% include 'bold-loyalties-customer-transactions' %}
    <!-- // end bold code -->

    copy and paste this code below customer.account.title

  6. Select Save.

 


 

Step 3: Edit product.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select product.liquid.

    Note: If your template contains Sections, you will need to select the product-template.liquid file within Sections instead.

    select product.liquid

  5. Copy and paste this code where the price is displayed:

    Note:

    This code displays required points to purchase the product as well as the product price.

    IE. 1,000 points or $10.00.

    <!-- Bold: Loyalty Points - Step 4 -->
    {% if shop.metafields.bold_loyalties.active == 1 %}    
     <div class="bold-loyalties-redeem-amount">or <span class="bold-placeholder"></span></div>
    {% endif %}
    <!-- // end bold code -->
    <!-- Bold: Loyalty Points - Step 4.1 -->
    <div class="bold-loyalties-earn"></div>
    <!-- // end bold code -->

    copy and paste this code

  6. Copy and paste this code above or below the add to cart button:

    Note: This code displays the Loyalties Buy Button on the page. This allows customers to purchase the product using your loyalty program's points.

    <!-- Bold: Loyalty Points - Step 4.2 -->
     <div class="bold-loyalties-redeem"></div>
    <!-- // end bold code -->

    copy and paste this below the add to cart button

  7. Copy and paste this code to the bottom of the file:

    Note: This code is only required once. If you have product.liquid, product-template.liquid, and product-form.liquid, it is only required to place the code within product-template.liquid.

    <!-- Bold: Loyalty Points - Step 4.3 -->
     {% include 'bold-loyalties-product' %}
    <!-- // end bold code -->

    add this code to the bottom of the file

  8. Select Save.

 


 

Step 4: Edit cart.liquid

If this code already exists on your theme, you can skip the step.

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select cart.liquid.

    Note: If your theme contains sections, you may have to look for this code under Sections within the cart-template.liquid file instead.

  5. Find:

    {{ item.line_price | money }}

    and add this code directly after:

    Note: This code is used to break down the point balance per product on the cart page.

    <!-- Bold: Loyalty Points - Step 5 -->
     <span class="bold-loyalties-cart-points-{{forloop.index}}"></span>
    <!-- // end bold code -->

    copy and paste this code

  6. Copy and paste this code under {{ 'cart.general.checkout' | t }} or the checkout button:

    Note: This code is used to display total points earned for your current purchase on the cart page.

    <!-- Bold: Loyalty Points - Step 5.1 -->
     <p class="bold-loyalties-cart-earn"></p>
    <!-- // end bold code -->

    copy and paste this code under the checkout button

  7. Copy and paste this code at the bottom of the file:

    <!-- Bold: Loyalty Points - Step 5.2 -->
    {% if shop.metafields.bold_loyalties.active == 1 %}
     <script src="//loy.boldapps.net/front_end/cart_js?shop={{shop.domain}}"></script>
    {% endif %}
    <!-- // end bold code -->

    copy and paste this code to the bottom of the file

  8. Select Save.

 


 

Step 5: Edit customers/register.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select customers/register.liquid.

    select customers/register.liquid

  5. Copy and paste this code right before the </form> tag:

    <div class="bold-loyalties-code"></div>
    <script src="https://loy.boldapps.net/app_assets/js/client/signup-refer.js"></script>

    copy and paste this code at the end of the form

  6. Select Save.

     

 


 

Step 6: Verify the Snippets and Assets are in place

If any of these files exist, you can skip the step.

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Snippets, find these six files:
    • 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.liquid
  5. For any that don't exist :
    1. Select Add a new snippet.
    2. Enter the correct Snippet name.
    3. Select Create snippet.

      select create snippet

    4. Copy and paste the code found in each of these links into their respective files:

      copy and paste the code in the respective files

    5. Select Save
    6. Repeat steps 6a – d for each missing snippet file.
  6. Under Assets, select Add a new asset.

    select add a new asset

  7. Select Create a blank file.

    select create a blank file

  8. Enter bold in the Create a blank file called field.

    name the file bold

  9. Select .CSS.

    select .css

  10. Copy and paste the bold.css code into the file.

    copy and paste the bold.css

  11. Select Save.

 


 

Code Removal

If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet files, asset files, and the code includes mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Merchant Success team.

And you can remove the app from your by following this guide: Uninstall an App from Your Store

Was this article helpful?
4 out of 5 found this helpful