Top

Recurring Orders Liquid Install Instructions

bGetting Started

Before installing, review our Notes Before Installing. This article can help get you prepared, and answers many common questions.

Difficulty: Moderate
Time Required: 30 to 40 minutes

We try to provide the best instructions possible, but coding can be tough! If you would like to request a free code installation, then you can follow the instructions here.

Part 1: Install Snippets

 

In the theme's files, look in the theme's snippet folder to see if the following files exist.

  • bold-common.liquid
  • bold-product.liquid
  • bold-variant.liquid
  • bold-cart.liquid
  • bold-cart-item.liquid
  • bold-ro-init.liquid
  • bold-ro.liquid

If the bold-ro.liquid snippet exists it will need to be replaced with the one in the tabs above. In addition, at this time the initial installation of our application automatically creates the files bold-ro-cart.liquid and bold-ro-price-fix.liquid.These two files can be deleted.

In the theme's files, look in the theme's asset folder to see if the following file exists.

  • bold-ro.js.liquid

If any don't exist, the missing files will need to be manually created. In that case, click on the appropriate tab above for instructions on how to create a particular snippet.

1-1: bold-common.liquid

 

Create a snippet called bold-common.liquid. Copy and paste this code into the snippet file.

1-2: bold-product.liquid

 

Create a snippet called bold-product.liquid. Copy and paste this code into the snippet file.

1-3: bold-variant.liquid

 

Create a snippet called bold-variant.liquid. Copy and paste this code into the snippet file.

1-4: bold-cart.liquid

 

Create a snippet called bold-cart.liquid. Copy and paste this code into the snippet file.

1-4: bold-cart-item.liquid

 

Create a snippet called bold-cart-item.liquid. Copy and paste this code into the snippet file.

1-4: bold-ro-init.liquid

 

Create a snippet called bold-ro-init.liquid. Copy and paste this code into the snippet file.

1-4: bold-ro.liquid

 

Create a snippet called bold-ro.liquid. Copy and paste this code into the snippet file.

1-4: bold-ro.js.liquid

 

Create an asset called bold-ro.js.liquid. Copy and paste this code into the asset file.

Part 2-1: Edit theme.liquid

2-1

Immediately before the closing 'head' tag, add the following:

{% include 'bold-common' %}
{% include 'bold-product', hide_action: 'header' %}
{% include 'bold-ro-init' %}

Part 3: Edit the customers/account.liquid

3-1

This step explains how to add the 'Manage Subscription' page link to the customer's account page. While recommended, this step is optional.

Find the line with {{ customer.name }}.

Directly below this line, paste this code:

<p><a href="/tools/checkout/front_end/login" class="text-link">Manage Subscription</a></p> 

Part 4: Edit the product.liquid

4-1

Add the following line of code to the beginning of the file that contains the product form:

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

repace any instance of {{ product | json }} with:

{% include 'bold-product' | output: 'json' %}
4-3

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

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.

In the location where you want the widget to display, add:

{{ bold_ro_widget }}
4-5

This step adds classes to the add-to-cart button so that the code can try to prevent customers from ordering subscription-only products before the Recurring Orders widget loads.

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

Immediately below this line of code, insert this:

<!-- bold-ro-liquid --> <div class="bold_add_to_orders" style="display: inline-block;"> </div> <!-- bold-ro-liquid -->

Part 5: Edit the cart.liquid

5-1

At the beginning of your cart template, add:

{% include 'bold-cart' %}
5-2

Find the beginning of your cart's item loop. It usually looks like this: {% for item in cart.items %}

Immediately below this line, add the following block of code:

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

This step will ensure that 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.

Replace the properties loop in your cart with the following code:

{{ bold_item_properties }}
{{ bold_recurring_desc }}

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.

5-4

Now we need to find and replace several price references.

Replace any instances of {{ item.price }} with {{ bold_item_price }}

Replace any instances of {{ item.line_price }} with {{ bold_item_line_price }}

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

5-5

Add the {{ 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>
5-6

Add the following wherever you want the Recurring Cart widget to be displayed (generally directly above the Checkout button)

{{ bold_ro_cart }}

Part 6: Remove Additional Checkout Buttons (!!)

6-1

In the cart.liquid theme file, locate where the Paypal button is located. Sometimes the code in the cart template will appear as something like {{ content_for_additional_checkout_buttons }}. We want to add "and show_paypal" to the IF statment surrounding the Paypal button as shown in the following:

Find the following chunk of code in cart page:

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

 

Have more questions? Submit a request