Skip to main content
All CollectionsCustomer Portal
Stay Ai Customer Portal Setup
Stay Ai Customer Portal Setup

Let's get your customers setup and able to manage their subscriptions!

Karin Brashears avatar
Written by Karin Brashears
Updated over a year ago

What is the Customer Portal?

The customer portal is the place where your customers will come to access subscription details, manage their subscription, add new products to their upcoming order, and manage profile information. The Stay Ai Merchant Portal gives our clients the ability to create a cohesive experience between your Shopify theme and our hosted customer portal.

Customize Your Portal

Once you are in the Stay Ai portal, navigate to the "Customize Portal" section. This is where the magic happens! Start with:

Design

This is where you will determine the look and feel of your customer portal. The possibilities are (almost) endless.

  • Banner Ad: If there is an image or ad that you desire to be displayed on the customer portal, this is where it is configured. Toggling this "on" will give you the ability to select an image, and provide a clickable link for both mobile and desktop. Creative for your banner ad can be added via a file update or Image URL.

  • Base Colors: Determine the colors that would be on the page of the customer portal.

    • Primary Color: The primary color is background color of your header at the top of your customer portal (Light Pink in example)

    • Base Color: This is the color of your portal background, which sites on top of the Page Background but under the page content. (Dark Pink in example)

    • Page Background: These colors serve as the background of your page, behind the page content (White in example below)

  • Text Colors: Determines the color of any text on the page that is outside of button text

    • Text : This will be the color of most of the text across the page including the left hand portal navigation options, product titles, variant titles, prices, subscription detail header, discount code details and order total breakdown. (Green in the example below)

    • Links / Accent: This is the color of the text indicating what page of the portal you are on, in the left hand navigation (Subscriptions, Past Orders, Profiles, etc) (Red in the example below)

    • Reverse: This is the color of your Subscription #, Subscription Status and "Add Extras to Next Order" copy (Pink in example below)

  • Primary CTA: Any buttons that are considered a "focused user action", such as "Get it Now", will inherit this treatment

    • Background Color: Determines the color for the background of the Get it Now and Discount toggles, as well as the tabs of the subscription tabs that are note currently selected, should your customer have multiple subscriptions (Green in example below)

    • Text Color: Determines the color of the text for the buttons mentioned above. (Red in example below)

    • Stroke Color: Determines the color of the border of the "Get It Now" Button (Orange in the example below)

    • Width: This can either increase or decrease the thickness of the stroke (Orange in the example below)

    • Edges:Can be set by either "Round" or "Square" for the button display (Orange in the example below)

  • Secondary CTA: Any buttons that live within the center of the page content, and share equal importance (i.e. "Set Next Order Date", "Manage with SMS", etc.). You will also need to select the background color, text color, stroke color, width, and edges for these CTA's.

    • Background Color: Determines the color for the background of theSkip, Swap, Set next Order Date, Manage with SMS, Update my info, Get, Pause and Cancel buttons (Light blue in example below)

    • Text Color: Determines the color of the text for the buttons mentioned above. (Dark blue in example below)

    • Stroke Color: Determines the color of the border of the buttons mentioned above (Pink in the example below)

    • Width: This can either increase or decrease the thickness of the stroke (Pink in the example below)

    • Edges:Can be set by either "Round" or "Square" for the button display (Pink in the example below)

  • Frames: This is referring to the shape of the "cards" on the customer portal. Cards are the boxes housing what products customer are subscribed to, what products customers are adding on one-time to their next order, what frequency they are subscribed to and their delivery address.

    • Stroke Color: Determines the color of the border surrounding the cards (Pink in the example below)

    • Edges: 0px will have a perfectly square card, while 10px will create rounded edges on the card. Example below highlights Edges at a 5px.

Design

Beyond customizing your customer portals banner ad and colors, your team can easily update nearly every item of copy on the dashboard. Not only can you update the buttons and header copy, but you can also update confirmation messaging as well, such as the messaging a customer will see when attempting to cancel their subscription.

Products

Lastly, the Products tab allows your team to determine which, if any, products you would like to add to the customer portal to allow customers to add or swap to, on their next order. Allowing customers to add items to their next order is a great way to increase AOV! These products can show in a variety of places. Let's go through some definitions that will help you setup your products in the customer portal:

Product Carousel: The carousel sits at the top of the page, which rotates freely, but can also be manually rotated with the arrows at the side. To utilize the Carousel, you must add at least 3 products- but no more than 12, so it's important to choose the highest valued products of your portfolio to show up here.

View All Products: Slightly above the carousel is an option for your customers to "View All Products". All items that you enable to be swapped, added on one time or added onto a Subscription will populate here and are searchable via the Search Bar!

Swap: Making a product swappable, allows customers who want to swap their existing subscription product, for a new product. This is a great way to decrease potential cancellations!

Add One: Enabling "Add One" for your products, means that customers can only order the product on a single order basis. This is a great strategy for limited edition products.

Subscription: This setting allows your customers to add the product to their subscription. This is great to be used if a product is a staple in your inventory.

Now that you know the basics, let's get you set up!

In order to utilize the product carousel and catalog, you must start by Adding Products.

  1. Click the "Add/Remove Products" button

  2. Your Shopify products will display in a list. Select the products you wish to add to the Carousel and Customer Portal Catalog

  3. Click "Ok"

  4. Once you click "Ok", you will see all selected products.

  5. For products you wish for customers to have the ability to add as a subscription product, select "Subscription".

    1. You will need to select the discount applied to the product. You can either inherit the existing discount from the selling plan, create a new product discount percentage, or create a static price for the product.

  6. For products you wish for customers to have the ability to add as a one time product, select "Add one".

    1. Please also select the discount applied to the one-time products.

  7. For products you wish for customers to have the ability to swap for their existing product, select "Swap"

    1. Please select the discount applied to the Swap products.

  8. Any products you wish to display in the carousel, you must select "Add to Carousel". As mentioned, you can select a minimum of three products to enable the carousel displaying, but a maximum of twelve products.

  9. Once you have selected all carousel products, click "Order Carousel Items".

  10. Drag and drop the products in the drop down to where you want them to sit. For example. the product dragged to the top of the list will display first in the carousel.

Discount Granularity: Lastly, your team has the ability to get granular with the discount values set to each of these add on products. Discounts can be set to match the Selling Plan Group (this is the discount on the subscription which the customer checked out with), or set by a specific percentage or dollar value (best practice). These values can not only differ by product, but by action (swap vs. one-time vs. subscription). You are in complete control!

Feeling good? So are we! Submit all of your changes, and get your customers settled in on your new customer portal!

Did this answer your question?