Shopify 2.0

What's new in Shopify 2.0?

What's new on Shopify 2.0

Seb Harris

8 minute read01 Feb 2022

Here we’ll provide a summary of a longer and more-in depth article posted with our friends 1-800 D2C. Follow this link for our full work on Shopify 2.0, our new starter theme and our recent project with Filling Pieces.

What is Shopify 2.0?

Shopify 2.0 is Shopify’s new store design experience. It’s a collection of updates that improve Shopify store capabilities and performances, whilst also making life easier and more enjoyable for Shopiufy developers.

The updates were first announced at the Shopify Unite conference in June 2021 and were steadily rolled out through the remainder of that year. 

What are the Shopify 2.0 updates?

Here’s a run-through of our favorite updates available in Shopify  2.0. If you have any further questions about any of these, or want to know about more updates in Shopify 2.0 that aren’t listed, feel free to reach out to us here.

Theme Editor

Shopify’s new editor brings all features and functionality into one place. Developers can make nearly all store changes from within the theme editor, removing the need to navigate away and break up their workflow.

Blocks are used far more prominently than in the original Shopify setup. Developers can (re)arrange section settings on the front-end by simply dragging and dropping the blocks into place.

New theme architecture

Shopify’s new theme architecture updates gives every page the same architecture that a Shopify homepage has had for many years. Fully customisable, drag and drop sections in any order to build unique pages that tell rich stories.

Template files are now written as JSON objects, the same data format used to write theme schemas. Developers no longer write Liquid code directly into templates, but instead they write it into unique sections that are dragged and dropped into place wherever they’re needed.

Structurally not much has changed to Shopify themes, except that template files are now JSON rather than Liquid. The result however is that developers can build any page on a Shopify site in any way they wish. This is the Sections Everywhere update that has been hotly anticipated for some years now, and it’s revolutionised Shopify stores.

Metafields

Metafields, or dynamic data sources, have had a major overhaul in Shopify 2.0. There’s no longer any need for external apps to host and edit metafields, developers can do this directly through the admin. 

Secondly, the information you can put in a metafield has massively expanded. No longer limited to a single Text line, metafield definitions come in numerous different content types including: Colour, Data and Time, File, JSON, Measurement, Number and True or False.

With a metafield defined developers can edit just as they would edit standard fields like title or description. There’s no need to hard-code metafields into a theme using Liquid, making the new method far more efficient and scalable than before.

If you want a discount banner on a product page to offer a different amount from one product to the next, you can now achieve that with metafields. Previously the section value would stay fixed across the whole template, but now developers can insert a dynamic data source and build pages that are different to one another in the same template.

Developer tooling

Shopify now has a direct integration with Github. Previously developer teams had to build their own systems for managing and deploying theme code changes, but now they can manage and deploy directly to Shopify 2.0 via Github.

It’s taken an extra step out of the Shopify development experience, making it smoother and more efficient.

App extensions

The new app extensions update means Shopify apps exist as separate entities to the store. They don’t go anywhere near a theme’s codebase, reducing the likelihood that they’ll mess with a store’s performance. 

Shopify handles the rendering and asset hosting, so building, installing and uninstalling apps is now far easier than before.

Checkout extensions

The Shopify checkout is now far more flexible with the new checkout extensions update. The three concepts behind Shopify’s checkout re-think are:

  1. Checkout extensions: App developers can attribute functionality to a particular part of the checkout stage, giving far more scope for workflow customisation.

2. UI components: Designers can add rich visual elements to the Shopify checkout.

3. Branding API: Provides total checkout appearance customisation, not even Shopify Plus users were afforded this in the past.

With all three extensions, the entire checkout experience is built with speed in mind. Shopify know what they’re doing and they know that faster sites garner more sales. Here and in all Shopify 2.0 updates the platform have their end users in mind: how to make their e-commerce websites perform better and, in turn, how to grow their business.

Shopify 2.0 is Shopify’s new store design experience.

The results

What do these updates mean for Shopify users? The big change is Shopify stores can now do much more on their own than ever before. There’s less need for integrations from external applications, making Shopify stores run faster.

Faster webstores

As we’ve explained in our article on site speed, keeping code to a bare minimum is the best way to build a fast, high performance website. Apps inject extra Javascript into a Shopify store and whilst they bring necessary functionality, they also slow stores down. If a Shopify store can do as much as possible on its own, without additional apps, site speed goes through the roof.

Improving UX helps conversion rates, Google rankings and the likelihood that customers will return. With all of their updates, Shopify have clearly had their users in mind. They want to grow businesses, and providing a higher quality of website will play a major role in achieving that.

Improved developer experience

Fun is something we don’t generally associate with work. But fun is at the heart of Shopify 2.0. Tobi Lütke stresses the importance of fun to website development, explaining that the more a developer enjoys their work, the higher quality website they’re able to build.

Building Shopify stores in 2.0 is simply much more fun, with a developer experience that’s fast and fluid and rewarding.

The Ask Phill Shopify 2.0 starter

We have our own custom Shopify theme that’s the starting point of any Shopify project. When Shopify 2.0 launched we knew we had to update it and incorporate all of the new features and functionality. 

