Build an account page
After merchants have completed onboarding and account connection, they're redirected to your sales channel's account page.
In this tutorial, you'll learn how to use Polaris components to build a sales channel app's account page. The page will include sections for account review processes, sales commissions, terms and conditions, and help footers.
RequirementsAnchor link to section titled "Requirements"
Step 1: Build an account pageAnchor link to section titled "Step 1: Build an account page"
Build your account page using the Layout component. Pages built with the Layout component include the following:
Contextual area: The contextual area gives merchants the information that they need to do in your sales channel app. The contextual area is located on the left of the functional area on desktop and consists of the following:
- Section heading: Specifies the information, feature, or functionality that merchants are dealing with in this section. Be concise, and use your own platform’s terminology where possible, such as “Inventory management”. For more information, refer to the Polaris best practices.
- Description: A one-sentence description of why the information or functionality is important, and how it benefits the merchant. You can also include a text link that points to documentation or more information on your platform’s site, such as “Learn more about [feature name]”.
Functional area: The functional area is the card that provides concepts and tasks to make Shopify easier for merchants to scan, read, and get things done. The functional area is located on the right on desktop.
Your account page might look like the following, with the contextual area on the left and the functional area on the right:
Step 2: Add an account review processAnchor link to section titled "Step 2: Add an account review process"
If your sales channel has a review process for onboarding merchants, then you can communicate account status information to merchants using the Banner component.
The following are use cases for the Banner component:
- To indicate that your sales channel has a review process, use an informational banner.
- To indicate that the merchant has successfully passed the review process, use a success banner.
- To indicate that the merchant has failed the review process, use a warning banner.
- Your sales channel app's account section needs to provide merchants with an option for disconnecting from the sales channel app. Disconnecting removes products and cannot be undone. To communicate this to merchants, use a critical banner.
The following is an example of an account review message.
Step 3: Add a commission sectionAnchor link to section titled "Step 3: Add a commission section"
The commission section needs to provide the commission rate and information on how and when merchants are charged commission fees. Use the Card and Annotated layout components to create the commission section.
Step 4: Add a terms and conditions sectionAnchor link to section titled "Step 4: Add a terms and conditions section"
Your sales channel app needs to include a terms and conditions section. Links in the section need to open in a new window.
The terms and conditions should be hosted outside of your sales channel app, but linked to from the terms and conditions section. The section needs to be visible after account connection, and located at the bottom of the account page.
Step 5: Add a help footerAnchor link to section titled "Step 5: Add a help footer"
A help footer needs to appear on every page of your sales channel app. It's a convenient way to provide your user with links to documentation or support.