Top

How can we help?

Browse our Help Center or visit our Community, still Need Help? Contact Us.

Recurring Orders Install Instructions

  • Created:
  • Last 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.

If you plan to test Recurring Orders in an unpublished theme, you will want to read Working in an Unpublished Theme with Recurring Orders to ensure you know about our caching limitations.

Select each step below to view the instructions.

Step 1: Install Recurring Orders

  1. From "Shopify Admin", select Apps.

    Select Apps 

  2. Select Visit Shopify App Store.

    select visit shopify app store 

  3. Enter Recurring Orders in the "Search Bar".

    enter customer specific pricing in the search bar 

  4. Select the Recurring Orders & Subscriptions by Bold app.

    Select Recurring Orders & Subscriptions by Bold 

  5. Select Get.

    select get 

  6. Select Install app.

    select install app 

  7. Select Approve charge.

    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.

    Online Store 

  3. Select Actions.

    Actions 

  4. Select Edit code.

    Edit code 

  5. Under "Snippets", find these five files:
    • bold-common.liquid
    • bold-cart.liquid
    • bold-cart-item.liquid
    • bold-ro-init.liquid
    • bold-variant.liquid

    find these files under snippets 

  6. For any that don't exist:
    1. Select Add a new snippet.

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

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.

    Online Store 

  2. Select Actions.

    Actions 

  3. Select Edit code.

    Edit code 

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

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

    Online Store 

  2. Select Actions.

    Actions 

  3. Select Edit code.

    Edit code 

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

    select customers/account.liquid

  5. Under the line:

    {% customer.name %}

    or:

    {{ customer.name }}

    copy and paste this code:

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

    Online Store 

  2. Select Actions.

    Actions 

  3. Select Edit code.

    Edit code 

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

    select product.liquid 

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

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

    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.

    copy and paste the widget code

  6. Find the add to cart input or button and add the class addtocart. if there's no class already you'll need to create one. Your code should look something like this: 
    <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 

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

    Online Store 

  2. Select Actions.

    Actions 

  3. Select Edit code.

    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. 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: Edit bold-common.liquid

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.

    Online Store 

  3. Select Actions.

    Actions 

  4. Select Edit code.

    Edit code 

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

    select bold-common.liquid 

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

    copy and paste this code 

  7. Select Save.

    select save 

Step 8: Remove Additional Checkout Buttons

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

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

Next Steps:

Blog Posts: