Top

Loyalty Points Install Instructions

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Email our Support Wizards for help.

Before you begin, review Notes Before Installing Apps. This article can help get you prepared and answers many common questions.

Select each step below to view the instructions.

To install Loyalty Points, follow these instructions:

  1. From "Shopify Admin", select Apps.

    Select Apps 

  2. Select Visit Shopify App Store.

    select visit shopify app store 

  3. Enter Loyalty Points in the "Search Bar". 

    enter Loyalty Points in the search bar 

  4. Select Loyalty Points by Bold.

    select Loyalty Points by Bold 

  5. Select Get.

    Select Get 

  6. Select Install app.

    Select Install App 

  7. Select Approve charge.

    Select Approve charge 

  1. Duplicate themes, to create a backup copy.
  2. From "Shopify Admin", select Online Store.

    Online Store 

  3. Select Actions.

    Select Actions 

  4. Select Edit code.

    Select Edit code 

  5. Under "Layout", select theme.liquid.

    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. Most themes state "Login or Create an account", 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.

    select save 

  1. From "Shopify Admin", select Online Store.

    Online Store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    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, i.e. // $10.00 = 1pt, etc.

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

    select save 

  7. Open customers-register.liquid.

    open customers-register.liquid 

  8. Copy and paste this code before the {% endform %}:

    <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 

  9. Select Save.

    select save 

  1. From "Shopify Admin", select Online Store.

    Online Store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    Select Edit code 

  4. Under "Templates", select product.liquid.

    Note: If your template contains sections, you will need to select the product-template.liquid section 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, i.e. // 1000 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 which allows customers to purchase the product using Loyalty points. You can place it elsewhere; this step outlines its recommended location.

    <!-- 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, only put it in 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.

    select save 

Note: If any of this code already exists, you can skip the step.

  1. From "Shopify Admin", select Online Store.

    Online Store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    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" in cart-template.liquid instead.

    select cart.liquid

  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.

    select save 

That's it!

  1. From "Shopify Admin", select Online Store.

    Online Store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    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.

    select save 

Loyalty Points creates six snippet files and one asset in the published theme upon install. If themes are changed, or the snippet files are removed, you can add them again by following these steps.

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

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    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

    find these files under snippets 

  5. For any that don't exist (if the snippets do exist, skip to step 6):
    1. Select Add a new snippet.

      add a new snippet 

    2. Enter the correct Snippet name.

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

      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.

    select save 

That's it!