Adding the Subscriptions Customer Portal to Your Shopify Store

The customer portal gives your customers the flexibility to view, track, or make changes to their subscription anytime, with no effort to you. 

Increase your customer lifetime value and retention by allowing customers to access their customer portal from your Shopify login page, either by logging in to their account, or via a passwordless login option.

In this article, you’ll learn how to add the customer portal to your Shopify account page for logged in customers, and as a passwordless login option from your Shopify login page. To learn how customers can access their customer portal outside of Shopify, check out the customer portal direct link options.

How does it work

Once you provide customers with access to their customer portal, they’ll be able to view all their subscriptions, whether they're active, expired, canceled, etc. They’ll be able to view the product details for each subscription, when to expect their next shipment, when they’ll be charged, as well as take a variety of actions to self-manage their subscriptions. 

Learn more about how the customer portal helps customers self-manage their subscriptions, and which information they can access and update.

Before you start

To allow customers to access and manage their subscriptions from your Shopify login page, you need to have at least one subscription offer that’s live on your store. If you haven’t launched any subscriptions yet, you need to complete the Yotpo Subscriptions initial setup.

Adding the customer portal widget to your Shopify account page

Before adding the customer portal widget to your Shopify account page, you need to make sure your account page login link is enabled in Shopify. You can easily check this by going to your store and making sure you have a visible profile icon.
If your Shopify account page is not enabled, follow these steps to enable it:

1. Log in to your Shopify account.
2. From your Shopify main menu, go to Settings > Customer accounts.
3. In the Accounts in online store and checkout section, click Edit.
4. Check the Show login link in the header of online store and at checkout box.

Now that your account page login link is enabled in Shopify, you can choose how you want to add the customer portal widget to your Shopify account page:

• Automatically, by embedding the customer portal widget from Yotpo Subscriptions.
• Manually, by adding the customer portal widget snippet to your Shopify theme code.

Automatically adding the customer portal widget to your Shopify account page

To automatically add the customer portal widget to your Shopify account page:

1. From your Yotpo Subscriptions main menu, go to Store View.
2. Hover over the Customer Portal Widget card and click Edit.
3. If you want to customize the look and feel of your customer portal, hover over the Customer Portal Widget card and click Edit. Learn more about customizing the customer portal, and see the list of available actions you can turn on or off.
4. You can click Preview on the upper-right hand side to see what your customer portal will look like to customers.
5. Once you’re happy with your changes, and are ready to add the customer portal widget to your Shopify account page, click Publish from the upper-right hand side of the page.
6. Click Publish again from the popup window to confirm you want to publish your changes.

You can follow these steps to make sure the customer portal has been added, and to get the complete customer experience.

Manually adding the customer portal widget to your account page file

To manually add the customer portal widget to your Shopify account page:

1. From your Yotpo Subscriptions main menu, go to Store View.
2. If you want to customize the look and feel of your customer portal, hover over the Customer Portal Widget card and click Edit. Learn more about customizing the customer portal, and see the list of available actions you can turn on or off.
3. You can click Preview on the upper-right hand side to see what your customer portal will look like to customers.
4. Once you’re happy with your changes, from the Customer Portal Widget card, click the 3-dot menu at the top and select Get code.
5. This will open up a popup window with two different code snippets you can copy. Copy the second code snippet.
   
6. Open a new tab and log in to your Shopify account.
7. From your Shopify main menu go to Online Store > Themes.
8. Click the 3-dot menu on the theme you wish to edit, if you have more than one theme, and click Edit code.
9. From the files section on the left-hand side of the page, select the Sections folder and then select the account file.
   The account file name will be either customers/login.liquid or main-login.liquid, depending on your store and theme.
10. Paste your customer portal snippet code to your desired location in the file.
11. Click Save.

Your customer portal widget is now available from your Shopify account page anytime customers log in to view and manage their orders and subscriptions. You can follow these stepsto make sure the customer portal has been added, and to get the complete customer experience.

Adding a passwordless login option from your Shopify login page

To offer your customers the convenience of accessing their subscriptions from your store, without the hassle of creating an account or remembering their login details, you can easily add a passwordless login option right from your Shopify login page.

To add a passwordless login option to your Shopify login page:

1. From your Yotpo Subscriptions main menu, go to Store View.
2. Go to the Customer Portal Widget card, click the 3-dot menu at the top and select Get code.
3. This will open up a popup window with two different code snippets you can copy. Copy the instance-id from the second code snippet.
   Please note:

   Save the instance-id somewhere you'll be able to access it from later on.
   
4. Open a new tab and log in to your Shopify account.
5. From your Shopify main menu go to Online Store > Themes.
6. Click the 3-dot menu on the theme you wish to edit, if you have more than one theme, and click Edit code.
7. From the files section on the left-hand side of the page, select the Sections folder and then select the login file. The login file name will be either customers/login.liquid or main-login.liquid, depending on your store and theme.
8. Paste the following snippet to your desired location in the file.
   ActionScriptActionScript

   <div class="yotpo-widget-instance" data-yotpo-instance-id="252480
   " widget-type="SubscriptionsCustomerPortal" injection="auto" mode-send-link=true>div>

9. Replace the instance-id (“252480”) with the one you copied from Yotpo Subscriptions in step 3.
10. Click Save.

You can follow these steps to make sure the customer portal has been added, and to get the complete customer experience..

Testing the customer portal experience

Testing the logged-in experience

Once you’ve added the customer portal widget to your Shopify account page, you can test it out yourself and preview your customers’ experience:

1. Go to your Shopify store and make a subscription purchase.
2. Go to your Shopify store account page and log in, or create an account if you don’t already have one.
3. Once you’re logged in to your account, you should see your customer portal embedded in the page. You can explore the subscription information and actions that are available to your customers, as well as the look and feel.

Testing the passwordless login experience

Once you’ve added a passwordless login option to your Shopify login page, you can test it out yourself and preview your customers’ experience:

1. Go to your Shopify store and make a subscription purchase.
2. Go to your Shopify store account page and make sure you see the new passwordless login section you’ve added.

3. Enter your email and click Get Link to receive a passwordless login link to your email.
4. Go to your inbox to check for a manage subscriptions email from Yotpo Subscriptions, and follow the link to manage your subscriptions from the email.You can explore the subscription information and actions that are available to your customers, as well as the look and feel.

Next steps

Improve transparency and engagement with your customers by adding a manage subscriptions link to your Shopify’s order status page so customers view and manage subscriptions as soon as they’ve completed their purchase.

See how customers can access the customer portal via direct link anytime, without adding the customer portal to Shopify, or as an additional way to help customers easily manage their subscriptions.