A big change to the Shopify admin is coming — what it is and how it will benefit you

A big change to the Shopify admin is coming — what it is and how it will benefit you

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.


Also in Shopify Theme Blog

Accelerating page speed and performance with Turbo v9.2.0
Accelerating page speed and performance with Turbo v9.2.0

Turbo version 9.2.0 focused on page speed and performance, offering a suite of powerful enhancements. The latest version introduces minified scripts, preloaded links, updated jQuery, and more.
Theme Updater Plus now supports Clean Canvas themes!
Theme Updater Plus now supports Clean Canvas themes!

Theme Updater Plus now supports Troop Themes!
Theme Updater Plus now supports Troop Themes!