Installation Guide for Bold Subscriptions V2

Bold Subscriptions V2 requires some Liquid code in order to run correctly on your store. This will ensure the subscription options appear on your product pages.

We offer a few different options to help you complete this installation on your store:

  1. An automatic installation
  2. The ability to request a professional installation from our team
  3. A step-by-step guide on completing this manually
  4. A step-by-step guide on completing this manually via App Widget Blocks

Before you start we highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

 Caution

Please note that this article only relates to Version 2 of Bold Subscriptions. If you have Version 1 of Bold Subscriptions installed on your store, please visit Installation Guide for Bold subscriptions V1.

If you are unsure which version of Bold Subscriptions that you have currently installed, please visit our Identify Your Version of Bold Subscriptions.

 


 

Automatic Install

If you don't feel comfortable with Liquid code, we have an automatic installer that will help by placing this code directly into your Shopify theme with the click of a button.

To request an installation, please follow these steps:

  1. From the Shopify admin, select Apps.
  2. Select Bold Subscriptions.
  3. Within the apps menu, select Help.
  4. Select Theme code update.
  5. Select your preferred theme.
  6. Select I have created a backup of this theme.

    Note: Creating a backup of your theme is the same as creating a duplicate. Please visit Duplicate version of your Shopify theme for more information.

  7. Select Start automatic install.

Completing these steps will trigger our automatic installer to run on your store.

If your current theme is not compatible with our automatic installation tool, the app will automatically notify you. If this happens, you can rollback your theme to its previous state.

When the installation has not been completed in full, reverting the changes will automatically create an installation request for our team to assist you further.

 


 

Request a Subscriptions V2 Install

 Alert

To maintain the security of your Shopify account, we ask that you do not proactively send us a staff account invite for access to your shop. Instead, our team will request collaborator access to your shop.

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 to be completed on.

All of these requests are completed manually on a rotational basis and will be completed as soon as possible.

  1. From within Subscriptions V2, navigate to Help > Theme code update.
  2. Select the text which says Expert theme update service.
    Expert theme update link
  3. On the bottom left corner, select which theme you would like the installation completed on.
    Select a theme
  4. Select Submit Request.

 


 

Manual Install

This step will instruct you on how to complete the Liquid code installation yourself. This method of installation is only suggested if you have a strong knowledge of Liquid coding.

Before you start the installation, it is highly recommended to create a duplicate of your preferred theme. This allows you to test your installation before making the theme live on your store.

Note: Our installations team recommends completing an automatic installation first. The manual installation steps below can then be followed to ensure that everything is added correctly and displaying properly on your store.

 


 

Step 1: Add the liquid files

  1. From the Shopify 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:
    bsub-widget.liquid
    bsub-cart.liquid

    File the snippet files

  6. If the snippet files do not currently exist, select Add a new snippet. If these files do exist, please skip to Step #7.
    1. Enter the correct snippet name.
    2. Select Create snippet.

      Select create snippet

    3. Copy and paste the code from the following links:
    4. Select Save
  7. Under Assets, find the following files: 
    bsub.js
    bsub.scss

    Find the asset files

  8. If the Asset files do not currently exist, select Add a new asset. If they do exist, please skip to Step 2: Edit product.liquid.
    1. Select Create a blank file.
    2. Enter the correct asset name.
    3. Select either .scss or .js for the file type.
    4. Select Add asset.

      Select add asset

    5. Copy and paste the code from the following links:
    6. Select Save.

 


 

Step 2: Edit product.liquid

  1. Under Templates, select product.liquid. This code may be under product-template.liquid (IE. the product.liquid contains {% section ‘product-template’ %}) 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:

    {% render 'bsub-widget' %}

    Note: The widget must be included within a <form> or { % form %}, otherwise the widget will not appear.

    Add the widget

  3. Select Save.

If you would like to move the subscription widget up or down the product page, you can do so by moving the line of code mentioned above either up or down the liquid file between the <form> or { % form %} start and end lines.

 


 

