Bold Subscriptions Code Install Instructions

Follow

Warning!

This article requires technical knowledge and prior experience with Liquid code. If you are not comfortable with this, please Request a Bold Subscriptions Installation for help.

Overview

Bold Subscriptions has a significant coding installation that is required for the app to function correctly on your storefront.

Before you begin, please review our Notes Before Installing Apps guide. This may help answer any questions you have about the installation process.

Note: If you plan to test Subscriptions in an unpublished theme, you will want to read Working in an Unpublished Theme with Bold Subscriptions to ensure you know about the app's caching limitations.

Select each step below to view the instructions:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.

    Select Online Store

  3. Select Actions.

    Select Actions

  4. Select Edit code.

    Select Edit Code

  5. Under "Snippets", find the following files:
    • bold-common.liquid
    • bold-ro-init.liquid

    Find Snippet Files

  6. If it doesn't currently exist:
    1. Select Add a new snippet.

      Select Add New Snippet

    2. Enter the correct snippet name.

      Enter Snippet Name

    3. Select Create snippet.

      Select Create Snippet

    4. Copy and paste the code from the following links:

      Paste bold-common code

    5. Select Save.

      Select Save 

  1. Under "Snippets", select bold-common.liquid.

    select bold-common.liquid

  2. Copy and paste the following code in the bottom of the file:
    {{ 'https://ro.boldapps.net/v2_ui/js/ro.js' | script_tag }}

    copy and paste this code

  3. Select Save.

    select save

Continuing within the theme files, complete the following steps:

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

    Select theme.liquid

  2. Copy and paste the following code directly above the </head> tag:
    {%- render 'bold-common' -%}
    {%- render 'bold-ro-init' -%}

    subscriptions_bold-ro-init_code.png

  3. Select Save.

    select save

This step explains how to add the "Manage Subscriptions" page link to the customer’s account details page. Without this link being inserted into an obvious area, subscribers may find it difficult to locate where to manage their subscription.

We recommend inserting this link in this location, though other locations can be utilized as well - like in your main navigation bar.

Continuing within the theme files, complete the following steps:

  1. Under "Templates", select customers/account.liquid.

    Select customers/account.liquid

  2. Under the line:

    {% customer.name %}

    or:

    {{ customer.name }}

    copy and paste the following code:

    <p><a href="/tools/checkout/api/manage/subscription/app" class="text-link">Manage Subscription</a></p>

    Paste Manage Subscription Code

  3. Select Save.

    select save

Continuing within the theme files, complete the following steps:

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

    Select product.liquid

  2. Add this code where you want the widget to display (optional):

    <div class="ro_widget"></div>

    Note: This step controls where the Subscriptions widget will appear. This step is optional, as the app will try to automatically place the widget if this step is not done manually.

    copy and paste the widget code

  3. Find the add to cart input or button and add the class addtocart. If no class already exists, you'll need to create one. Your code should look something like the following:
    <input class="btn addtocart" name="add" type="submit" value="Add to Cart"/>

    or:

    <button type="submit" class="btn addtocart" name="add" type="submit">Add to Cart</button>

    add the addtocart class

  4. Select Save.

    select save

Continuing within the theme files, complete the following steps:

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

  2. Find a line of code similar to:
    {{ item.price | money }}
    On newer themes, it may be:
    {{ item.final_price | money }}

    Note: This code may be referenced differently depending on the theme you are using. In some themes, this code may not exist at all. If it is contained within your theme, the code will include a reference to "price".

    Find item price money
  3. Copy and paste the following snippet of code above this line:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" style="display:none !important;"></span>

    Copy/Paste code

  4. Find a line of code similar to:
    {{ item.line_price | money }}
    On newer themes, it may be:
    {{ item.final_line_price | money }}
    Find item line price money
  5. Copy and paste the following snippet of code above this line:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total" style="display:none !important;"></span>

    Copy/Paste code

  6. Find a line of code similar to:
    {{ cart.total_price | money }}

    Find cart total price money

  7. Copy and paste the following snippet of code above this line:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>

    Copy/Paste code

  8. Add the following pieces of code where you want the descriptions to display:
    <span class="bold_ro_desc" data-product-id="{{item.id}}-{{ forloop.index0 }}"></span>
    <span class="bold_load_cart_item_properties"></span>

    Insert descriptions

  9. Place {% comment %} and {% endcomment %} tags around any existing properties loop:

    Insert comment tags

  10. Copy and paste the following line of code around any third-party checkout buttons:
    <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>

    Note: Subscriptions is not compatible with checkout buttons that don't direct the customer through its subscriptions checkout. This includes PayPal, AmazonPay, ApplePay, GooglePay, etc.

    Insert additional checkout script

  11. Select Save.

    Select Save

Next Steps:

Helpful Links:

22 out of 36 found this helpful

Comments

0 comments

Please sign in to leave a comment.