Set up and Manage the Customer Portal

Bold Subscriptions V2 offers your customers the ability to manage their own subscriptions through the app's Customer Portal.

Through this page, your customers can make adjustments to their subscription information and their subscriptions, dependent on the permissions you have enabled in the Customer Portal settings

Your customers are able to access the Customer Portal by logging in to their Shopify account via your storefront. This link appears differently based on your theme.

 Example

Account Example Account Example

It is important to note that this link will not appear if you don't have Shopify Customer Accounts enabled. Please visit Shopify Customer Accounts for more information.

This article will help you understand, and set up the Customer Portal on your store.

 Pro-Tip

Please note that this article only relates to Version 2 of Bold Subscriptions. If you have Version 1 currently installed on your store, then please visit our Manage Subscription Page for V1 article.

If you are unsure which version that you currently have installed on your store, please visit our Bold Subscriptions Comparison article for more information.

 


 

Bold recommends setting customer accounts to either optional or required in your Shopify admin in order to see the account management page of your store. For more information on making this adjustment, please visit the Shopify Customer Accounts article.

Once the liquid code installation is completed, a My Subscriptions link will be present on the account management page.

 


 

Adding the My Subscriptions link

The steps below explain how to add the My Subscriptions page link to the customer details page. Without this link being inserted, subscribers may find it difficult to locate where the Customer Portal is.

We recommend inserting this link in this location, though other locations can be utilized as well - like in your main navigation bar. This can be moved around and tested to display to your liking.

To add this link to the Accounts page on your store, please follow these steps:

  1. From within the Shopify admin, select Online Store > Themes.
  2. Select Edit code on the theme you'd like to add this link to.
  3. Under Templates, select customers/account.liquid.
  4. Locate one of the following lines:
    {{ 'customer.account.details' | t }}
    or
    {{ 'customer.account.title' | t }}
  5. Copy & paste the following code:
    <p><a href="/pages/my-subscriptions" class="text-link">My Subscriptions</a></p>
  6. Select Save.

 


 

Creating the Customer Portal Page

In order for your customer's to take full advantage of the Customer Portal, you must provide a link to the Customer Portal from your Shopify admin.

Without this link, the Customer Portal will appear blank.

  1. From within the Shopify admin, select Online Store > Pages.
  2. Select Add page.
  3. Name the page My Subscriptions.
  4. Select the Show HTML button, then add the following line of code to the input box:
    <div id="customer-portal-root"></div>
  5. Select Save.

Bold Subscriptions' Customer Portal can be customized via CSS or via our dedicated APIs, if you have a team of developers.

 Pro-Tip

Making adjustments to the Customer Portal's appearance requires knowledge of CSS. If you're not comfortable with code, our partners at HeyCarson would love to help! You can contact HeyCarson for a quote via this form.

  1. From the Shopify admin, select Online store > Actions.
  2. Select Edit code on the theme you would like to customize.
  3. Under Assets, select Add a new asset.
  4. Select Create a blank file.
  5. Next to Create a blank file called, enter bold-custom then select .css within the dropdown menu.
  6. Select Add Asset.
  7. Add your CSS Styling within this area, then select Save.
  8. Under Layout, select theme.liquid.
  9. Find the <head> element near the top of the file.
  10. Paste this code right after the <head> tag:
    {{ 'bold-custom.css' | asset_url | stylesheet_tag }}
  11. 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 highly 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:

 

window.BOLD.subscriptions.config.internationalization = {

    en: {

        translation: {

            subscriptionSummaryOrderFrequencyTitle: 'Order frequency'

        }

    },

    fr: {

        translation: {

            subscriptionSummaryOrderFrequencyTitle: 'Récurrence des commandes'

        }

    }

}

 

 

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.

 


 

  • At this time, the Customer Portal is not able to be edited. All the information that appears within this area are loaded directly via the Bold app server.
  • Discount codes are not able to be applied within the Customer Portal.
  • The Customer Portal can only be translated through the app's theme code. This 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.

  1. From within the Shopify admin, select Online Store > Pages.
  2. Select Add page.
  3. Name the page My Subscriptions.
  4. Select the Show HTML button, then add the following line of code to the input box:
    <div id="customer-portal-root"></div>
  5. Select Save.
Was this article helpful?
0 out of 0 found this helpful