Bold Subscriptions Install Instructions

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

   

3. Select Actions.

   

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

   

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-cart.liquid
      • bold-cart-item.liquid
      • bold-ro-init.liquid
      • bold-variant.liquid

      

   5. Select Save.

      

   6. Repeat steps 6a – d for each missing snippet file.

1. From Shopify's admin, select Online Store.

   

2. Select Actions.

   

3. Select Edit code.

   

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

   

5. Copy and paste this code directly above the </head> tag:

   {% include 'bold-common' %}
   {% include 'bold-ro-init' %}

   

6. Select Save.

   

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's admin, select Online Store.

   

2. Select Actions.

   

3. Select Edit code.

   

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

   

6. Select Save.

   

1. From Shopify's admin, select Online Store.

   

2. Select Actions.

   

3. Select Edit code.

   

4. Under "Templates", 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 Subscriptions widget will appear.  This step is optional, the app will try to automatically place the widget if this step is not done manually.

   

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>

   

7. Select Save.

   

1. From Shopify's admin, select Online Store.

   

2. Select Actions.

   

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

   

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

   

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

   Note: This step will ensure the properties set by Subscriptions 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 }}

   

9. Replace any instances of:

   item.price

   with:

   bold_item_price

   

10. Replace any instances of:

    item.line_price

    with:

    bold_item_line_price

    

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

    

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

    

13. Add:

    {{ bold_ro_cart }}

    where you want the recurring cart widget to be displayed.

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

    

14. Select Save.

    

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

   

3. Select Actions.

   

4. Select Edit code.

   

5. Under "Snippets", 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 }}

   

7. Select Save.