Top

How can we help?

Browse our help resources below, or open a support ticket with our team.

Recurring Orders Install Instructions

Created:
Updated:
Article ID: 200932719

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 will help get you prepared and answers many common questions.

Select each step below to view the instructions.

Step 1: Install Recurring Orders

  1. From “Shopify Admin”, select Apps.
  2. Select Visit Shopify App Store.
  3. Enter Recurring Orders in the "Search Bar".
  4. Select Recurring Orders & Subscriptions by Bold.
  5. Select Get.
  6. Select Install app.
  7. Select Approve Charge.

Step 2: Add Snippet Files

Note: If any of these files or code already exists, 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 …

    Select Options 

  4. Select Edit HTML / CSS.

    Select Edit HTML CSS 

  5. Under "Snippets", find these seven files:
    • bold-common.liquid
    • bold-product.liquid
    • bold-variant.liquid
    • bold-cart.liquid
    • bold-cart-item.liquid
    • bold-ro-init.liquid
    • bold-ro.liquid - If this one is already there, it will need to be replaced.

    find these seven files 

  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 past the code 

    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.

    create a blank file 

  9. Enter the "asset name", bold-ro

    asset name 

  10. Select .js.liquid from the dropdown menu.

    select .js.liquid 

  11. Select Add asset.

    select add asset 

  12. Copy and paste the code found here: bold-ro.js.liquid.

    copy and paste the code 

  13. Select Save.

    select save 

Step 3: Edit theme.liquid

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

  1. From “Shopify Admin”, select Online Store.

    Select Online Store 

  2. Select …

    Select Options 

  3. Select Edit HTML / CSS.

    Select Edit HTML CSS 

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

    select theme.liquid 

  5. Copy and paste this code directly above the </head> tag. 
    {% include 'bold-common' %}
{% include 'bold-product', hide_action: 'header' %}
{% include 'bold-ro-init' %}

    copy and paste this code 

  6. Select Save.

    select save 

Step 4: Edit customers/account.liquid

Note: This step explains how to add the “Manage Subscription” page link to the customer’s account page. While recommended, this step is optional.

  1. From “Shopify Admin”, select Online Store.

    Select Online Store 

  2. Select …

    Select Options 

  3. Select Edit HTML / CSS.

    Select Edit HTML CSS 

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

    select customers/account.liquid 

  5. Add this code under the line {% customer.name %} or {{ customer.name }} 
    <p><a href="/tools/checkout/front_end/login" class="text-link">Manage Subscription</a></p>

    add code 

  6. Select Save.

    select save 

Step 5: Edit product.liquid

  1. From “Shopify Admin”, select Online Store.

    Select Online Store 

  2. Select …

    Select Options 

  3. Select Edit HTML / CSS.

    Select Edit HTML CSS 

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

    select product.liquid 

  5. Add this code to the beginning of the file: 
    {% include 'bold-ro' %}
{% include 'bold-product' with product %}

    add this code 

  6. Replace any instances of {{ product | json }} with {% include 'bold-product' | output: 'json' %}.

    Note: If your theme contains sections, you may have to look for this code under "Sections" in product-template.liquid instead.

    replace this code 

  7. Find any instances of {% for variant in product.variants %} and add the data attribute: data-price="{{ variant.price | money_without_currency | remove: ',' }}" to the option tag that's within the <select>. Your code would look something like this: 
    <select id="product-select" name="id">
{% for variant in product.variants %}
<option value="{{ variant.id }}" data-price="{{ variant.price | money_without_currency | remove: ','}}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}

    If your currency uses a comma for the decimal divider you will need to use this instead:

    <select id="product-select" name="id">
{% for variant in product.variants %}
<option value="{{ variant.id }}" data-price="{{variant.price | money_without_currency | remove: '.' | replace: ',', '.' }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}

    add data attribure 

  8. Add {{ bold_ro_widget }} where you want the widget to display (optional).

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

  9. Find The add to cart input <input id="addToCart" class="btn" name="add" type="submit" value="add to cart"/> and add the class class="{{ bold_add_to_cart_class }}" if there's no class already you'll need to create one. Your code should look something like this: 
    <input class="btn {{ bold_add_to_cart_class }}" name="add" type="submit" value="add to cart"/>

    add the class 

  10. Immediately below this line of code add: 
    <!-- bold-ro-liquid --> <div class="bold_add_to_orders" style="display: inline-block;"> </div> <!-- bold-ro-liquid -->

    Step5-10.png 

  11. Select Save.

    select save 

Step 6: Edit cart.liquid

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

  1. From “Shopify Admin”, select Online Store.

    Select Online Store 

  2. Select …

    Select Options 

  3. Select Edit HTML / CSS.

    Select 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. On the first line add: {% include 'bold-cart' %}.

    add code 

  6. Find {% for item in cart.items %} and add this code directly after: 
    {% include 'bold-cart-item' with item %}

    add code 

  7. Replace the properties loop in your cart with this code:

    Note: This step will ensure the properties set by Recurring Orders do not get printed in a simple “field: value” format and will instead print the full recurring description as well as any remaining properties set on the line item.  If your theme does not include a properties display loop, add the code where you would like the recurring description to display, usually immediately after the product title is a good place.

    {{ bold_item_properties }}
{{ bold_recurring_desc }}

    add code 

  8. Replace any instances of item.price with bold_item_price.

    replace code 

  9. Replace any instances of item.line_price with bold_item_line_price.

    replace code 

  10. Replace any instances of cart.total_price with bold_cart_total_price.

    Note: Some themes also show the total price somewhere in the theme's header. If the cart total price is shown in the header as well, add {% include 'bold-cart' %} at the beginning of the file that prints the price, then change cart.total_price to bold_cart_total_price.

    replace code 

  11. Add {{ bold_remove_class }} to all remove buttons in the cart page, it should look like this: 
    <a href="/cart/change?line={{ forloop.index }}&quantity=0" class="btn btn--small btn--secondary cart__remove {{ bold_remove_class }}">{{ 'cart.general.remove' | t }}</a>

     add code

  12. Add {{ bold_ro_cart }} where you want the recurring cart widget to be displayed.

    Note: This is generally placed directly above the checkout button.

    add code 

  13. Select Save.

    select save 

Step 7: Remove Additional Checkout Buttons

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

  1. From “Shopify Admin”, select Online Store.

    Select Online Store 

  2. Select …

    Select Options 

  3. Select Edit HTML / CSS.

    Select 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 this code: 
    {% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}

    and change it to this:

    {% if additional_checkout_buttons and show_paypal %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
    {% endif %}

    change code 

  6. Select Save.

    select save 

Have more questions? Submit a request