What is The Shopify Polaris Design System? The Complete Guide

What is Shopify Polaris, and why does it matter to you?

If you’ve ever interacted with the Shopify admin interface, or designed an app or experience for Shopify, then you’ve probably interacted with Shopify Polaris already.

Polaris is basically the design system for the Shopify admin. It’s the shared language that’s used both internally at Shopify, and externally by app developers and designers to create experiences for the Shopify platform.

In fact, the Shopify app developers on our team here at Ecommerce Platforms interact with Shopify Polaris on a regular basis.

Still confused? Here’s your behind-the-scenes guide to Polaris.

Quick Overview: Everything You Need to Know about Polaris

What is Shopify Polaris? A Definition

Shopify defines Polaris as the “design system” of the Shopify admin, made up of design guidance, development opinions, code libraries, and API documentation.

Essentially, it’s a comprehensive collection of tools and resources used by Shopify’s own design team, as well as app developers and designers who create tools for the Shopify app store.

Within the system (accessible to all Shopify partners), you’ll find things like icons, components, and guidelines you can use to streamline the process of developing experiences for Shopify admins.

Instead of having to create already-existing elements from scratch, Shopify partners can leverage Polaris to access pre-built solutions.

This means they can focus on providing solutions that blend with the “Shopify experience” seamlessly.

Our own developer experts have used this system to conduct some rapid prototyping initiatives for app development, and they say it’s saved them a lot of time and effort.

What’s Included in Shopify Polaris?

If you visit the Shopify Polaris official page, you’ll see a range of tabs on the left-hand side with sections to help guide you through the available assets within the system, and how to use them.

The “Getting Started” section gives you a list of recommended resources you can use to start working with Polaris. Let’s go over some of the key components of the system.

Design Guidance and Content Support

If you’re just getting started with Polaris, I’d definitely recommend visiting the “Getting Started” section first. This is where you’ll find a list of recommended resources you can take advantage of before you dive into Shopify app development. You can access:

• Design Resources: Figma community resources for Polaris components, styles, and icons.
• Development resources: React components, design tokens and VS code extension tools.
• Tutorials: Step-by-step tutorials on how to build a Shopify app.
• Knowledge expansion guides: Tools to expand your knowledge of experience values, product content, design guidelines, and so on.

Once you’ve explored the “Getting Started” page, you can move down the menu on the left-hand side of the Polaris website to access various forms of “design guidance” content.

The design guidance section is split into three sections:

Foundations

Foundational resources to help you with things like improving the accessibility of your apps (based on UX standards), managing information architecture, and formatting localized currency. There are also guides to “internationalization” for apps, and Shopify experience values.

Design

The Design section is perhaps the most comprehensive in Shopify Polari’s collection of design guidance resources.

Here, you’ll find step-by-step guides with screenshots on everything from pro design language management to using color, depth, icons, layout strategies, motion, and typography in your design strategies.

Content

The Content section guides app designers on how to create content that enhances user experiences.

There are instructional articles for everything from creating error messages, to improving grammar, leveraging actionable language, creating help documentation and more. Shopify even gives you tips on how to master voice and tone in your messaging strategies.

Patterns, Components, Tokens, and Icons

The Patterns, Components, Tokens, and Icons in the Shopify Polaris system are perhaps the most valuable resources for most app developers. They essentially give you resources you can adopt and use in your own Shopify apps, without having to code everything from scratch.

Let’s take a quick look at each of these sections:

Patterns

The “Patterns” section gives you a guide to all the best practices you should follow when arranging the page layout of a Shopify app or admin experience.

You’ll find insights into everything from screen structure, to page components, standard layouts and navigation. Plus, this section includes tips for enabling common actions in your apps.

Components

By far the biggest collection of resources in the Shopify Polaris system, the “Components” section is packed full of dozens of reusable building blocks you can access when creating Shopify admin experiences. These components are split into different sections such as:

