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.

Tailor the admin for everyone

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

Design Shopify for everyone, not just the store owner. Most people who use Shopify aren’t business owners, but employees of a business.

Support multiple languages and cultural norms. Learn more about internationalization

Design for touch, keyboard, and mouse input to include 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.

Aim for one admin across many devices

Information and functionality should be the same across devices and operating systems. Adapt the UI to Android, iOS, and the Web so merchants can think about what they want to achieve, not how the interface works.

Avoid launching features on one platform but not others.

Design the UI for different platforms according to the platform specifications.

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”

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, and they render in web views.

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 merchants’ attention to the information they need to make smart choices about their business.


Only mention order risk when it’s relevant


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 an explicit save action in forms to avoid accidental changes. Explicit saving is where merchants have to save their own changes. Many settings in the admin affect merchants’ storefronts, money, or operations, so don’t auto-save changes, even ones with low risk. Merchants should expect a consistent editing experience.


Show the contextual action bar when changes are made


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.


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


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.

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

While merchants makes a selection from a list, deactivate 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.


Use a toast for confirming successful actions


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 merchants type.

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


Use banners for critical, actionable messages on an order.


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 design 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.