Bold Subscriptions for Shopify Checkout offers two different methods to help you activate subscriptions on your store. You can use the in-app onboarding flow outlined in Activate Subscriptions for Shopify Checkout or follow the manual install process using the steps outlined in this article.
To manually install Bold Subscriptions on your store, please follow the steps relevant to your Shopify theme.
If you are unsure of whether you are using a vintage or Online Store 2.0 theme, please visit Shopify’s article Theme architecture versions.
Pro-Tip: The manual install for vintage themes requires Liquid code to be inserted to your theme. If you are not comfortable working with Liquid code, please move through the steps in Activate Subscriptions for Shopify Checkout to request that our team completes the installation for you.
Video Walkthrough
Manual install for Online Store 2.0 themes
Step 1: Enable the Bold Subscriptions app embed
From the Shopify admin, navigate to Sales channels > Online Store > Themes.
Click Customize next to the theme you want to install Bold Subscriptions on.
Click the app embeds icon in the left sidebar.
Enable the Bold Subscriptions app embed by moving the toggle to the right.
Step 2: Install the Subscription widget app block
Click the Sections icon in the left sidebar.
Expand the top-center dropdown menu, select Products, then select the product template you want to install the subscription widget on.
In the left menu under the Template section, hover your curser between menu items until the Add block pop-up appears.
Click on the blue plus sign.
Click on Apps, then click on Subscription widget.
Optional: To see a live preview of the storefront subscription widget, switch your Default product to one that belongs to an active subscription group. In the top left corner of the theme customizer, next to Preview, click Change and select a subscription product.
Drag and drop the Subscription widget app block to your preferred location on the page.
Click Save in the top-right corner of the page.
For more Subscription widget app block styling options, please visit Customize the Subscription Widget App Block.
Step 3: Create the customer portal page
Alert: This step is only necessary if you installed Bold Subscriptions on your store before December 11, 2023. This page is created automatically for those who've installed after this date.
From the Shopify admin, navigate to Sales channels > Online store > Pages.
Click Add page.
Add Manage Subscriptions to the title of the page.
Click the Show HTML button:
Add the following line of code to the HTML input box:
<div id="customer-portal-root"></div>
Click Save.
Step 4: Place the Manage Subscriptions link
This step determines where and how your customers can access their customer portal to manage their own subscriptions. You can place the Manage Subscription link in your choice of the following locations:
As a navigation item in your store - This allows you to add the Manage Subscriptions link to a navigation bar of your choice.
Manually insert it with code - This allows you to place the Manage Subscriptions link in a location of your choice.
Note: Unless you enable Passwordless Login in Bold Subscriptions, customers must log into their storefront customer account before they can access the customer portal to manage their subscriptions.
View the steps relevant to your choice below.
As a navigation item in your store
In Shopify, navigate to Content > Menus.
Click on the menu of your choice.
Note: If you are using the new version of Shopify's customer accounts (not the legacy version) it's best to include it in the Customer account menu.
Click Add menu item.
Click in the Link field, select Pages, then select the page titled Manage Subscriptions.
Click Save.
Manually insert it with code
These directions show you how to place the Manage Subscriptions link code in a visible area inside of Shopify's legacy customer account page, however, any location can be utilized.
Alert: The link should only be placed in the account page using code if you are have Shopify's legacy customer accounts enabled on your store. If you are using the new version of Shopify's customer accounts, you can add it as a navigation item in your customer account main menu (see steps above).
In the Shopify admin, navigate to Sales channels > Online Store.
Click the ellipsis next to your chosen them, and select Edit code.
Under Sections, select main-account.liquid.
Under the line:
{{ 'customer.account.details' | t }}or:
{{ 'customer.account.title' | t }}copy and paste the following code:
<p><a href="/pages/manage-subscriptions" class="text-link">Manage Subscriptions</a></p>
Click Save.
Manual install for vintage themes
Note: It’s best to create and work on a duplicate copy of your Shopify theme when installing Liquid code. This allows you to test your installation before making the theme live on your store.
These instructions show you how to complete the Liquid code installation yourself. This method of installation is only suggested if you have a strong knowledge of Liquid coding.
Step 1: Enable the Bold Subscriptions app embed
From the Shopify admin, navigate to Sales channels > Online Store > Themes.
Click Customize next to your desired theme.
Click the app embeds icon in the left menu.
Enable the Bold Subscriptions app embed by moving the toggle to the right.
Click Save in the top right-hand corner.
Click Exit in the top left-hand corner to return to your Shopify admin.
Step 2: Add the liquid files
Alert: If you have previously installed Subscriptions for Shopify Checkout on your store prior to March 2023, then you will have the bsub.scss file on your store, instead of the bsub.css file as shown in step 7 below. If you need to reinstall Bold Subscriptions, please use the new bsub.css file as shown below. Any customizations you have made to the previous bsub.scss file will need to be recreated in the new file.
From the Shopify admin, navigate to Sales channels > Online Store > Themes.
Click the ellipsis next to your desired theme, and select Edit code.
Under Snippets, find the following files:
bsub-widget.liquid
bsub-cart.liquid
If the snippet files do not currently exist, select Add a new snippet. If these files do exist, please skip to Step #6.
Enter the correct snippet name.
Select Create snippet.
Copy and paste the the following code into their respective files:
Click Save.
Under Assets, find the following files:
bsub.js
bsub.css
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.
Step 3: Edit product.liquid
Under Templates, select product.liquid. This code may be under product-template.liquid (i.e., the product.liquid contains {% section ‘product-template’ %}) depending on your theme.
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.
Click 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 4: Edit cart.liquid
Under Templates, select cart.liquid. It may redirect you to cart-template.liquid depending on your theme.
Find the beginning of the cart properties loop in the file:
Add the following code within the cart loop:
{% render 'bsub-cart' %}Click Save.
Step 5: Edit theme.liquid
Under Layout, select theme.liquid.
Find the end of the head tag. This should look like </head> in the file:
Add the following code above the closing </head> tag:
{{ 'bsub.js' | asset_url | script_tag }} {{ 'bsub.css' | asset_url | stylesheet_tag }}Click Save.
Step 6: Create the customer portal page
Alert: This step is only necessary if you installed Bold Subscriptions on your store before December 11, 2023. This page is created automatically for those who've installed after the specified date.
From the Shopify admin, navigate to Sales channels > Online store > Pages.
Click Add page.
Add Manage Subscriptions to the title of the page.
Click the Show HTML button:
Add the following line of code to the HTML input box:
<div id="customer-portal-root"></div>
Click Save.
Step 7: Place the Manage Subscriptions link
This step determines where and how your customers can access the customer portal to manage their own subscriptions. There are two choices:
As a navigation item in your store - This places a Manage Subscriptions link to a navigation bar of your choice on your storefront.
Manually insert it with code - This allows you to place a Manage Subscriptions link in a location of your choice.
Note: Unless you enable Passwordless Login in Bold Subscriptions, customers must log into their storefront customer account before they can access the customer portal to manage their subscriptions.
View the steps relevant to your choice below.
As a navigation item in your store
In Shopify, navigate to Content > Menus.
Click on the menu of your choice.
Note: If you are using the new version of Shopify's customer accounts (not the legacy version) it's best to include it in the Customer account menu.
Click Add menu item.
Click in the Link field, select Pages, then select the page titled Manage Subscriptions.
Click Save.
Select a navigation menu of your choice.
Click Add menu item.
Click in the Link field, select Pages, then select the page titled Manage Subscriptions.
Click Save.
Manually insert it with code
These directions show how to place the Manage Subscriptions link in a visible area inside of Shopify's legacy customer account page, however, any location can be utilized.
Alert: The link should only be placed in the account page using code if you are using Shopify's legacy customer accounts. If you are using the new version of Shopify's customer accounts, you can add it as a navigation item in your customer account main menu (see steps above).
In the Shopify admin, navigate to Sales channels > Online Store.
Click the ellipsis next to your chosen them, and select Edit code.
Under Templates, select customers/account.liquid.
Under the line:
{{ 'customer.account.details' | t }}or:
{{ 'customer.account.title' | t }}copy and paste the following code:
<p><a href="/pages/manage-subscriptions" class="text-link">Manage Subscriptions</a></p>
If you are not seeing either of the codes above, you can add this under the </header>.
Click Save.
Verify the installation
To verify the installation after completing one of the installation methods above, you can either purchase a subscription yourself and then issue yourself a refund, or use Shopify Payments in test mode. For more information, please visit Set up Subscriptions for Shopify Checkout.
Uninstall
The app embeds can be turned off or Liquid code can be removed by going through the steps above to find their location. If you'd like help removing Liquid code from your theme files, please reach out to our Customer Success team.
To cancel your subscription to Bold Subscriptions and remove the app from your store, please follow these steps:
From your Shopify admin, click Settings.
Click Apps and sales channels.
Click Uninstall next to Bold Subscriptions.
Optional: Select a reason for the uninstall.
Click Uninstall.
Note: Once the application has been uninstalled, any active subscribers within Bold Subscriptions are automatically cancelled and you will not be charged for the monthly plan going further.