Subscriptions for Shopify Checkout offers your customers the ability to manage their own subscriptions in the Customer Portal. To access the Customer Portal, your customers will need to log into their Shopify customer account via your storefront and select the My Subscriptions link.
Shopify’s customer accounts must be enabled on your store in order for your customers to login and access the Customer Portal.
Alert
As Shopify makes new customer accounts available to merchants, we are working to support this feature in Bold Subscriptions. At this time we recommend to use classic customer accounts to ensure your customers are still able to access their Customer Portal.
This article will show you how to set up the Customer Portal, manage your permissions, and more.
This article is relevant to Subscriptions for Shopify Checkout. If you have Subscriptions V1 on your store, please visit Manage Subscription Page for V1. If you are unsure of which version you currently have, please visit Identify Your Version of Bold Subscriptions.
Setup
The Liquid code install for Bold Subscriptions will install the code for Customer Portal and create the Customer Portal page. Once the Liquid code installation is complete, a My Subscriptions link will be present within the Shopify customer account page.
For more information on how the Liquid code is installed for both Subscriptions and the Customer Portal, please visit our Installation Guide for Bold Subscriptions for Shopify Checkout.
In order for your customers to access their Shopify customer account and the Customer Portal, you will need to make sure customer accounts are enabled on your store. Shopify’s customer accounts should be either optional or required.
Once customer accounts are enabled, your customers will see a login link in the header of your store and in the checkout. How this appears on your storefront is dependent on your theme.
Alert
If you have access to both versions of Shopify’s customer accounts, new and classic, please ensure classic customer accounts are enabled on your store.
For more information on Shopify's customer accounts, please visit Shopify's support article.
In the Customer Portal settings, you can select which actions can be performed by your customers when managing their subscriptions. You can enable or disable their ability to pause, cancel, change order dates, and more.
To adjust the Customer Portal settings in the Bold Subscriptions admin, navigate to Settings > Customer Portal.
For a full explanation of the Customer Portal settings, please visit Edit Settings in Subscriptions for Shopify Checkout.
Once Bold Subscriptions is set up on your store and your customers have active orders, you can manage your customer’s subscriptions on their behalf, or allow them to manage their own depending on the settings you have enabled in the Customer Portal (as shown above).
As the store admin, you are not limited by the permissions you restrict for your customers when making changes to their subscriptions. You can edit your customer’s subscriptions on their behalf, or log in as the customer to view the Customer Portal as they would.
For a full list of the adjustments you can make to your customers subscriptions, please visit Subscription Management: Merchant Perspective in Subscriptions for Shopify Checkout.
For a list of adjustments your customers can make to their own subscriptions, please visit Subscription Management: Customer Perspective in Subscriptions for Shopify Checkout.
Pro-Tip
Making adjustments to the Customer Portal's appearance requires knowledge of CSS. If you're not comfortable with code, our partners are happy to help. You can reach out to one of our partners such as HeyCarson via this form, or Storetasker.
- From the Shopify admin, select Online store > Actions.
- Select Edit code on the theme you would like to customize.
- Under Assets, select Add a new asset.
- Select Create a blank file.
- Next to Create a blank file called, enter bold-custom then select .css within the dropdown menu.
- Select Add Asset.
- Add your CSS Styling within this area, then select Save.
- Under Layout, select theme.liquid.
- Find the <head> element near the top of the file.
- Paste this code right after the <head> tag:
{{ 'bold-custom.css' | asset_url | stylesheet_tag }} - Select Save.
Translate the Customer Portal
The Customer Portal supports the ability to change its default text or add translations for other languages.
Caution
This customization requires developer knowledge. It is recommended to have a developer assist you.
You can manage the Customer Portal's language changes and translations by setting window.BOLD.subscriptions.config.internationalization to an object within your shop's theme, with the following shape:
| Key | Type | Shape |
| {language_code'} | Object |
The ISO 639-1 language code to configure internationalization data for. (en = English, fr = French, es = Spanish, etc.) |
| {language_code}.translation | Object | The key containing the translations for the parent language code. |
| {language_code}.translation.{translation_key} | String |
The translation value for a specific key. Learn more about translation values below. |
A full list of available translation keys and their default values can be found in the window.BOLD.subscriptions.config.internationalizationDefaults object on your storefront.
Example
Setting the en and fr translation of the orderFrequencyTitle key:
{% raw %}
window.BOLD.subscriptions.config.internationalization = {
en: {
translation: {
subscriptionSummaryOrderFrequencyTitle: 'Order frequency'
}
},
fr: {
translation: {
subscriptionSummaryOrderFrequencyTitle: 'Récurrence des commandes'
}
}
}
{% endraw %}
Pro-Tip
Raw tags are needed to output Liquid code as text in Shopify.
Translation Values
- Translation values may contain interpolation values denoted by keys within double curly brace brackets (eg. "The value is {{value}}".) Use the default translation values to guide what interpolation keys are available for each translation key.
- Some translation keys allow an extra key with a _plural suffix to be specified which allows different translations for different counts of the translation subject. For languages requiring more than simple singular and plural translations _0, _1, _2, _n suffixes can also be used.
- Formats of dates can be altered by adding the format after a comma when using an interpolation value (eg. {{date,MMMM DD, YYYY}}). For a full reference of available date format tokens, please view this list.
Language Detection and Fallback
When multiple languages are provided the customer portal will automatically detect the customer's language and chooses the best translations to use from the available options. When customers view your customer portal with a locale not defined in the translations for their language they are given the en translation by default. You can set the window.BOLD.subscriptions.config.internationalizationFallbackLanguage variable to an ISO 639-1 language code to change the fallback language of the customer portal.
Programmatically Changing Languages
If you would like to change the current language of the customer portal in Javascript you can do so using the window.BOLD.subscriptions.changeLanguage(languageCode) method.
Testing Other Languages
You can force the customer portal to display the translations for another language by setting the lng query param in your url to an ISO 639-1 language code. For example, your-shop-url.com/pages/customer-portal?lng=fr.
Translating the Customer Portal through in your theme code, or customizing the Customer Portal via our dedicated APIs requires developer knowledge.
Troubleshooting
When the My Subscriptions link leads to a blank page on your store, this means that the page has yet to be created within the Shopify admin.
The following must be added to your Shopify admin in order for the page to load properly.
- From within the Shopify admin, select Online Store > Pages.
- Select Add page.
- Name the page My Subscriptions.
- Select the Show HTML button, then add the following line of code to the input box:
<div id="customer-portal-root"></div> - Select Save.