• Actions: Account connection, buttons, button groups, and page actions.
• Layout and structure: Bleed, box stack, callout cards, dividers, grids, and more.
• Selection and input: Autocomplete, date pickers, inline errors, forms, filters, and more.
• Images and icons: Avatars, icons, keyboard keys, thumbnails, and video thumbnails.
• Feedback indicators: Badges, banners, exception lists, spinners, and more.
• Lists and tables: Data tables, action lists, option lists and more.
• Navigation: Tabs, footer help, links, pagination and more.

Plus, there are range of other components for everything from creating popover overlays and tooltips, to designing banners and different utilities for apps.

Tokens

The Tokens on Shopify Polaris are the variables that represent design decisions, such as typography, spacing, color, and spacing in a reusable and consistent way. There’s guidance within the system on how to use tokens for everything from breakpoints, to borders.

Icons

The Icons section is basically filled with a list of examples of common icons used to help convey information to users of Shopify apps. Developers can basically copy and paste these icons into their own apps and app copy, to help improve the user experience and make the admin feel more familiar.

The Other Elements of Shopify Polaris

Outside of the design guidance and components mentioned above, the Polaris website is also home to various other resources. For instance, there’s a page where you can find insights on how you can contribute to Polaris, with bug fixes, icons, kits, patterns, and documentation.

You’ll also find a handy “Tools” section, featuring extensions plugins and other resources you can use when building with Polaris, such as:

• Polaris for VS Code
• The Polaris Migrator
• Sandbox
• Stylelint Polaris

Who Should Use Shopify Polaris?

Now we’ve established what Shopify Polaris is, and what it offers, let’s establish who should be using it (and why). Polaris is designed for front-end developers and designers, who want to build familiar, and user-friendly admin interfaces.

It’s likely to be particularly useful for developers who want to build their solutions using React, as the Polaris system is built on React, and provides easy integration with React solutions. However, anyone who wants to create consistent, visually-pleasing, and consistent experiences for Shopify can definitely benefit from this design system.

How to Get Started with Shopify Polaris

Shopify Experts and Partners looking to leverage Polaris for their design process will need to download the React components and Sketch UI kits first. You can find links to these tools on the “Getting Started” page alongside some other helpful resources.

Once you’ve downloaded the right tools, you’ll need to:

Set up your development environment

To start building with Polaris you should have a basic understanding of Node.JS and React, and you’ll also need a Shopify partner account. You’ll also need a development environment. The Shopify Polaris “Build a Shopify app” tutorial will guide you through the process of setting up your development so you can work with your app via Shopify CLI.

Create your Shopify App

Once you have your development environment set up, you can use the Shopify App CLI to create your new app. You’ll then be able to install the component library from the Polaris React ecosystem, and add everything you need to your code.

Using the reusable components offered by Polaris, you should be able to rapidly build different components of your app’s interface. Plus, you can consistently access the guidelines provided by Polaris to ensure you’re adhering to Shopify admin design best practices.

Connect, Test and Deploy your App

Once your app is complete, you’ll be able to connect it to the Shopify platform via the “App Bridge”. You can test your app locally, to ensure that everything works effectively, then potentially deploy it to the Shopify app store, pending approval from Shopify.

So, What is Shopify Polaris?

Ultimately, Shopify Polaris is a design system intended to help developers create high-quality, consistent, and user-friendly interfaces for Shopify apps. It helps to improve Shopify admin experiences, and helps developers reduce the time and effort they spend on building apps.

If you’re looking for a comprehensive selection of guidelines, resources, and components you can use to enhance your development journey as a Shopify partner, this could be the solution for you.

Frequently Asked Questions (FAQs)

Is Shopify Polaris Open-Source?

Technically, the Shopify/Polaris GitHub Repo is an open-source solution made up of VS Code extensions, NPM packages, and the official Shopify Polaris website. You can also contribute to the development of the Polaris ecosystem as a Shopify partner.

Can I use Polaris outside of Shopify?

Polaris is specifically designed to help developers create consistent admin experiences for Shopify apps. It’s used both internally by the Shopify team, and by external Shopify app developers and designers, but it’s generally not used for other platforms.

Is Shopify Polaris free to use?

While Shopify Polaris is free to use, you will need to access a Shopify Partner account to start building apps with Polaris. You may also need to purchase other resources to help with your development strategy.