Recurring Orders Install Instructions

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.

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.

    

3. Select Actions.

    

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

    

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

       

   2. Enter the correct snippet name.

       

   3. Select Create snippet.

       

   4. Copy and paste the code found in each of these links into their respective files:
      • bold-common.liquid
      • bold-product.liquid
      • bold-variant.liquid
      • bold-cart.liquid
      • bold-cart-item.liquid
      • bold-ro-init.liquid
      • Bold-ro.liquid

       

   5. Select Save.

       

   6. Repeat steps 6a – d for each missing snippet file.
7. Under "Assets", select Add a new asset.

    

8. Select Create a blank file.

    

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

    

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

     

11. Select Add asset.

     

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

     

13. Select Save.

     

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

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

    

2. Select Actions.

    

3. Select Edit HTML / CSS.

    

4. Under "Layout", 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' %}

    

6. Select Save.

    

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

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

    

2. Select Actions.

    

3. Select Edit HTML / CSS.

    

4. Under "Templates", 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>

    

6. Select Save.

    

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

    

2. Select Actions.

    

3. Select Edit HTML / CSS.

    

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

   

5. Add this code to the beginning of the file:

   {% include 'bold-ro' %}
   {% include 'bold-product' with product %}

    

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.

    

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

    

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

    

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

     

11. Select Save.

     

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

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

    

2. Select Actions.

    

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

   

5. On the first line add: {% include 'bold-cart' %}

    

6. Find {% for item in cart.items %} and add this code directly after:

   {% include 'bold-cart-item' with item %}

    

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

    

8. Replace any instances of item.price with bold_item_price

    

9. Replace any instances of item.line_price with bold_item_line_price

    

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

     

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>

     

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.

     

13. Select Save.

     

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

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

    

2. Select Actions.

    

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

   

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

    

6. Select Save.