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.
  2. Select Visit Shopify App Store.
  3. Enter Loyalty Points in the "Search Bar".
  4. Select Loyalty Points by Bold.
  5. Select Get.
  6. Select Install App.
  1. From "Shopify Admin", select Online Store.

    Online Store 

  2. Select Actions.

    actions 

  3. Select Edit HTML / CSS.

    edit html / css 

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

    select theme.liquid 

  5. Copy and paste this code at the top of the file (optional).
    {% include 'bold-loyalties-welcome-modal' %}

    copy and paste this code to the top of the file 

  6. Copy and paste this code in the header next to My account or Login:

    Note: 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). If your theme contains sections, you may find this code in header.liquid under "Sections" or a similar file.

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

    add this code to the header 

  7. Copy and paste this code right before the </body> tag.
    <!-- Bold: Loyalty Points - Step 1 -->
    {% include 'bold-loyalties-callout' %}
    <!-- // end bold code -->

    add this code before the closing body tag 

  8. Select Save.

    select save 

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

    Online Store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

  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, 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 

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

    Online Store 

  2. Select Actions.

    actions 

  3. Select Edit HTML / CSS.

    edit html / css 

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

    copy and paste this code 

  6. Copy and paste this code below the code from step 5.

    Note: This code displays bonus points *if applicable* if you were to purchase the product outright (i.e. Buy this product now and earn xx Reward Points!).

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

    add this code to that from the previous step 

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

  8. Copy and paste this code to the bottom of the file:
    <!-- Bold: Loyalty Points - Step 4.3 -->
     {% include 'bold-loyalties-product' %}
    <!-- // end bold code -->

    add this code to the bottom of the file 

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

    actions 

  3. Select Edit HTML / CSS.

    edit html / css 

  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 breakdown 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 -->

    add this code after item.line_price 

  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.

    actions 

  3. Select Edit HTML / CSS.

    edit html / css 

  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. Duplicate themes, to create a backup copy.
  2. From "Shopify Admin", select Online Store.

    select online store 

  3. Select Actions.

    select actions 

  4. Select Edit HTML / CSS.

    select edit html / css 

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

  6. For any that don't exist:
    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.
  7. Under "Assets", select Add a new asset.

    select add a new asset 

  8. Select Create a blank file.

    select create a blank file 

  9. Enter bold in the "Create a blank file called" field.

    name the file bold 

  10. Select .css.

    select .css 

  11. Copy and paste the Bold.css code into the file.

    copy and paste the bold.css 

  12. Select Save.

    select save 

Have more questions? Submit a request