Warning!
This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Request a Bold Subscriptions Installation 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 Subscriptions in an unpublished theme, you will want to read Working in an Unpublished Theme with Bold Subscriptions to ensure you know about our caching limitations.
Select each step below to view the instructions.
- Duplicate themes, to create a backup copy.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Snippets", find these five files:
- bold-common.liquid
- bold-cart.liquid
- bold-cart-item.liquid
- bold-ro-init.liquid
- bold-variant.liquid
- For any that don't exist:
- Select Add a new snippet.
- Enter the correct snippet name.
- Select Create snippet.
- Copy and paste the code found in each of these links into their respective files:
- Select Save.
- Repeat steps 6a – d for each missing snippet file.
- Select Add a new snippet.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Layout", select theme.liquid.
- Copy and paste this code directly above the </head> tag:
{% include 'bold-common' %} {% include 'bold-ro-init' %}
- 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.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Templates", select customers/account.liquid.
-
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>
- Select Save.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Templates", select product.liquid.
-
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.
- 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>
- Select Save.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- 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.
-
On the first line add:
{% include 'bold-cart' %}
-
Find:
{% for item in cart.items %}
and add this code directly after:
{% include 'bold-cart-item' with item %}
-
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 %}
- 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 }}
-
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
-
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:
{{ bold_ro_cart }}
where you want the recurring cart widget to be displayed.
Note: This is generally placed directly above the checkout button.
- Select Save.
- Duplicate themes, to create a backup copy.
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Snippets", select bold-common.liquid.
- Copy and paste this code in the bottom of the file.
{{ 'https://ro.boldapps.net/v2_ui/js/ro.js' | script_tag }}
- Select Save.
Next Steps:
- Set up Your Payment Gateway with Bold Subscriptions
- Use Bold Subscriptions in Single Product or Multiple Products Style
- Use Bold Subscriptions in Recurring Cart Style
Blog Posts:
- Recurring Orders & Subscriptions for Shopify
- Switch To Recurring Orders
- 5 Shopify Stores Doing Subscriptions In A BIG Way
Comments
Please sign in to leave a comment.