At Shopify, we empower commerce at a global scale. We build products, tools, and services for people to start, manage, and scale their businesses. We manage enormous complexity for commerce giants, and give new entrepreneurs the best chance to succeed.
Making commerce better for everyone means caring deeply about making quality products.
Make commerce better for everyone by building interfaces that work everywhere. These guidelines will help you design, write, and build products that can be used in every part of the world.
Everything we create at Shopify has an underlying foundation of information architecture.
Currencies are formatted differently in different countries and languages.
These are the principles that shape how we design all the experiences across the Shopify admin.
Our color system builds on the recognition of the Shopify brand colors to make the admin interface more usable.
Shopify admin provides a constrained, purposeful set of typographic styles. These styles map to functional roles so you know when to use what.
The Shopify admin uses a precise illustration style to help merchants quickly and clearly understand how things work across every experience.
We use sound to communicate information and to enhance how merchants experience the Shopify admin. Sound patterns make interactions easier and more predictable.
Icons in the Shopify admin act as visual aids to help merchants complete tasks. They’re simple, informative, and build on the visual language of the design system.
Interaction states communicate the status of an element in the interface, establish confidence once an action is taken, and suggest the ability (or inability) to interact with the element.
Consistent spacing creates visual balance that makes the user interface (UI) easier for merchants to scan. Apply consistent spacing to improve the quality of the UI.
Visualizations surface patterns in data, and provide immediate answers to a single, specific question.
Voice and tone
Learn how to apply Shopify’s voice and choose the right tone, no matter what product, feature, or app you’re building.
Accessible and inclusive language
Our mission is to make commerce better for everyone. Building products for everyone means creating inclusive content.
Grammar and mechanics
This guide is to help designers, developers, recruiters, UX-ers, product managers, support advisors, or anyone who writes public-facing text for Shopify.
The names we give our products and features teach merchants how to use Shopify and how to find the things they need to run their business.
Merchants use Shopify to get things done. Content should be written and structured to help them understand and take the most important actions.
Thoughtful, consistent interface content is a core element of a well-designed user experience.
After you build an app or other integration, writing help documentation will show merchants how to use it.
Shopify creates content for different audiences. One of those audiences is merchants’ customers. A customer is a person or organization who interacts with a Shopify merchant or a merchant’s sale channel.
It’s important to use the same words, spelling, and capitalization consistently, otherwise things start looking messy and confusing for merchants.
Shopify aims to provide an inclusive experience. Alternative text (alt text) helps people with low or loss of vision use our products.
Navigating the Shopify admin should be fast, meaningful, and focused, but unintentional loading can get in the way and break a merchant's flow. To deliver a continuous experience, we need to consider loading states when planning and prototyping.
Polaris provides many layout patterns that help you create efficient and familiar interfaces.
Home cards make actionable recommendations based on data from the merchant’s store, or give merchants feedback about their store’s performance.
Error messages can be scary. Make errors visible to merchants, easy to understand, and helpful.
Text fields are a combination of the field label (the title) and the input area. Inputs can be typed text, URLs, date pickers, and more.
Help content is educational text that describes interactive elements or offers information about concepts in the UI.
The number of locations a merchant has can range dramatically, and the location experience should adapt to that number. Using progressive disclosure, we can introduce features as merchants need them.