Shopify has introduced Shopify Polaris. A new design system that helps Shopify Designers and partners to create a consistent user experience for merchants. The system helps use best practices from Shopify’s own design team when developing new interfaces and apps.

What Is Shopify Polaris?

The Shopify Polaris design system is a set of comprehensive guidelines and principles that designers can use while building apps and channels for Shopify. It offers a range of resources and building elements like patterns, and is available to all Shopify partners. Instead of focusing on creating already-existing elements and mimicking design patterns, Shopify Designers can now focus on what really matters: providing solutions that blend in with Shopify seamlessly. This gives better user experience and keeps everything uniform and consistent.

The Polaris system holds all the building blocks needed to create apps that will feel familiar to merchants, and won’t require a learning curve. Plus, it allows partners to download a style guide, a library of components and patterns, and a UI kit they can use.

We’ve recently been using it to do some rapid prototyping for app development. And it’s saved us a tonne of time to work within a fixed design framework – even though we were sceptical at first about the benefits.

shopify polaris

What Is Shopify Polaris Used For?

Shopify Polaris is used to build all the elements that make up a great user experience. From the app and channel content to design and layout patterns. The Polaris design system includes the following:

Guides

Guidelines and best practices on creating elements for Shopify admin and apps, incorporating accessibility and internationalisation options. The aim is to provide merchants with a fluid experience when switching between core Shopify and app functions. Because for usability they should look and feel the same.

Content

Guidelines and resources on using content to improve user experience. From writing product descriptions and using the right tone and voice, all the way to naming products and adding alternative text, this section covers best practices on utilising language as a powerful UX element. Here, designers can learn all about preferred date formats, the proper vocabulary for actions, and developing a strategic plan for language.

Design 

Resources and guidelines on using colours, typography and illustrations, as well as best practices on sounds and icons. This section also covers the use of spacing, data visualisation, and interaction states.

Components

Includes a collection of readily available interface elements, including React and CSS components, that Shopify Designers can use to provide a consistent experience across channels and apps. 

Patterns

Best practices for arranging the page layout: from screen structure to page components, standard layouts and navigation. This section also covers best practices for error messages including; types of messages, what colours to use, and the best way to display various error message types.

Getting Started With Shopify Polaris

Shopify Experts who want to design with Shopify Polaris will need to download the Sketch UI kit and React components first. These can be accessed from the main Polaris landing page.

To get them:

Scroll to “Resources” at the bottom of the page > click “View more resources” to get access to the downloads section.

There, you can also find links to helpful documentation, developer forums, and blogs. Plus, links to third-party tools that can further enhance what you are building.

Disclosure: where we link to external websites we may use affiliate links if available. If you click through to the website it can sometimes result in a payment or benefit to the site. You will receive the same product or service - we simply refer you to them. We take no responsibility for the content we link to and the content of this article is our opinion.

About Joe Dempsey

Joe Dempsey is Head of Design with Liquify Web Design Company London and a leading Shopify Developer. He specialises in Shopify theme design & development.

Custom Shopify Development for a Fashion Store

Custom Shopify Development for a Fashion Store

Shopify Fashion Design & Development