Bold Subscriptions for Shopify Checkout offers a guided onboarding flow to help you quickly activate Bold Subscriptions on your store. This flow helps you set up your first subscription group, add the manage subscription link to your store, and install Bold Subscriptions to the theme of your choice.
This article walks you through each step of the in-app onboarding flow. To begin, follow along with our video walkthrough or view the steps specific to your Shopify theme below:
If you are unsure of whether you are using a vintage or Online Store 2.0 theme, please visit Shopify’s Theme architecture versions article.
Prefer to manually install? Please visit our Manual Installation Guide for Subscriptions for Shopify Checkout.
Pro-Tip: If you accidentally close the onboarding flow, you can return to it by navigating back to the Bold Subscriptions’ admin and clicking Help > Storefront setup.
Video Walkthrough
Onboarding flow for Online Store 2.0 themes
Step 0: Migration
To migrate existing subscribers, select the I’ll migrate later option and click Next, our Customer Support team will connect with you and perform the migration. You can continue with the install without performing the migration.
Step 1: Select a theme to launch Subscriptions on
Use the dropdown menu to select the Online Store 2.0 theme where you want to install Bold Subscriptions.
Note: If you are using an unpublished theme, the General setup message in the app menu will show as incomplete. It will update to complete once your theme is published.
Click Next.
Step 2: Create your first subscription group
Select an option for the order schedule.
Choose a discount.
Click Select Products
Select one or more products for your subscription.
Click Confirm.
Click Next
Step 3: Enable the Bold Subscriptions app embed on your theme
Click Edit Shopify theme.
Note: This directs you to your Shopify theme customizer in a new tab.
Enable the Bold Subscriptions app embed by moving the toggle to the right.
Click Save in the top right-hand corner.
Return to Bold Subscriptions and click Next.
Step 4: Place the subscription widget in a location of your choice on the product page.
Click Add Widget.
Note: This directs you to your Shopify theme customizer in a new tab.
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 block to your preferred location on the page.
Once you are satisfied with the widget location, click Save.
Return to Bold Subscriptions and click Next.
Step 5: Place the Manage Subscriptions link
This step determines where and how your customers can access their customer portal to manage their own subscriptions.
As a navigation item in your store
Click Manage Subscriptions.
Note: This directs you to your Shopify admin Menu page in a new tab.
Select a navigation menu of your choice.
Note: If you are using the newest version of Shopify's customer accounts, we recommend adding it in your Customer account menu.
Click Add menu item.
Click the Link field, select Pages, then select the page titled Manage Subscriptions.
Click Save.
Return to Bold Subscriptions.
Click Next.
Click Finish.
Manually insert it with code
You can manually insert the Manage Subscriptions link anywhere on your storefront using the following code:
<p><a href="/pages/manage-subscriptions" class="text-link">Manage Subscriptions</a></p>
However, since customers must log into their storefront customer account before they can manage their subscriptions, the following instructions show you how to place it within Shopify's legacy customer account page.
Alert: This method is only for Shopify's legacy customer accounts. If you are using the new Shopify customer accounts, add the link as a navigation item in your customer account main menu (see steps above).
Click Open Shopify.
Note: This directs you to your theme files in a new tab.
Expand the Sections folder, and open 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.
Onboarding flow for vintage themes
Step 0: Migration
To migrate existing subscribers, select the I’ll migrate later option and click Next, our Customer Support team will connect with you and perform the migration. You can continue with the install without performing the migration.
Step 1: Select a theme to launch Subscriptions on
Using the dropdown menu, select the vintage theme where you want to install Bold Subscriptions.
Note: If you are using an unpublished theme, the General setup message in the app menu will show as incomplete.It will update to complete once your theme is published.
Click Next.
Step 2: Create your first subscription group
Select an option for the order schedule.
Choose a discount.
Click Select Products
Select one or more products for your subscription.
Click Confirm.
Click Next
Step 3: Enable the Bold Subscriptions app embed on your theme
Click Edit Shopify theme.
Note: This directs you to your Shopify theme customizer in a new tab.
Enable the Bold Subscriptions app embed by moving the toggle to the right.
Click Save in the top right-hand corner.
Return to Bold Subscriptions and click Next.
Step 4: Place your subscription widget for the vintage theme
Activating Bold Subscriptions on a vintage theme requires Liquid code to be inserted into your theme files. Select one of the provided options:
Request an installation - This option sends a request to our Customer Success team to let them know they can perform the code installation for you. Once it’s complete, the team sends you an email to let you know. Click Request install.
Manually insert it with code - This option directs you to this article where you can follow the steps below to manually install the code yourself. To do this, please follow the steps below.
Manual Liquid code install (vintage themes)
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.
Before you start the installation, please create and work on a duplicate of your theme. This allows you to test your installation before making the theme live on your store.
To manually install the code to your files, please follow the steps below.
Step 1: Add the liquid files
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 #7 below. If you need to reinstall Bold Subscriptions, please use the new bsub.css file as shown below. Please note, any customizations you have made to the previous bsub.scss file should be recreated in the new file.
From the Shopify admin, navigate to Sales channels > Online Store.
Duplicate the theme you would like the installation completed on.
Select Edit code on the duplicated theme.
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:
Select 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 2: Edit product.liquid
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.
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.
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
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' %}Select Save.
Step 4: 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 }}Select Save.
Step 5: 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.
View the steps relevant to your choice below.
As a navigation item in your store
Select As a navigation item in your store.
Click Open Shopify.
Note: This directs you to your Shopify admin Menu page in a new tab.
Select a navigation menu of your choice.
Note: If you are using the newest version of Shopify's customer accounts, we recommend adding the link to your Customer account main menu.
Click Add menu item.
Click in the Link field, select Pages, then select the page titled Manage Subscriptions.
Click Save.
Return to Bold Subscriptions.
Optional: Enable passwordless login by sliding the Customer can access customer portal using passwordless login toggle to the right.
Note: For more information about this feature, please visit Passwordless Login in Subscriptions for Shopify Checkout.
Click Next.
Click Finish.
Manually insert it with code
You can manually insert the Manage Subscriptions link anywhere on your storefront using the following code:
<p><a href="/pages/manage-subscriptions" class="text-link">Manage Subscriptions</a></p>
However, since customers must log into their storefront customer account before they can manage their subscriptions, the following instructions show you how to place it within Shopify's legacy customer account page.
Alert: The link should only be placed in the account page 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).
Click Open Shopify.
Note: This directs you to your theme files in a new tab.
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>.
Select Save.