The v2 Portal is a breakthrough in customer experience that makes it easy for subscribers to make quick changes to their upcoming Scheduled Orders, resume paused Scheduled Orders, and recover from issues that caused their Scheduled Orders to fail processing.

Features of the v2 Portal:

• Securely embedded within the My Account page as a custom element that is rendered without the use of an iFrame
• Mobile-first design that responds to look great on small and large screens
• Display options and custom CSS are changed from within your QPilot Site’s Settings Page making it easy to brand and style for a seamless look with your online store
• It uses a modular component-based design that enables new & existing features to be added and tested before they are displayed to subscribers
• Terms used throughout the v2 Portal can be customized according to your QPilot Site’s Localization Settings (https://docs.qpilot.cloud/docs/edit-template#what-email-localization-fields-are-customizable)
  • For example the term “Scheduled Order” can be displayed as “Autoship” or “Subscribe & Save Order” or “Subscription Order” or “Wellness Club Subscription”… or “Next Occurrence Date” can be displayed as “Next Renewal” to be seamless with your brand & messaging.

📘

Want to set your subscribers up for success?

Checkout our Subscriber Success Guide and get access to user-friendly how-to snippets for customers here!

Table of Contents

• Displaying The Portal In Your Online Store
  • Shopify
  • WooCommerce
• v2 Portal Organization and Structure
  • Summary View
  • Summary Cards
  • Detailed View
  • Components

Displaying The v2 Portal In Your Online Store's My Account Page:

Display the v2 Portal in Shopify

In your Shopify Admin, navigate to Apps > Autoship Cloud >> Settings and select "(default) v2 Portal: Display Scheduled Orders in My Account using custom elements".

Display the v2 Portal in WooCommerce

In your WordPress Admin, navigate to WP-Admin > Autoship Cloud >> Settings >>> Options (tab) and then scroll to "Displaying Scheduled Orders in My Account" to enable the v2 Portal.

👍

Learn more about changing the appearance and styling of the v2 Subscriber Portal here!

The v2 Portal's appearance can be customized to your site by each component in the "Customer Portal" page of your connected QPilot Site's Settings using custom CSS. To customize the portal, checkout our examples here.

v2 Portal Organization & Structure

The v2 Portal is organized into Views, Cards, Components, and Elements.

Views are like "pages" where the first page, the Summary View, gives the subscriber a quick summary of their Scheduled Order(s), and the second page, the Details view, gives the subscriber the ability to make changes to a specific part of their Scheduled Order. For example, from the Summary View, a subscriber can see that their Scheduled Order is paused, and use a single action to resume it, cancel it, or process it immediately.

Cards organize each Scheduled Order in a Summary View. Cards can be collapsed and expanded to accommodate different types of Autoship or Subscription businesses. For example, a single B2B Autoship customer may have 3 or 4 Scheduled Orders and prefer to collapse their Scheduled Orders into a more condensed view, but a D2C Subscriber may only have 1 Scheduled Order and an expanded summary is more helpful.

Components organize the types of changes that can be made to each Scheduled Order and can be thought of as "features". Components show a subscriber information and actions about each feature and are generally accessed by selecting a link or button from any View. For example, when a subscriber selects a link to change their payment method, they are shown the "Update Payment Component" that enables them to make that type of change to their Scheduled Order.

Elements are the specific properties that make up each Component. Elements can be titles, labels, forms, buttons, messages, and more. For example, the Items Component contains elements like "Item Image Thumbnail" and "Add Product Action Button".

Summary View

The Summary View is the first view that a subscriber sees when they log into My Account and view their Scheduled Order. This view displays a condensed view of all Scheduled Orders that belong to a subscriber and, when a subscriber has only a single Scheduled Order, an expanded view of the Summary Card (see below) so that a subscriber can see important details about their Scheduled Order at a glance.

Summary Cards

Helps subscribers see the status of their Scheduled Order, make quick changes to upcoming orders, and easily resolve issues that will recover a failed or paused Scheduled Order.

The Summary Card displays a condensed view of a Scheduled Order and provides customers with quick actions and messages based on the Status of the Scheduled Order.

Important things to know about the Summary Card:

• When a subscriber only has 1 Scheduled Order, the Summary Card is displayed uncollapsed showing messaging and quick actions.
• When a subscriber has 2 or more Scheduled Orders, each Summary Card is displayed collapsed and is ordered by Status and then in descending order starting with the oldest Next Occurrence date and ending with the most recent Next Occurrence Date:
  • Statuses in descending order: Processing, Failed, Paused, Active, Deleted (aka “Canceled”)
• The Status of the Scheduled Order determines the quick actions and messages that are displayed. For example, a Paused Status shows the customer a message about when their order was scheduled to process and displays quick actions to resume, make changes, or cancel their Scheduled Order.

Detailed View

The Detailed View displays all of the information about a single Scheduled Order. It includes messages, links, and action buttons that make it easy for a subscriber to make specific changes to their Scheduled Order.

Each feature of the Detailed View is a “component” which can be displayed as a link or action button or as an entire section.

For example, the “Change Frequency” component is displayed as a link displaying the current frequency (”Every 2 Months”) and, when the link is selected, reveals a Change Frequency form that makes it easy for the subscriber to quickly make their desired change.

Components

• Detailed Summary Component
• Items Component
• Add Product Component
• Payment Method Component
• Update Payment Component
• Shipping & Delivery Component
• Change Shipping Address Component
• Coupons Component
• Update Coupon Component
• Order Totals Summary Component

Detailed Summary Component

This is the first component displayed in the Detailed View because it helps a subscriber understand what is coming, when it's coming, and where it's being delivered at a glance. The Detailed Summary also helps a subscriber understand the status of their Scheduled Order.

In the case of an active Scheduled Order, the Detailed Summary helps a subscriber know what they can do before their Scheduled Order processes next. In the case of a paused or failed Scheduled Order, the Detailed Summary helps a subscriber understand what they can do to resume their Scheduled Order.

Detailed Summary Component Elements:

1. Scheduled Order Status
   1. Displays the current status of the Scheduled Order: Active, Processing, Failed, Paused, Canceled (Deleted)
   2. The term “Scheduled Order” can be customized according to your site’s Localization Settings (https://docs.qpilot.cloud/docs/edit-template#what-email-localization-fields-are-customizable)
2. Status Message
   1. Displays an explanation that helps a subscriber understand the status of their Scheduled Order.
3. Timeline
   1. Displays a visual timeline of the Scheduled Order’s cycle that helps a subscriber understand when their Scheduled Order was last processed and what will happen next:
      1. Last Order Date displays the last successful processing cycle
      2. Next Occurrence Date displays when the Scheduled Order will be processed next
      3. (Coming Soon!) Next Delivery Date displays when the Scheduled Order is expected to be delivered.
4. Change By Date
   1. Displays the date that changes can be made to the Scheduled Order so that a subscriber knows how much time there is to make changes before their Scheduled Order will start processing.
5. Summary Action Buttons
   1. Displays actions so that a subscriber can make quick changes to their Scheduled Order based on the status of the Scheduled Order including a primary action that is highlighted as the most prominent action button. For example, the “Process Now” action button is highlighted for an Active Status, and the “Resume” button for a Paused Status.
6. Summary Action Links
   1. Displays important data about the Scheduled Order that also links to a component that can be used by the subscriber to make changes to their Scheduled Order including:
      1. Frequency: Displays the recurring frequency and links to the Change Frequency component
      2. Payment Method: Displays the payment method that will be charged and links to the Update Payment component
      3. Shipping Address: Displays the delivery address and links to the Change Shipping component

Items Component

The Items Component helps a subscriber see which item(s) are included with their Scheduled Order and enables them to quickly change item quantity, remove an item, or add a product as a recurring item or one-time item to their Scheduled Order.

Items Component Elements:

1. Total Item Quantity Label
   1. Displays the total quantity of all item(s) that are currently included with their Scheduled Order
2. Add Product Action Link
   1. Displays an “Add Product” link to help a subscriber find another product to add to to their Scheduled Order items.
3. Item Image Thumbnail
   1. Displays a product image
4. Item Quantity Badge
   1. Displays the total quantity for the item that will be purchased when the Scheduled Order processes
5. Item Title
   1. Display the product title of the item
6. Item Quantity Action Link
   1. Displays the total quantity for the item that will be purchased when the Scheduled Order processes as a link that a subscriber can select to quickly update the item quantity value.
7. Item Value
   1. Displays the following values based on the value of an Item’s Price and Sale Price
      1. Item Price: Displays the total Price for the Item multiplied by its Quantity
         1. The Item Price is styled with a lighter color and strikethrough when the item includes a value for Sale Price so a subscriber knows that they are receiving a discount
      2. Item Sale Price: Displays the total Sale Price for the Item multiplied by its Quantity
8. Item Discount Value Bar
   1. Displays the total value of the Item Price Discount as a Percentage and as a Total Value when an Item includes a Sale Price, so that a subscriber understands the total value of the item price discount they are receiving with their Scheduled Order.
      1. The term “Autoship & Save” can be customized according to your site’s Localization Settings (https://docs.qpilot.cloud/docs/edit-template#what-email-localization-fields-are-customizable)
9. Item Max Cycle Bar
   1. Displays the total number of processing cycles that an Item will be included with the Scheduled Order when an Item includes a value for Max Cycles.
      1. The most common value for Max Cycles is “1” which means that the item will only be included on the Scheduled Order on its next processing cycle. After the processing cycle is completed successfully, the item will no longer be included on the Scheduled Order.
      2. Learn more about Min/Max Cycles for Scheduled Order Items (https://docs.qpilot.cloud/docs/scheduled-order-view-fields#scheduled-order-items)
10. Add Product Action Button
    1. Displays an “Add Product” button to help a subscriber find another product to add to to their Scheduled Order items.

Add Product Component

The Add Product Component helps a subscriber find a product to add to their Scheduled Order items is displayed whenever a subscriber selects an “Add Product” action button or link.

Features of the Add Product Component:

1. Search Products
   1. Displays a search box that a subscriber can use to quickly find a specific product
2. Product List
   1. Displays a list of all products that are available to add as an item to a Scheduled Order and includes helpful details like Stock Status.
3. Product Details Page
   1. Displays details about a product and actions that a subscriber can use to add the product as an item to their Scheduled Order or make changes to an item that has already been added to their Scheduled Order.
      1. Product Title
      2. Product Image
      3. Product Price
      4. Product Sale Price
      5. Quantity
         1. The total quantity of the product that will be added to the Scheduled Order
         2. When the product is already included as an item on the Scheduled Order, the Quantity can be updated by changing the quantity value and selecting “Update”
      6. Add Item One-Time Action Button
         1. Adds the product to the Scheduled Order as a “one-time” item
      7. Add Item Action Button
         1. Add the product as an item to the Scheduled Order
      8. Change to One-Time Action Button
         1. When the product is already included as an item on the Scheduled Order, a subscriber can use this action to change the item from a recurring item to a one-time item.
      9. Change to Recurring Action Button
         1. When the product is already included as an item on the Scheduled Order, a subscriber can use this action to change the item from a one-time item to a recurring item.
      10. Update Item Action Button
          1. When the product is already included as an item on the Scheduled Order, a subscriber can make changes and update the item from the Product Details Page

Payment Method Component

The Payment Method Component is displayed as a section on the Details View and helps a subscriber view which payment method will be charged when their Scheduled Order processes and displays action links for the Update Payment Component that is used by a subscriber to change or update their payment method.

Payment Method Component Elements:

1. Update Payment Action Link
2. Payment Method Bar
   1. Displays a description for the payment method that will be charged when the Scheduled Order processes, and an Change Payment Action Link that a subscriber can select to navigate to the Update Payment Component.

Update Payment Component

The Update Payment Component helps a subscriber to change the payment method that will be charged when their Scheduled Order processes, and also includes an action button to add a new payment method.

Update Payment Component Elements:

1. Payment Methods List
   1. Displays the saved payment method(s) that a subscriber can use to pay for their Scheduled Order
2. Add New Payment Method Action Button
   1. Used by a subscriber to add a new saved payment method

Shipping & Delivery Component

The Shipping & Delivery Component is displayed as a section on the Details View and helps a subscriber to know where their order will be delivered after their Scheduled Order is processed and displays action links to the Change Shipping Address Component that helps subscribers change their shipping address.

Shipping & Delivery Component Elements:

1. Change Shipping Action Link
   1. Opens the Change Shipping Address Component
2. Delivery Location
   1. Displays the details of the location where the Scheduled Order will be delivered to

Change Shipping Address Component

The Change Shipping Address Component helps a subscriber to change their Shipping Address details.

Change Shipping Address Component Elements:

1. Shipping Address Form Fields (* is a required form field)
   1. Country*
   2. Name*
   3. Phone Number
   4. Street Address 1*
   5. Street Address 2
   6. City*
   7. State*
   8. Postal (ZIP) Code*
2. Update Shipping Address Action Button

Coupons Component

The Coupons Component is displayed as a section on the Details View and helps a subscriber to know if any discounts are applied by coupons to their Scheduled Order. The component also displays action links to open the Add Coupon Component and to remove any coupon(s) already applied to their Scheduled Order.

Coupons Component Elements:

1. Add Coupon Action Link
   1. Opens the Add Coupon Component
2. Coupon Bar
   1. Displays a description for the coupon(s) that apply a discount to the Scheduled Order, and a Remove Coupon Action Link that a subscriber can select to remove a coupon.

Update Coupon Component

The Update Coupon Component helps a subscriber to add a coupon to their Scheduled Order and to remove coupons as well. When a subscriber enters a valid coupon code and the coupon is successfully applied, the coupon will display in the Update Coupon Component and on the Details View in the Order Totals Summary Component. When a subscriber enters a valid coupon code but the coupon cannot be applied, a notice is displayed that explains why the coupon could not be applied.

Update Coupon Component Elements:

1. Coupons List
   1. Displays all valid coupons that are currently applying a discount to Scheduled Order
2. Coupon Bar
   1. Displays a description for the coupon(s) that apply a discount to the Scheduled Order, and a Remove Coupon Action Link that a subscriber can select to remove a coupon.
3. Add Coupon Code Form
   1. Displays an input that a subscriber uses to enter their coupon code and a submit button that the subscriber selects after entering their coupon code.

Order Totals Summary Component

The Order Totals Summary Component is displayed as a section on the Details View and displays a detailed summary of all subtotals, discounts, and the total amount that will be charged when their Scheduled Order processes. The component also displays quick action links that a subscriber can use to make quick changes to coupons, their shipping address, and their payment method.

Order Totals Summary Component Elements:

1. Order Item Subtotal
   1. Displays the subtotal of the non-discounted price of all items multiplied by their item quantity value(s).
   2. Helps a subscriber understand the total cost of item(s) before any item price discounts are applied.
2. Total Scheduled Order Discount Savings
   1. Displays the total value of all Item Price Discounts multiplied by their item quantity value(s).
   2. Helps a subscriber understand the total value of item price discount(s) are applied.
3. Order Subtotal
   1. Displays the subtotal of the price of all items after all item price discounts are applied and before any other coupon discounts, shipping costs, estimated taxes, or fees are applied.
4. Coupon
   1. Displays the total value of discounts applied by coupon(s) when one or more valid coupons are applied to the Scheduled Order, and displays action links for each coupon that open the Update Coupon Component.
5. Order Total
   1. Displays the total value for the Scheduled Order after all item price discounts and coupons are applied, and before any shipping costs, estimated taxes, or fees are applied.
6. Estimated Tax
   1. Displays the total estimated amount of tax that will apply to the Scheduled Order when it processes.
7. Shipping
   1. Displays the Shipping Method and the total cost for the Shipping Method (the “Shipping Rate”) that was calculated for the Scheduled Order, and displays the postal code of the Shipping Address as an action link that opens the Change Shipping Address Component.
8. Total
   1. Displays the total amount that will be charged when the Scheduled Order Process, and displays the Payment Method Description as an action link that opens the Update Payment Component.
      1. The total amount is the cost after all item prices discounts, coupon discounts, shipping costs, estimated taxes, and fees are applied.