Shopify Polaris v6.0.0

Polaris React library was updated from stage v5.0.0 from July 2020 to the January 2021 v6.0.0.

v5 Polaris contained two design languages that could be toggled using the newDesignLanguage feature on AppProvider. We have removed our old visual styles, leaving only the new one.

Here are major changes:

  • New visual style and illustrations
  • Updated content and layouts on the Colors, Typography, Illustrations, Sounds, Icons, Interaction states, and Spacing pages.
  • Updated and removed screenshots to demonstrate the new visual style
  • Resources have been updated with the Figma UI Kit
  • Alternative text added to images for screen readers
  • “Billing” section added under Experiences
  • Improved accessibility

You can check the exact changes that were included in the release of v6.0.0, as well as the new component design in the official Shopify Figma profile.

If you want to migrate your v5 version app to v6, here is the guide how to do that.

Where are Sections Everywhere?

This question was asked during the Partner Town Hall on February 2021. According to Glen Coates, VP of Product, Shopify revised their idea and was forced to go back on the drawing board to redesign the logic of Sections Everywhere, because they found that initial logic was not scalableenough.

Glen promised that we will be able to get completed Sections Everywhere in Q2 2021 at Unite conference.

Local pickup availability feature

product page 1 location
https://www.shopify.com/retail/pickup-availability-for-online-orders

In Q4 of 2020 Shopify added a nice feature to tell its customers what items are available for local pickup. If you wonder, what is the hack about it, because it looks like a simple message, I’ll tell you that this is not so simple.

Take notice that the accelerated checkout method is not supported by this, as well as Apple Pay, Google Pay, Amazon Pay, PayPal. Not all of the themes support this feature as well.

You need to enable a local pickup first, as a delivery method. Under the hood, Shopify tracks the buyer’s IP address and sorts Shopify store locations according to the buyer’s location.

From the Product page you will see this type of notification:

If you want to add this feature to your store, here is the manual.

There is a new liquid object we can use in email templates:

{% if order.pickup_in_store? %}

Here are the manuals on how to setup local pickup availability:

Check your theme code with the theme-check tool

It is weird, but I’ve only now found this tool, having been a Shopify developer for 3 years. It is awesome.

Shopify theme-check tool is a theme linter and its purpose is to analyze Liquid and JSON in ordere to support best practices of writing clean standardized code. I don’t’ know how I’ve lived without it.

To get it work it just install package via brew:

brew tap shopify/shopify
brew install theme-check

Go to the project theme folder and launch:

theme-check

And you will get tons of suggestions:

Don’t forget to upgrade your Shopify Plus customized checkout

Due to the new features such as local pickup and new subscription APIs, all Shopify Plus merchants should update checkout.liquid file. As changelog says, “All checkout upgrades need to be completed by February 26, 2021. Stores that don’t complete the upgrade will be upgraded automatically”.

Docs how to do update checkout layout are here.

Author

Shopify developer