How to build your Shopify app with Polaris

I’ve been spending an increased amount of time with embedded Shopify applications. This inspired my last post, and it inspires today’s, too. When I began my journey becoming a Shopify developer, I was incredibly impressed by Shopify’s dedication to providing excellent resources to devs, and today we’ll be covering one of those very resources: Shopify Polaris.

Polaris is Shopify's open-source design system, a collection of guidelines and resources aimed at helping you build consistently beautiful and user-friendly Shopify apps. With the release of version 12, it's better than ever, offering new features and improvements to make your development experience smoother and more efficient.

Why Polaris?

You might wonder why Shopify would go through the trouble of creating and maintaining Polaris for developers. The answer is simple: consistency, efficiency, and a better user experience. By providing a unified design language and common components, Shopify ensures that all apps and interfaces look and feel cohesive. This not only benefits end-users but also makes your job as a developer much easier.

Let’s take a look at some of the highlights of what Polaris provides to us as Shopify designers and developers:

Components

Ah, components, the heart of any modern web application. Shopify offers a wide array of pre-built UI elements that you can drop directly into your applications. Polaris covers everything from layout components to help you standardize the architecture of your pages, to common form inputs and action buttons which handle a majority of common user interactions. These components are designed to be flexible and customizable, allowing you to tailor them to your specific needs while maintaining a consistent look and feel.

Accessibility & Internationalization Coverage

We want to make sure our applications work for everyone, and Polaris has us covered here. The included components cover features like built-in ARIA attributes, making them easy to use with keyboards and screen readers. Plus, there are handy guidelines to help you nail the accessibility standards, covering everything from color contrast to focus management. As for internationalization, Shopify continues to provide us with support for easily handling multiple languages and currencies just as they do in their storefront support.

Icons & Tokens

Last but not least, we can leverage Polaris’ icons and token system to give our app that distinct Shopify vibe. The token system is a series of variables that Shopify itself uses to standardize things such as color, typography, and spacing. Combining the usage of these tokens and the provided icon library will provide that last layer of polish to an app, making it feel like it was built by Shopify itself. This seamless integration means your app will blend perfectly with the Shopify platform, offering users a smooth, cohesive experience. Using these tools not only saves you time but also ensures your app looks professional and on-brand, just like Shopify intended.

Bonus DX Tooing

Shopify has included some bonus developer tools to make your experience implementing Polaris even better:

Figma Plugin

For the designer, the Polaris Figma plugin is a must-have. This plugin allows you to access Polaris components directly within Figma, making it easier than ever to design and prototype your Shopify apps. You’ll ensure that your design aligns perfectly with the Polaris guidelines, speeding up the handoff process to developers.

VS Code Extension

For the developer, Shopify offers a Polaris for VS Code extension. This handy tool provides code snippets, linting, and other features that make it easier to implement Polaris components and follow best practices directly within your favorite code editor.

Polaris Sandbox

While still in alpha, the Polaris sandbox is a handy and fun playground where you can experiment with components, tokens, and design principles without affecting your live projects. It's a great way to try out new ideas, test changes, and see how different elements work together before integrating them into your app. In fact, I just took a moment to whip a little something up for you all…

Final Word

We touched on a number of things regarding Polaris, but there’s plenty more. Their documentation provides further tips and guidance for when working with the design system, as well as mentions of future features - I’m personally looking forward to their potential support for View Transitions soon! With its robust set of components, tokens, and DX tooling, Polaris makes building your Shopify App interface smoother and more efficient than ever before. I hope you enjoyed this post, happy coding!

‍