# Customer Portal

Empower your customers with a self-service portal. This will allow them to manage their subscriptions directly, enhancing their experience and reducing your customer service load. To create this portal, navigate to the Installation tab on the Settings Page in Subrise and click on Customize Customer Portal button.

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FAFA5Sz7aRi3Dyc0CxULF%2FScreenshot%202024-06-26%20at%2012.43.53%20(1).png?alt=media&#x26;token=4a9ae8e6-e280-4420-aa0b-9bb451a0a7e9" alt=""><figcaption></figcaption></figure>

You will be directed to the customer portal editor

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FO95BdPgN3Z2GoQmssa5R%2FScreenshot%202024-06-26%20at%2021.48.53.png?alt=media&#x26;token=9ec6248a-6883-4307-a4a0-296ca2312fd8" alt=""><figcaption></figcaption></figure>

Click on the Home Page dropdown, then on Pages, and then select Create Template. Create a name for the template and then click on Create Template as shown below:

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FnT5hgNBCmmyaa7nZAY13%2FScreenRecording2024-06-27at00.36.13-ezgif.com-speed.gif?alt=media&#x26;token=233681b6-db99-42d5-9141-ff217ca2f524" alt=""><figcaption></figcaption></figure>

With that done, navigate to the Sales Channel section and then the Plans page under the Online Store tab.&#x20;

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FYjtBUmwv3ceFvgGR9vn5%2FScreenshot%202024-06-27%20at%2001.06.13.png?alt=media&#x26;token=66a2302b-1ab3-42dd-b871-94f79f174a7a" alt=""><figcaption></figcaption></figure>

Click on Add Page

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FVaha1iajKL8YzreIyksf%2FScreenshot%202024-06-27%20at%2001.06.13%20(1).png?alt=media&#x26;token=38866bdd-8d3d-4839-bd28-add98249ca82" alt=""><figcaption></figcaption></figure>

Give the Page a title and then assign it to the template we created above. You should see it in the theme template dropdown. With that done, you can save the changes

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FWLmFpI3ZvqyaCGOBhnQ8%2FScreenshot%202024-06-27%20at%2001.16.06.png?alt=media&#x26;token=4f20a296-25b9-4c4b-935e-aa15b8b2a040" alt=""><figcaption></figcaption></figure>

Next, navigate to the Theme tab under Online Store and click on the Customize button on the page.

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FUMhKvb830NSXHmO9K4SX%2FScreenshot%202024-06-27%20at%2001.26.55.png?alt=media&#x26;token=1d8ff541-b3b8-4e38-9b75-2f776a07b12e" alt=""><figcaption></figcaption></figure>

Click on the Home Page dropdown, then on Pages, and then select the template we created.

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FpEwWlYJUPgx2MvVsJdnp%2FScreenRecording2024-06-27at01.32.07-ezgif.com-speed.gif?alt=media&#x26;token=4d84d880-e2b1-41a2-925e-64efb7d8bdde" alt=""><figcaption></figcaption></figure>

With that done, hide the content of the page by clicking on the eye icon. After that, click on Add Section, navigate to the Apps tab and then select Customer Portal

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2F0DzZzi63Va1PXOoEKX8g%2FScreenshot%202024-06-27%20at%2001.38.56.png?alt=media&#x26;token=0a0df870-adf4-4feb-b7c6-f78e9406c71f" alt=""><figcaption></figcaption></figure>

With that done, you now have a password-protected page where your customers can manage their subscriptions.&#x20;

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FC5SqN2c1WbpFt3KHiCOg%2FScreenshot%202024-06-27%20at%2001.48.01.png?alt=media&#x26;token=d83a88dc-0afc-4d14-93fc-3e899b146a05" alt=""><figcaption></figcaption></figure>

During development, you will be provided with mock data, which will enable you to customize the page's look and feel adequately.

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2Fti7Qg1gY0z6cJ2bdL63Y%2FScreenRecording2024-06-27at01.56.08-ezgif.com-speed.gif?alt=media&#x26;token=b176f496-9e17-43d2-bb8c-e7a12bcb5433" alt=""><figcaption></figcaption></figure>

Let's go through the settings and see what you can do with them in the editor.

<mark style="color:red;">Global Settings</mark>: The global settings allow you to customize the background color of the page and also the roundness of the card borders&#x20;

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FQiFgOzC9Hex8a7OkMjhw%2FScreenshot%202024-07-11%20at%2011.34.33.png?alt=media&#x26;token=0509825a-a3c4-4b6d-b453-49c727864ba4" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">Font Settings</mark>: This is used to set the text color and size.

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2F0aM7BdK3reXVH43GPKhi%2FScreenshot%202024-07-11%20at%2011.37.33.png?alt=media&#x26;token=9427b0fe-c565-4f10-b9fc-23a521769820" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">Button Settings</mark>: This is used to customize button text and color.

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FIsvLa9t78lWytySCOZS6%2FScreenshot%202024-07-11%20at%2011.39.54.png?alt=media&#x26;token=a80cddee-0356-47b0-b396-ca42e9d3198a" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">Product Table Settings</mark>: Customize how and if you want to show action add-on products&#x20;

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FhgnwkztCLK8w4qqABCxT%2FScreenshot%202024-07-11%20at%2011.40.52.png?alt=media&#x26;token=b74ee7ce-a25e-44e4-b1d1-ecee62e663a8" alt=""><figcaption></figcaption></figure>

<mark style="background-color:red;">Card Settings</mark>: Customize card box width, border color, and box shadow.

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FOOZvqKiADOmWEHouokvo%2FScreenshot%202024-07-11%20at%2011.42.27.png?alt=media&#x26;token=099edcf0-fcf0-473f-9f9a-dcf82971e0b5" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">Title Settings</mark>: Customize title textx with this setting

<figure><img src="https://1507690303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoNYxxCzbbZsdqiP7Nha8%2Fuploads%2FvuTvecfsyx1MZlI8ui0v%2FScreenshot%202024-07-11%20at%2011.43.24.png?alt=media&#x26;token=bc093423-b707-4341-9dd0-fef925aecc3c" alt=""><figcaption></figcaption></figure>

With this portal, customers can manage their subscriptions, add products, manage their billing and shipping addresses, manage charges, and also manage payment methods. You can also customize the page using the styles provided. Save the changes and you will have successfully created your customer subscription portal.
