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 Help Center to browse frequently asked questions or submit a support request directly to our team.



Also in Shopify Theme Blog

Anatomy of a product page: Creating more advanced layouts
Anatomy of a product page: Creating more advanced layouts

by Michael P. Hill July 25, 2017 0 Comments

Although premium Shopify themes offer more and more layout options on product pages, there are some surprisingly easy ways you can achieve some intricate layouts that make your product pages more engaging. In this post, you'll learn the secrets to creating dynamic layouts, including sample code.
Read More
Announcing Parallax 3.3: Now with lazy loading, 'smart' images, new section page and more
Announcing Parallax 3.3: Now with lazy loading, 'smart' images, new section page and more

by Michael P. Hill July 19, 2017 0 Comments

Out of the Sandbox is excited to announced the release of Parallax 3.3, the latest version of our popular  Parallax Shopify theme . Many of these features are designed to improve your site's performance and speed, while others are completely new features.
Read More
Anatomy of a Shopify theme product page: Adding to your pages
Anatomy of a Shopify theme product page: Adding to your pages

by Michael P. Hill July 13, 2017 0 Comments

While a traditional product page features the product image, name, description and add to cart button all high up on the page, many  Shopify themes  have the option to create longer, more engaging product pages that educate shoppers and give them more insight into your company and items.
Read More
News & Updates

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