Customize the Customer Portal

You can customize the customer portal colors and style from within your theme files using CSS. In addition, the customer portal supports the ability to change its default text or add translations for other languages.

Pro-Tip: Try our Customer Portal Advanced Language Customization Tool for language changes that don't require complicated code or advanced technical skill.

Customize the customer portal with CSS

Alert: These customizations require knowledge of CSS. If you are not comfortable with CSS, you can reach out to one of our partners such as ShopExperts or Storetasker.

From the Shopify admin, navigate to Online store.
Next to the theme you would like to customize, click the three dots (...), then select Edit code.

Note: We recommend working on a duplicate theme.
Expand the Assets folder, and click the New File icon.
Name the file bold-custom.css.
Add your CSS styling within this area, then click Save.
Expand the Layout folder, and open 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 }}

Click Save.

Change the customer portal login prompt text

Non-logged in customers attempting to access the customer portal via a storefront Manage Subscription link will see the following message: This is awkward. You need to log in.

Example

This is awkward. You need to log in.

If you would like to show a different message, you can customize this text by adding some code to your theme.liquid file. To do this, please follow the steps below.

Alert: Adding a hyperlink to this area is currently not possible as html is not supported in translations.

From the Shopify admin, navigate to Online store.
Next to the theme you would like to customize, click the three dots (...), then select Edit code.
Expand the Layout folder, and open theme.liquid.

Add the following code near the bottom of the file above the </body> tag:

<script>

{% raw %}

window.BOLD.subscriptions.config.internationalization = {

    en: {

        translation: {

            loadingSubscriptionsLoggedOutError: 'replace with new text'

        }

    }

}

{% endraw %}

</script>

In the code, change replace with new text to your preferred text.
Click 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 advanced technical knowledge. It is recommended to have a developer assist you. As an alternative, try our Customer Portal Advanced Language Customization Tool for language changes that don't require complicated code or advanced technical skill.

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.

The following shows an example of 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 %}

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.

Advanced language customization tool

Our advanced language customization tool allows you to quickly and easily generate the script to change the language in the customer portal without the need to write complicated code. This tool allows you to change the wording in specific areas or translate it to another language entirely.

Language editor

For step-by-step instructions, please visit Customer Portal Advanced Language Customization Tool.

Customize the Customer Portal