Crafting the Shopify admin

The Shopify admin is where merchants set up their store and manage their business. It’s usable for iOS, Android, and the Web.

Polaris was inspired by the admin, but it takes more than Polaris components and style guidelines to create successful features and flows. Here you’ll find practical ideas to help you create a better admin for merchants.


Start with the problem, not the UI

Take some time to explore the problem space. Consider research, technical limitations, merchant workflows, stress cases, existing patterns, and content. Don’t start by focusing on the details of the user interface (UI).

Talk to merchants. Solve the right problems by seeing the world through their eyes.

If you have researchers on your team, use their expertise. They’ll help you understand the whole problem and uncover biases and assumptions. If not, try some quantitative and qualitative research methods, like surveys and interviews.

Hone in on the real-world tasks merchants need to complete. At the same time, think inclusively (beyond the “average” merchant) and identify potential stress cases that could apply to the task.

Conduct an audit of the current Shopify admin and of similar products. Look for patterns, inconsistencies, and opportunities for improvement.

Create ordered lists and groupings of the content merchants need to see for each task in the flow.

See if plain language terms can be used in place of industry jargon.

Sketch your ideas in low fidelity, using real content.


Represent merchants’ reality

Model the experience around how merchants think about and complete tasks in real life.

Use the same words and concepts as merchants.

Stay focused on the merchant problem. Test ideas with merchants. Don’t get attached to solutions.


Aim for one admin across many devices

Information and functionality should be the same across devices and operating systems.

Avoid launching features on one platform but not others.

All content should be available on every platform, but not every screen needs to have the same content.

Large screens can be content-dense, which can be a challenge on smaller screens
It’s OK to hide some content on small screens as long as merchants can reach it by tapping through for the details.

Consider all devices, including all screen sizes and common operating systems. It can be helpful to start with the platform that has the most constraints.

Remember that embedded Shopify apps are supported on iOS and Android. They render in web views.


Tailor the admin for everyone

Welcome merchants with as wide a range of devices, backgrounds, locations, languages, and abilities as possible.

Adapt the UI to Android, iOS, and the Web so merchants can think about what they want to achieve, not how the interface works.

On iOS, use chevrons in table views and favor text buttons
Android doesn’t use chevrons on list items, and favors icon-only buttons for recognizable actions like “create” and “search”

Support multiple languages and cultural norms (internationalization guidelines coming soon).

Design for touch, keyboard, and mouse input. Design for people with a range of vision, motor, and cognitive abilities. Learn more about accessibility.

Use plain language and write for a grade 7 reading level.


Help merchants make better decisions

The Shopify admin should teach everyone—first time users and experts—how to become better at their work.

Focus on the critical, actionable content for each screen by understanding the specific tasks merchants need to complete. Draw the merchant’s attention to the information they need to make smarter choices about their business.

Do

Only mention order risk when it’s relevant

Don’t

Avoid including elements that don’t convey actionable information

Help merchants avoid errors

The best error message is no error message. When crafting interactions:

Always use explicit save in forms to avoid accidental changes. Explicit saving is where merchants have to save their own changes. Many settings in the admin affect the merchant’s storefront, money, or operations, so don’t auto-save changes, even ones with low risk. Merchants should expect a consistent editing experience.

Do

Show the contextual action bar when changes are made

Don’t

Don’t automatically save changes as they are made

Always warn about destructive actions. Use a confirmation modal to make sure actions that delete data are intentional.

Do

Use a destructive button combined with a confirmation modal when deleting data.

Don’t

Don’t forget to apply this in all cases, especially when deleting in bulk.

Provide smart defaults.

In the context of creating a calendar event, today’s date is a smart default. Other contexts will require different defaults.

Disable inactive controls. If an action or option becomes unavailable during interaction, disable it rather than handling an error when it’s clicked.

While a merchant makes a selection from a list, disable controls that manipulate the contents of the list, such as filtering and sorting.

Accept input in a variety of formats.

Allow merchants to input the date in a variety of formats. Don’t force merchants to enter dates in machine formats, like “09/05/18”.

Provide concise in-context help to avoid validation errors and to explain difficult concepts. This is commonly done using the help text on Polaris’ form components, but this pattern applies broadly and can have other implementations.


Provide immediate UI feedback

Tell merchants what’s happening as soon as they interact with the UI.

Acknowledge interactions immediately. Follow the guidelines for interaction states when crafting new interactive components.

Confirm successful actions using the toast component (coming soon).

Do

Use a toast for confirming successful actions

Don’t

Don’t use banners for confirmation

Use loading components like spinners and skeleton content when requested content can’t be shown right away.

Validate input interactively, such as validating text fields as the merchant types.

Use banners for important and temporary feedback, like errors and warnings.

Do

Use banners for critcal, actionable messages on an order.

Don’t

Don’t use banners to represent a simple status message that will never go away.

Polaris: use it, extend it, improve it

Polaris was inspired by the admin, and the admin should align with Polaris. At the same time, Polaris is a guide, not the destination. It should evolve and be challenged.

When you face a user interface design problem:

  1. Review the guides, components, and patterns that are related to your problem.
  2. If they don’t solve your problem, try designing something fresh. Use the visual and content guidelines to keep it feeling like Polaris.
  3. Compare solutions. Pick the solution that’s best for merchants and build it in your app.
  4. If you’re still unsure, reach out on GitHub.
  5. If your chosen solution fills a clear gap in the system and could be reusable, propose to add it to Polaris.