Installation Guide for Subscriptions for Shopify Checkout

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, please create a duplicate of your theme. This allows you to test your installation before making the theme live on your store.

It is recommended to complete 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, navigate to Sales channels > Online Store.
2. Duplicate the theme you would like the installation completed on.
3. Select Edit code on the duplicated theme.
4. Under Snippets, find the following files:
   bsub-widget.liquid
   bsub-cart.liquid

   

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

      

   3. Copy and paste the code from the following links:
      • bsub-widget.liquid
        
      • bsub-cart.liquid
   4. Select Done. 
6. Under Assets, find the following files: 
   bsub.js
   bsub.css

   

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

      

   5. Copy and paste the code from the following links:
      • bsub.js
      • bsub.css
   6. Select Done.

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.

   

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:

   

3. Add the following code within the cart loop:

   {% render 'bsub-cart' %}

   

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:

   

3. Add the following code above the closing </head> tag:

   {{ 'bsub.js' | asset_url | script_tag }} 
   {{ 'bsub.css' | asset_url | stylesheet_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.

   

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

3. Select Save.

Step 6: Add the Customer Portal page 

1. From the Shopify admin, navigate to Sales channels > Online Store > Pages.

2. Select Add page.

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

4. Select the Show HTML button:

   

5. Add the following line of code to the HTML input box:
   

   <div id="customer-portal-root"></div>

   

6. Select Save.

Step 1: Install the app widget block

1. From the Shopify admin, navigate to Sales channels > Online Store.
2. Select Customize.
   
3. Select Products, then select the template you want to edit.
   
   

   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.
   
5. Select BSUB Widget.
   

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, navigate to Sales channels > Online Store.
2. Duplicate the theme you would like the installation completed on.
3. Select Edit code on the duplicated theme.
4. Under Templates, select customers/account.liquid.

   

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

6. Select Save.

Step 3: Add the Customer Portal page

1. From the Shopify admin, navigate to Sales channels > Online Store > Pages.

2. Select Add page.

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

4. Select the Show HTML button:

   

5. Add the following line of code to the HTML input box:
   

   <div id="customer-portal-root"></div>

   

6. Select Save.