To be an approved sales channel, your app must use the components library from the Shopify Polaris design system. While the Embedded App SDK allows you to embed your sales channel directly inside of the Shopify admin, using the components library will enable your sales channel to also look and feel consistent with other sales channels and the rest of Shopify.
The components library includes styled modules and components for merchant onboarding and account configuration within your sales channel, such as notice banners, setting controls, form inputs and modals.
In this section we outline best practices for these design components to promote a consistent experience across Shopify admin for our merchants, making it easy for Shopify merchants to get started when using your sales channel.
Build a channel merchants will love
Your sales channel has the opportunity to deliver an experience merchants will love. This experience can be broken up into three stages:
Onboarding → Use → Success
At each one of these stages, merchants will have different goals and considerations while engaging with your sales channel. The more clearly and succinctly these answers are communicated in your sales channel (through UI, merchant onboarding, and documentation), the more trust is built—and the more merchants will thrive on your platform.
- What is this channel?
- Why should I install it?
- How much will it cost me? Are there any monthly or transaction fees?
- How do I know if this channel is a good match for my business?
- I want my store set up with this sales channel. What steps are necessary now, and what can I do later?
- How do I sign up?
- How do I log in?
- How do I get my products on this sales channel?
- How long will it take for my products to show up on this channel?
- How do I know that my products are reaching an audience?
- When customers buy my products from this sales channel, how will that money reach me?
- If the transaction is fulfilled through the sales channel, how and when will I get paid?
- How do I remove products from this sales channel?
- How do I get help/support for this sales channel?
- Can I see metrics of how this channel is performing?
- How do I drive more traffic to my products on this sales channel?
- How can I cater my products to the audience on this platform?
Below are some best practices to answer these merchant questions through the design and experience of your sales channel.
Onboarding: inform and guide
Here are some concrete ways to give merchants the insight and assurance they need before trying your channel.
If there is a review time associated with using your channel, set the merchant’s expectations correctly.
Be clear about any commission rates charged on sales, or for use of your platform. We provide two commission rate information patterns to make clarifying your rates easy and consistent.
Use: simplify and clarify
Offer the right information, in the right amount, at the right time. As a merchant decides to install, set up, and continue to use your channel, there are opportunities to offer in-context guidance and information. These should be teaching moments to improve their chances of success.
Break up long forms. This prevents ‘form fatigue’ for merchants, and increases the likelihood that a merchant will complete your form rather than leaving without completing it.
Guide the merchant through the tricky bits. Prevent errors by using smart defaults, placeholder content, and helper text using simple language. When a merchant makes an error, help them deal with their confusion calmly.
|Don’t use exclamation points or alarming words like “alert” or "immediately."||Always offer a solution or next step. Be straightforward. Calmly explain what’s going on and what the implications are.|
|Don’t use jargon when plain language will do.||Offer definitions in the same context that a tricky term appears. Shopify aims for a 7th-grade reading level in all interface copy. Use a tool like Hemingway to grade your content.|
|Don’t make users guess your form’s password requirements or other rejection criteria, e.g. your password must use letters and at least two numbers. Don’t leave fields obscure and then correct or block your user with an error message after the fact.||Do use regex and other ways of standardizing user inputs rather than blocking the merchant if they input a field wrong (e.g. use text fields that format postal codes automatically, and use dropdowns with specific answers) Do state exact instructions and requirements with help labels, if a field requires a specific type of input (e.g. Must be a zipcode based in the continental US.) You can use text labels or inline help patterns to give more context to your fields before a merchant hits the submit button.|
|Don’t label forms with technical jargon or platform-specific terms, without explaining them||Do set default values and placeholders for all input fields. These teach merchants by example. Help labels, which provide insight about how the field will be used, should always be outside the field. This is important for accessibility, so your form can be understood by screen readers. You can use .next-input__help-text to format these labels (see forms for details). For form fields that require a choice, like dropdowns or radio buttons, set smart defaults which can apply to the broadest and most common case for the merchant|
|Don’t fail loudly and/or succeed silently. Merchants are more likely to give up if they are not sure how to address an error, or if they are not sure their task was completed successfully.||Errors and other failed states should be clear, calm, and actionable. Error states for forms and product publishing, as well as alert banners can help you educate merchants about why something isn’t working. Confirm that a merchant has achieved their task with success messages in context.|
|Don’t require merchants to use an external site or app to review their sales metrics, customer data, etc||Allow merchants to view basic sales and order metrics from within your channel, using table module.|