Here’s a brief explanation of the key points:

Headless knowledge

Headless projects have always been more enjoyable from a development perspective. Shopify projects aren’t unenjoyable, but using Github in headless development always makes the workflow smoother.

Until Shopify 2.0, we’d rely on external build tools like Webpack, Slate.JS or Rollup.JS to build Shopify stores. Now we have a starter theme that uses the new Shopify CLI and Github integration, providing a developer experience just like a headless project.

And beyond development experience, it’s advantageous to have fewer dependencies. A project reliant on external build tools is also reliant on updates of those tools going smoothly. They always run the risk of requiring total rebuilds if a certain tool suddenly requires. Working natively in the new Shopify setup, we have a stable and long-term starter theme that’s fully focused on future developments.

Comparisons with Dawn

Dawn is the default starter theme on Shopify 2.0. We drew inspiration from it for our own starter but found ways to improve it. 

In our eyes, Dawn is overloaded with unnecessary Javascript. We wanted to cut the fat and build something more toned, more athletic and capable of producing faster performance.

Theme specs

The Javascript on our Shopify starter is reduced to an absolute minimum. And all CSS styling is done with Tailwind to make sure there’s no duplicate CSS anywhere on the site. Both of these keep our Shopify stores lightweight and super responsive.

In addition to the new general updates mentioned above we’ve also built a number of our own features natively with Shopify:

Image component

The first is a new image component that’s fully native to the Shopify platform and optimised for speed and performance. Dawn has one but there’s no fallback for Safari. We’ve cleaned it up and made our Shopify stores consistently high performance no matter which browser you prefer.

Product filtering

Product filtering has always been a slight issue on Shopify stores. In the past, search parameters would trigger an app and inject a store with extra Javascript. This takes longer to load and ultimately slows the website down. It might only be a few milliseconds but in e-commerce everything counts.

Our new filtering is fully native to Shopify, without any external app, and only includes 60 lines of code. It’s a fully functional e-commerce product filter with zero loading time.

Multilingual

Our Shopify starter is multilingual. It’s never been possible before like this but the new Shopify updates mean you can build a scalable platform in numerous languages. We use domain extensions for each different language, keeping SEO and site performance both at an optimum.

Keeping code to a bare minimum is the best way to build a fast, high performance website.

Shopify 2.0 or a headless Shopify Plus store?

Multilingual capability has always been a big reason to build a headless store. If you’ve been considering going headless to build a store that works across numerous international markets, you might now have some questions.

Is headless architecture still the way to go for a multilingual store? In truth, the answer is both yes and no.

Multilingual stores are now possible natively on Shopify and for mid-to-large businesses this is very inviting. Our collaboration with Filling Pieces was originally due to be a headless project until the 2.0 updates were launched. Now they’re scaling across the EU with a native Shopify store that does everything they need for continued growth.

However, Shopify 2.0 still has its limitations. For very (very) large operations that need a store that’s not only multilingual but capable of the most advanced location-based customer personalisation, headless is still the way to go.

In the future e-commerce stores will be specially curated to customer tastes and location, with automatic optimisations made possible through data science and analysis. At present, the closest we can get to this is via headless architecture on Shopify Plus. 

In short, if a multilingual store is the driving reason you’re considering a headless store then Shopify 2.0 is probably the route to take instead. If you’re involved with a much larger global brand that wants multiple languages alongside much more, then headless is the best option.  

If this situation changes we’ll immediately update our Shopify starter to achieve as much as possible natively on the Shopify platform we love.

Summary

Shopify 2.0 brings e-commerce into a new era. Never has so much been possible on a single platform, and brands and businesses of all sizes can own a store that’s finely tuned and performs at the highest level. 

Over the coming years we’ll see the overall standard of e-commerce reach new heights. This is good for all involved but note that customer expectations will rise as well. It’s more important than ever that e-commerce websites not only meet but exceed these expectations by offering online experiences that are fast, fluid and flexible. 

Competition is strong right across the e-commerce landscape but growth remains in reach as long as brands keep up to date with changing trends and developing technologies. The choice is simple: keep a store updated and optimised and reap the rewards of this new e-commerce age, or refuse and be overtaken by your competitors. 

Our Shopify 2.0 starter is designed with optimisation and data-driven growth in mind. With each project we keep pushing to develop new ideas and possibilities on Shopify, and our primary focus remains fixed on growing our client’s business.

If you have a project in mind, we’d like to hear from you. Whether you have an e-commerce website in place already or not, or if you’re on another platform and fancy migrating to enjoy Shopify’s benefits, we can build you a store that will grow your brand and your business. 

Get in touch today here and let’s get talking about your ideas.

For further reading, perhaps you’d be interested in more of our articles:

What is Shopify? 7 questions every beginner will ask.
Tips for choosing the right Shopify agency for your project.
How to write a website brief for a development project.
How to know when Shopify Plus is the right step for your business.
Our 2022 guide to headless e-commerce on Shopify Plus.
The difference between data-driven and data-informed e-commerce.

Do you want to
stay updated?

Yes

Opt-in

Subscribe to our newsletter to receive exclusive offers, latest news and updates.