3 Things That You Should Know About Shopify Polaris

1. Docs

Polaris divides its documentation into five sections: “Foundations”, “Content”, “Design”, “Components'' and “Experience.” That gives you an idea that not everything is about its components — there is also good content to help you find the best way to use the components to create a great UI/UX.

The “Foundation” section introduces you to the Shopify world and points you in the right direction about the correct use of Polaris.

The “Content” section provides you with a complete set of guidelines about the “Voice and Tone”, “Naming”, and “Product Content” features, among others, that Shopify uses on its products and tools. All the experience documented here is very useful.

Shopify Experience Values

Shopify Foundation talks about six important values and all them are on display when you use an application built with Polaris. If you are in a UI/UX design phase (as we mention here),  the Experience value is very useful.  Let’s go over its most relevant aspects, as described by Shopify.‍

Considerate:  As Shopify explains: “We’re here to make their day-to-day and long-term work better — no matter who they are, where they are, or what platform they’re using.” And they really score on this item. For applications based on e-commerce, maybe you need to make sure it works everywhere around the globe. In that case, you definitely have to take a look at the “Internationalization” section and “Formatting localized currency.” Handling different currencies would be easier with Shopify.‍

Crafted: “Work to understand the complex problems users face, then find clear and approachable solutions to those problems.” They address this through this set of components, providing recommendations about how to use it, when to use it, and how not to use it.‍

Familiar: “We want people to feel comfortable using our products, whether it’s their first time using them or their hundredth.” And yes, when you use Polaris, you feel like you intuitively understand how it works. This is the result of a combination of a good design, good layout, and following the recommendations that Polaris gives you in every component coming from the  “best practices” section.

“Best practices + Content Guidelines” section

Every component documentation has “Best Practices” and “Content guidelines” sections that provide you with useful information about how to properly use the component.

The “Best Practices” section is where Shopify tells you their experience about the use of the component, the best ways to take advantage of it, and some tips to use it properly in your solution. 

“Content guidelines” is the section where you find the proper ways to add content inside the component, the structure that you should follow, and some tips that you might find useful for choosing the right component to handle the flow for your user.

2. Resources

I found this interesting, especially for the UI design phase. You can download the Sketch UI kit and a bunch of illustrations that can help you in your journey with Polaris.

I encourage you to take a look at the “Third party resources” as well. I didn’t know about those tools, and they are very useful for the design and content creation process.

3. My favorite components 

Let’s talk about the five components that I consider really important. I chose these components because they offer something different than you find in other libraries.

Modal

The difference between Polaris Modal and Material Modals is you cannot click outside the modal to close it. That’s because the modal is made for the user to do an interaction with the application so the intention is that interaction to not be ignored.

Navigation

Polaris Navigation is the perfect combination of icons, fonts, and badges. It’s simple to implement.

Stack

A useful component to layout items horizontally. You set options for this component to control the distribution of space between the stack’s children.

-- CODE language-jsx keep-markup --
<stack></stack>
‍
  <badge>Paid</badge>
‍
  <badge>Processing</badge>
‍
  <badge>Fulfilled</badge>
‍
  <badge>Completed</badge>
‍
‍

Description List

Polaris has simple components that save you a lot of time when creating layouts, and “Description List” is a good example of this. It takes a list of items and displays them by pairing each “term” with its “description.”

-- CODE language-jsx keep-markup --

  items={[
    {
      term: 'Logistics',
      description:
        'The management of products or other resources as they travel between a point of origin and a destination.',
    },
    {
      term: 'Sole proprietorship',
      description:
        'A business structure where a single individual both owns and runs the company.',
    },
    {
      term: 'Discount code',
      description:
        'A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.',
    },
  ]}
‍
/>

Resource List

Resource List is a nice way to provide a selection list. For the implementation, you must use the “ResourceList” component to wrap “ResourceItem,” which represents each item in the list.

Conclusion

Shopify is a big e-commerce company, and the Polaris design system is written based on the company’s experiences with its own platform. That makes it incredibly useful for front-end developers choosing the right components.

Polaris components are easy to implement, but customization is not so easy, so when you use a component that doesn’t have an option for what you want, it might be necessary to build it from scratch.

There are two downsides to Polaris. One is a lack of components. From my own point of view, the library is too tiny, but for some projects, it should be enough. The second is the customization of the library. It’s a real pain to customize the look and feel, and with some components, it’s a waste of time and you’re better off writing one from scratch.

Using techniques like what is listed above, here at FullStack Labs we have had the opportunity to address our clients’ concerns and they love it! If you are interested in joining our team, please visit our Careers page.