Installation Guide for Bold Subscriptions

Overview

Each theme on your Shopify store is different, and will require the Subscriptions liquid code to be installed in order to ensure that the app runs correctly. The code installation is significant, and will ensure that the Subscription widget appears on your product pages, and customers are directed to the correct recurring orders checkout. 

We offer a few different options to help you complete this installation on your store. This includes an automatic installer, requesting a professional installation from our team, or a step-by-step on completing this manually.

Are you ready to get started with our install?

 




Request a Bold Subscriptions Install

If you don't feel comfortable with coding, we would be happy to have one of our expert installers take care of it for you at no charge. 

 Alert

Please ensure that we have an active staff account for your site, prior to submitting your installation request. Visit Create a Shopify Staff Account for more information on how to create an account.


To request an installation from Bold Commerce, please follow these steps:

  1. From Shopify's admin, select Apps.
  2. Select Bold Subscriptions.
  3. Within the apps menu, select Help.
  4. Select Install to Theme.
  5. Select one of the following installation options:

Bold Subscriptions App Installation Options

 
Expert Install:

This option creates a ticket request with our installation team, and schedules your store for a manual installation completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on. 

Please note that these installations can take between two to five business days to complete.


Automatic Install:

This option will trigger our automatic installer to complete on your store. You will still be asked to confirm which theme you would like this code to be installed on after selecting this option. It is recommended that a Duplicate copy of your theme be created before completing any automatic installation.

A duplicate theme can be created by going through your Shopify admin > Online store > Duplicate on your current theme.

Note: If your current theme is not compatible with our robo-installer, the app will automatically notify you. In this case, you can select the option to roll your theme back to the previous state. If you suspect that this installation has not been completed in full, reverting the changes will automatically create an installation request for our team to assist you further.


Manual Install:

This step will direct you to the installation instructions for completing this change yourself. Please note that this is only suggested if you have a strong knowledge of Liquid coding.

Within the first steps, it is recommended to create a duplicate of your current theme without the Bold Commerce app code before continuing with this install. This will ensure that you can test all the information added when all the steps are completed before making this theme live on your store.

Our expert installers also recommend completing an automatic install first. The manual installation  steps below can then be followed to ensure that everything is added correctly and displaying properly on your store.


Bold Subscriptions Code Install Instructions:

  1. From Shopify's admin, select Online Store.
  2. Select Actions.
  3. Duplicate the theme you would like the installation completed on.
  4. Select Edit code on the duplicated theme.
  5. Under "Snippets", find the following files:
    bold-common.liquid
    bold-ro-init.liquid

    Find_Snippet_Files.png

  6. If it doesn't currently exist, select Add a new snippet.
    1. Enter the correct snippet name.
    2. Select Create snippet.

      Select_Create_Snippet.png

    3. Copy and paste the code from the following links:

      Paste_Bold_Common_Code.png

    4. Select Save
  1. Under "Snippets", select bold-common.liquid.
  2. Copy and paste the following code in the bottom of the file:
    {{ 'https://ro.boldapps.net/v2_ui/js/ro.js' | script_tag }}


    Bold_Common_Liquid_Tag.png

  3. Select Save.

Continuing within the theme files, complete the following steps:

  1. Under "Layout", select theme.liquid.
  2. Copy and paste the following code directly above the </head> tag:
    {%- render 'bold-common' -%}
    {%- render 'bold-ro-init' -%}

    Bold_Code_Theme_Liquid.png

  3. Select Save.

     

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. This can be moved around and tested to display to your liking.

Continuing within the theme files, complete the following steps:

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

    Select_Customers_Account_Liquid.png

  2. Under the line:

    {{ 'customer.account.details' | t }}

    or:

    {{ 'customer.account.title' | t }}

    copy and paste the following code:

    <p><a href="/tools/checkout/api/manage/subscription/app" class="text-link">Manage Subscription</a></p>

    If you are not seeing either of the codes above, you can add this under the </header>.
    Manage_Subscription_Code.png

  3. Select Save.

Continuing within the theme files, complete the following steps:

  1. Under "Templates", select product.liquid. It may redirect you to product-template.liquid depending on your theme.
  2. Add this code where you want the widget to display. This normally is placed above the Add to Cart button, or the Quantity Selector:

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

    Note: This step is optional, as the app will try to automatically place the widget if this step is not done manually.

    Widget_Placement_Product_Template.png

  3. Find the add to cart input or button and add the class addtocart. If no class already exists, you'll need to create one. Your existing code should look something like the following:
    <button type=“submit” class=“btn” name=“add”>Add To Cart</button>

    which should be changed to:

    <button type=“submit” class=“btn addtocart” name=“add”>Add To Cart</button>

    Steps_5-7.png

  4. Select Save.

Continuing within the theme files, complete the following steps:

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

  2. Find a line of code similar to:
    {{ item.price | money }}
    On newer themes, it may be:
    {{ item.final_line_price | money }}

    Note: This code may be referenced differently depending on the theme you are using. In some themes, this code may not exist at all. If it is contained within your theme, the code will include a reference to "price".

    Final_Line_Price_Snippet_in_Cart.Liquid.png
  3. Copy and paste the following snippet of code above this line:
    <span class=“Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price” data-item-key=“{{item.key}}” style=“display:none !important;“></span>
  4. Find a line of code similar to:
    {{ item.line_price | money }}
    On newer themes, you may be searching for:
    {{ item.final_line_price | money }}
  5. Copy and paste the following snippet of code above this line:
    <span class=“Bold-theme-hook-DO-NOT-DELETE bold_cart_total” style=“display:none !important;“></span>{{ cart.total_price | money_with_currency }}
  6. Find a line of code similar to:
    {{ cart.total_price | money }}
  7. Copy and paste the following snippet of code above this line:
    <span class=“Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total” data-item-key=“{{item.key}}” style=“display:none !important;“></span>
  8. Add the following pieces of code where you want the descriptions to display:
    <span class="bold_ro_desc" data-product-id="{{item.id}}-{{ forloop.index0 }}"></span>
    <span class="bold_load_cart_item_properties"></span>

    Bold_Recurring_Descriptions.png

  9. Place {% comment %} and {% endcomment %} tags around any existing properties loop:

    Insert_Comment_Tags.png

  10. Copy and paste the following line of code around any third-party checkout buttons:
    <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>

    Note: Subscriptions is not compatible with additional checkout buttons. For customer orders to reoccur, the built in Subscriptions checkout must be used. This means that Paypal, AmazonPay, ApplePay, GooglePay, etc are currently only compatible with the Shopify checkout.

    Insert_Additional_Checkout_Script.png

  11. Select Save.

 

Next Steps:

Once this installation is completed on your store, the subscription widget and the Manage Subscription page should start appearing on your store.

We recommend that a Test Order with Bold Subscriptions is created so you can review how orders appear, and how they are managed by your customers.

Was this article helpful?
0 out of 0 found this helpful