Step 3: Edit cart.liquid

  1. Under Templates, select cart.liquid. It may redirect you to cart-template.liquid depending on your theme.
  2. Find the beginning of the cart properties loop in the file:

    Find the cart lop code

  3. Add the following code within the cart loop:

    {% render 'bsub-cart' %}

    Paste the code

  4. Select Save.

 


 

Step 4: Edit theme.liquid

  1. Under Layout, select theme.liquid
  2. Find the end of the head tag. This should look like </head> in the file:

    Find the ending of the head tag

  3. Add the following code above the closing head tag:

    {{ 'bsub.js' | asset_url | script_tag }} 
    {{
    'bsub.scss.css' | asset_url | stylesheet_tag }}

    Paste the code above the ending head tag

  4. Select Save.

 


 

Step 5: Edit customers/account.liquid

This step explains how to add the My Subscriptions page link in 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 into the recommended location, though other locations can be utilized as well - like in your main navigation bar. This link can be moved around to your liking.

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

    Select Customers Account Liquid

  2. Under the line:

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

    or:

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

    copy and paste the following code:

    <p><a href="/pages/my-subscriptions" class="text-link">My Subscriptions</a></p>

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

  3. Select Save.

 


 

Step 6: Add the Customer Portal 

  1. On the home page of the Shopify admin, select Online Store, then Pages.
  2. Select Add page.

  3. Add My Subscriptions to the title of the page.

  4. Select the Show HTML button:

    Select Show HTML button

  5. Add the following line of code to the HTML input box:
    <div id="customer-portal-root"></div>

    Add the cde

  6. Select Save.

Manual Install via App Widget Block

 Caution

Installation via App Widget Block is only compatible with Shopify's Online Store 2.0 and Shopify 2.0 themes. Please visit Upgrading to Online Store 2.0 (links to Shopify) for more information.

Step 1: Install the app widget block

  1. From the Shopify Admin, select Online Store.
  2. Select Customize.
    Customize.png
  3. Select Products, then select the template you want to edit.
    Product_Template.gif

    Note: Subscription products must be added to a subscription group in order to display a preview of the widget.

  4. Select Product information, then Add block.
    Product_Information.gif
  5. Select BSUB Widget.
    BSUB_Widget.png

 


 

Step 2: Edit customers/account.liquid

This step explains how to add the My Subscriptions page link in 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 into the recommended location, though other locations can be utilized as well - like in your main navigation bar. This link can be moved around to your liking.

  1. From the Shopify 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 Templates, select customers/account.liquid.

    Select Customers Account Liquid

  6. Under the line:

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

    or:

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

    copy and paste the following code:

    <p><a href="/pages/my-subscriptions" class="text-link">My Subscriptions</a></p>

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

  7. Select Save.

 


 

Step 3: Add the Customer Portal 

  1. On the home page of the Shopify admin, select Online Store, then Pages.
  2. Select Add page.

  3. Add My Subscriptions to the title of the page.

  4. Select the Show HTML button:

    Select Show HTML button

  5. Add the following line of code to the HTML input box:
    <div id="customer-portal-root"></div>

    Add the cde

  6. Select Save.

 


 

Verify the Bold Subscriptions Installation

Before continuing, please ensure that you have completed one of the installation methods above. Please know that a Subscription Group will have to be created on your store to test this further.

  • Within the Shopify admin, select Products and then select a product that is already included within a subscription group. You should see a section within the item page that has selling plans, and Bold Subscriptions will be listed within the frequency options.
  • Navigate to your storefront and find a Subscription product. The widget should appear on your product page.
  • Test adding the product to your cart. The order frequency should appear within the cart page.
  • Take the product to the checkout and purchase the subscription. You can then review the Bold Subscriptions app customers to see if that order is now listed.
  • On your storefront, log in to a customer account for subscriptions. On the account page, you should see a My Subscriptions link.

 


 

Code Removal

If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet files, asset files, and the code includes mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Merchant Success team.

You can remove the app from your Shopify admin by following this guide: Uninstall an App from Your Store.

 

 Alert

If you are experiencing issues with performance on the storefront with Bold Subscriptions V2 after completing the steps above, we recommend requesting an expert installation, as your theme may require further liquid code changes. See previous step Request a Subscriptions V2 Install for more information.

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