Foundations
Foundations
Experience values
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.
Accessibility
Making commerce better for everyone means caring deeply about making quality products.
Internationalization
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.
Information architecture
Everything we create at Shopify has an underlying foundation of information architecture.
Currency
Currencies are formatted differently in different countries and languages.
Design
Design
These are the principles that shape how we design all the experiences across the Shopify admin.
Colors
Our color system builds on the recognition of the Shopify brand colors to make the admin interface more usable.
Typography
Shopify admin provides a constrained, purposeful set of typographic styles. These styles map to functional roles so you know when to use what.
Illustrations
The Shopify admin uses a precise illustration style to help merchants quickly and clearly understand how things work across every experience.
Sounds
We use sound to communicate information and to enhance how merchants experience the Shopify admin. Sound patterns make interactions easier and more predictable.
Icons
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
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.
Spacing
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.
Data visualizations
Visualizations surface patterns in data, and provide immediate answers to a single, specific question.
Content
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.
Naming
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.
Actionable language
Merchants use Shopify to get things done. Content should be written and structured to help them understand and take the most important actions.
Product content
Thoughtful, consistent interface content is a core element of a well-designed user experience.
Help documentation
After you build an app or other integration, writing help documentation will show merchants how to use it.
Merchant-to-customer content
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.
Vocabulary
It’s important to use the same words, spelling, and capitalization consistently, otherwise things start looking messy and confusing for merchants.
Alternative text
Shopify aims to provide an inclusive experience. Alternative text (alt text) helps people with low or loss of vision use our products.
Patterns
Loading
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.
Page layouts
Polaris provides many layout patterns that help you create efficient and familiar interfaces.
Home cards
Home cards make actionable recommendations based on data from the merchant’s store, or give merchants feedback about their store’s performance.
Error messages
Error messages can be scary. Make errors visible to merchants, easy to understand, and helpful.
Text fields
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
​Help content is educational text that describes interactive elements or offers information about concepts in the UI.
Locations
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.
