FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade

3 Things That You Should Know About Shopify Polaris

Written by 
Fabio Posada
,
Senior Software Engineer
3 Things That You Should Know About Shopify Polaris
blog post background
Improving SEO in React apps with React Helmet
Avoiding Overly Complex User Stories: Tips for Splitting Stories
Parallelizing Your Tests in CircleCI and Collecting Coverage for CodeClimate

This article provides a deep dive into Shopify Polaris and the value it brings to React solutions with its most relevant features based on my experience working as a front-end developer. Polaris provides a rich toolset, and I don’t claim to cover all of its bases here. But after using it for about 10 months, three things stick out.

Table of contents

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.

UI elements

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.

modal example

Navigation

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

navigation example

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.

stack example

-- 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.”

description example

-- 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.

resource list example
selected resource list item example

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.

Fabio Posada
Written by
Fabio Posada
Fabio Posada

When I was 22 years old, a developer told me,  "Development is not just code, it's an entire world in your head ready to emerge and create amazing things. It's your mark in the world." I abandoned my degree in design for one in systems engineering and I never looked back. As a Software Engineer, I love the fresh challenges and acquired knowledge that each project brings. I thrive on working on projects that matter in people's lives; currently, I'm writing the code to manage Philips's ultrasound technology. I'm most at home using React and other JavaScript frameworks for their ability to seemingly do anything. When I'm not programming, I enjoy playing videogames, watching soccer, and playing with my son.

FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project. Contact us below for a free consultation with our CEO.
Projects start at $50,000.

company name
name
email
phone
Type of project
Reason for contact
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.