0

Your Cart is Empty

by Michael P. Hill April 27, 2017

A whole new look is coming to the Shopify admin — and it’s all part of an effort by Shopify announced at Unite 2017 to provide a “guiding star” to make using the platform easier than ever for merchants.

Aptly named Polaris, this “design system” is focused on making it easier for developers to create consistent interfaces for the various control panels and admin areas merchants see on a daily basis.

Enter indigo

Perhaps the biggest change you’ll notice as Polaris begins to roll out is the switch from the familiar Shopify green and slate gray to a color palette dominated by what Shopify refers to as “indigo.”

Shopify indigo

The new hue, which is a sophisticated shade somewhere in between blueberry and plum, is designed to convey confidence, a strong foundation and integrity.

While green is the color of money, blue is often considered one of the strongest colors out there to reflect stability, trust, loyalty and sincerity.

It’s important to note that while indigo is the primary color indicated by Polaris, there is a still a wide palette of reds, oranges, greens, blues, teals, yellows and grays that have been curated for use within the admin.

Shopify Polaris color palette

In many cases each color range has been assigned specific meanings — for example, indigo is, as the primary color, encouraged for primary action buttons, while teal is a suggested way to highlight other information.

Shopify blue, purple and teal

The close cousin to indigo, purple, is Polaris’ choice for bar charts, which will come in handy for store owners looking to see trends over time in the reporting features that Shopify offers.

Blue will no longer be recommended for primary action buttons (indigo is taking over the role), but will continue to be used in text links in the admin.

Together, the bundling of indigo, teal, blue and purple serves as the foundation for creating a harmonious palette that also allows the remaining colors in the rainbow to serve other, more specific purposes.

Much of how the remainder of the color palette is used follows traditional color roles that you’re used to seeing both online and in the real world.

Shopify red, orange, yellow and green

Red, as you might expect, is designated for errors, "destructive" actions such as deleting items and a way to highlight high risk orders, while orange is designated for warnings and items that need a bit of extra attention, including drops in numbers that might require your attention, such as a drop on orders or page views.

Yellow, meanwhile, is indicated for lower risk orders.

Note the subtle message that the selection of yellow for “low risk” orders gives off — that no order is ever risk free or “good to go” in the same way that the color green might suggest. Along those lines, green is reserved for success messaging and positive trends in dashboard widgets.

What’s not changing

It’s important to note that while the new admin look and color scheme will begin rolling out over the next few months on the backend of all Shopify stores, it won’t have any affect on how your store looks to customers.

In other words, while the new Polaris design principles will be applied to most areas of Shopify you see as a store owner and merchant, it won’t affect the public facing Shopify themes and designs your customers see.

What will change

What you can expect to see, however, is a new layout and color scheme for the Shopify “back office” admin area — basically what you see when visiting any section within www.yourstore.com/admin.

New Shopify admin demo

Preliminary renderings of the new admin shown at Shopify Unite appear to indicate that the basic structure of the backend — namely the left sidebar — isn’t changing structurally.

Instead, the sidebar shifts to a lighter shade while a thick indigo bar running along the top of the admin provides room for additional navigation element.

Of course, Shopify could always change things before the final implementation.

The admin interface of your installed apps should also reflect all the new color, tone and usage guidelines outlined in the Polaris documentation. This is the primary motivation for Shopify releasing these new style guidelines: so that app developers can create interfaces that look consistent from the merchant’s point of view, and in line with Shopify’s own styling.

Be advised that there will likely be a transition time for most app developers where the previous pale blue and white boxes will still be used.

Polaris also places a special emphasis on illustrations, iconography and data visualization,which encourages cleaner interfaces that are easier to scan while still providing access to the functionality and tools you need to run your business.

How this benefits merchants

As Polaris begins rolling out across the Shopify admin, you’ll start seeing more consistent headings, subheadings, buttons and block headings, including the use of specific colors — in addition to indigo — to more clearly communicate tips, warnings and errors.

New and improved modules will help guide you through the steps of managing your store, including providing inline and easy-to-access instructions.

Not only is Polaris designed to help make it easier than ever for you effectively navigate through every aspect of your store’s admin, Shopify also uses Polaris to establish voice and tone guidelines for written instructions, to establish the use of clear language and concise vocabulary so than any messaging is clear, easy to understand and friendly.

In addition, Polaris also emphasizes visual accessibility, including guidelines on font sizes and contrasting colors that encourage text clarity for merchants who may be color blind or have low visual acuity.
Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.



Also in Shopify Theme Blog

Strategic Content Marketing 101: Fueling your blog, social media and SEO efforts
Strategic Content Marketing 101: Fueling your blog, social media and SEO efforts

by Michael P. Hill May 26, 2017 0 Comments

Over the past few weeks, we’ve taken a look at how you can pick a topic for a content marketing guide , how to write and design it and use it to build your email list — now it’s time to come full circle and see exactly why I refer to it as “centerpiece content.”
Read More
Strategic Content Marketing 101: Using your centerpiece content to build your email list
Strategic Content Marketing 101: Using your centerpiece content to build your email list

by Michael P. Hill May 16, 2017 0 Comments

Once you’ve completed writing and designing  your centerpiece content on the topic of your choice , it’s time to put it to work for you — helping you build your business by generating leads and building your email marketing list.
Read More
Strategic Content Marketing 101: Writing and designing your centerpiece content
Strategic Content Marketing 101: Writing and designing your centerpiece content

by Michael P. Hill May 10, 2017 0 Comments

Creating centerpiece content is a great way to share your passion for your products and industry while also integrating your SEO, social media and content marketing strategy for weeks or even months to come — but how can you create a dynamic and informative content piece?
Read More
News & Updates

Sign up to get the latest on sales, new releases and more …