Setup 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, but examples of what this can appear as can be seen below:

Acount Icon 1 Acount Icon 2

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 info.

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.

 


 

Setup

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:

 

Customer Portal Area

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 Shopify's 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.

When the My Subscriptions link leads to a blank page on your store, that means that the page has yet to be created within the Shopify navigation.

If you would like to take full advantage of the Customer Portal, then follow these steps below to create the page that the My Subscriptions option will link to:

  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.
 Pro-Tip

Making adjustments to the Customer Portal does require knowledge of CSS. If you'd like one of our partners to complete a paid customization on your store, please reach out to HeyCarson via this form.

The Customer Portal can be customized using CSS within your stores theme files.

If you have a good understanding of CSS, and would like to apply customizations to your Customer Portal, please follow these steps:

  1. From Shopify's 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.

Please find a list of current limitations with the Customer Portal, below:

  • 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.
  • Adjustments to the language, or translations are currently not able to be completed within this page.
  • Discount codes are not able to be applied within the Customer Portal.

If you are experiencing any issues with the Customer Portal, please reach out to our Merchant Success team.

Was this article helpful?
0 out of 0 found this helpful