Developing Shopify stores in 2022

Filling Pieces

Filling pieces is a Dutch footwear brand, bridging the gap between streetwear and high-end fashion for shoes.
Learn More

Developing Shopify stores in 2022

Insights from the Shopify experts at Ask Phill

There’s never been a better time to build e-commerce websites on Shopify. The Canadian platform have for years been one of the top SaaS platforms, but in 2022 it’s clearer than ever that Shopify is the best of the best.

Here we’ll take a closer look at the new Shopify updates that have moved the platform ahead of its competition. Announced in June 2021 at the annual Unite Conference, building scalable, data-driven e-commerce is today even more of a joy than it was before. And as we all know, happy developers = successful stores = happy merchants. Everyone’s a winner.

From there we’ll explain how we’ve put these updates to use in our brand new Shopify starter theme. It’s our template for building data-driven, scalable websites on Shopify 2.0 and we’re rolling it out for all projects in 2022.

And to finish we’ll show you a case study of our new starter in action. Filling Pieces are the Amsterdam fashion house on everybody’s lips, and with a brand new store built natively on Shopify with the new Ask Phill theme they’re in the perfect position to blast past their targets and scale around the globe.

What is Shopify 2.0?

To begin, let’s answer the basics.

Shopify 2.0 is the new store design experience from Shopify. It is a collection of updates, some of which have been hushed rumours in developer internet circles for many years, officially announced in June 2021 at Shopify Unite.

The updates have two major impacts: 

  1. Improved Shopify store capabilities and performance.

Quite simply, you can do more with a native Shopify store than ever before. We’ll go into the new features and functionality below but the big takeaway is this: there’s less need for external applications and integrations. 

Adding extras to your Shopify store weighs it down and has detrimental effects on performance. Shopify stores are reaching their highest performance levels since the platform started operations back in 2006 because they’re now capable of achieving most things themselves, without the need for outside assistance. 

  1. Improved developer experience.

In his explanatory video at the Unite Conference Shopify head-honcho Tobi Lütke stressed the importance of fun. In website development, in work and in life more broadly. Fun is often cast aside in our working lives - in business jargon it’s a ‘nice-to-have’, not a ‘must-have’.

But why? Why can’t work be both productive, professional and fun? Lütke stresses the importance of fun and fun is at the heart of the Shopify updates. Building Shopify stores is simply much more fun, with a developer experience that’s fast and fluid and rewarding. And with happy developers having such a great time building stores, you’ll only end up with one outcome: better e-commerce websites.

What’s new in Shopify 2.0?

So what is it actually like to build a store on Shopify in 2022? Hold onto your hats folks, because this next section could get a little technical. If you’re not adept with developer speak and computer jargon you could struggle to follow but do your best. We believe in you!

If you have any questions feel free to reach out to us here, or if you’re only getting started with Shopify maybe start with our beginner introductory article here.

New Theme Editor

The first place to start is with the theme editor. Shopify like to switch up their theme editor fairly regularly but the most recent changes are arguably the most significant they’ve made in a while.

In essence, the new Shopify theme editor centralises all available features and functionality. Developers can do pretty much everything inside the theme editor without having to navigate away, making the Shopify experience far smoother and more enjoyable.


New theme editor



The most important feature to note is the tree-view of sections running down the left hand side of the screen. You’ll notice that blocks are far more visually prominent than in Shopify 1.0. This isn’t an accident, it’s a clear indication of Shopify’s intentions to move section settings into blocks. With this setup developers can (re)arrange section settings on the front-end by simply dragging and dropping the blocks into place.

New theme architecture

Alongside the editor, themes themselves have an updated architecture in Shopify 2.0. What’s that old saying that the more things change the more they stay the same? Well Shopify’s new theme architecture updates are surprisingly familiar. In simple terms, every page in a theme now has the same architecture that a Shopify homepage has had for many years.

The homepage has always been the most customisable page for developers: drag and drop sections in any order to build unique pages that fit a brand’s identity and aesthetic. It might be long overdue but developers can (finally) do this on every single page of a Shopify store.

How so? Well 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 to be dragged and dropped wherever and whenever.

If you look at Dawn, the new default storefront theme, you’ll see that structurally not much has changed except that template files are now JSON rather than Liquid. It’s now far easier to prototype unique landing pages natively in Shopify. You can create rich and detailed product pages, or ‘about us’ pages, or contact pages - any page you wish can be as rich and full of sections as you wish.

Building like this natively in Shopify, without using external applications and integrations, makes Shopify stores run faster. It’s estimated that Dawn runs 35% faster than its predecessor. So it’s more fun to build for the developer and it gives a more enjoyable experience for the customer. An improved UX helps conversion rates, Google rankings and the likelihood that customers will return. What’s not to like?

To end this bit, those of you with your finger on the pulse will have already worked out what this all means: Sections Everywhere is here. The long teased and eagerly anticipated update exists in the theme architecture update. Drag and drop sections anywhere and everywhere you please for a fluid and fully customisable store design experience on Shopify 2.0

Metafields

There was a time when we’d advise all our clients to avoid using metafields wherever possible. The Shopify CMS rather (in)famously only provides a single content field. Metafields were an option for hacking new sections into store pages within the confines of this rigid CMS structure. But they weren’t the best solution. They required an external application, scaling up was difficult, they could diminish site performance. It was a messy way to operate.


new shopify metafields


We’re happy to say that has all changed.

Metafields, or dynamic data sources, have had a major overhaul in Shopify 2.0. Firstly there’s no need for external apps, developers can edit metafields natively through the admin. Secondly, developers are no longer limited to a single Text line but can instead create metafield definitions in numerous different content types including: Colour, Data and Time, File, JSON, Measurement, Number and True or False.

Once a metafield is defined developers can edit directly from the product page in the admin, just as they would edit standard fields like title or description. To bring these changes onto the front-end, developers can link metafields to already existing fields in the section settings. There’s no need to code metafields into a theme using Liquid, making the new method far more efficient and scalable.

A very handy outcome of all this comes when you want custom features on pages of the same type. Say you want a discount banner on a product page to offer a different amount from one product to the next. 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.


Sections Everywhere Shopify

Developer tooling

The big change for us in Shopify’s developer tooling is the brand new Github integration. Because we love Github. Github is great. For too long it’s been incompatible with Shopify but now our two favourites have been brought together.

Previously developer teams had to engineer their own robust systems for managing and deploying theme code changes. This was always an extra hassle that, quite frankly, we could all do without. Now we can manage and deploy directly to Shopify 2.0 via Github. Wonderful.

App extensions

It’s always been difficult to guarantee that external apps won’t mess with your Shopify store. There’s never been a structured end-to-end solution for apps to integrate with Shopify themes, so app developers have always had a tough time building apps that perform consistently across all themes

On top of this, store owners have previously had to copy or remove code from a theme’s files to turn apps on and off. If you’re not tech savvy this can be difficult. It’s been easy to uninstall an app and miss some remaining ghost code in the Shopify theme that would subsequently sit there and reduce site speed whilst not providing any benefit whatsoever.

But this has all changed. The theme app extensions update has made developing and installing Shopify apps far more straightforward. Apps now exist as separate entities, going nowhere near a theme’s codebase. Shopify takes care of the rendering and asset hosting, meaning building apps is far easier. Installs are simpler. Uninstalls cleaner. 

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.

The Ask Phill Shopify 2.0 starter

When Shopify 2.0 launched in 2021 we knew the race was on to build a brand new starter based around the platform’s new functionality. Here’s the story of how it went down:

Headless knowledge

We’ve been building headless Shopify Plus stores for years now. If you’re interested in the topic and want all of our expertise in one place, download our headless whitepaper here. 

One thing always stands out to us on a headless project: the developer experience is much more enjoyable than Shopify projects. Not that Shopify projects are unenjoyable, far from it, but using Github in the headless projects makes the workflow that much smoother.

Until Shopify 2.0, we’d rely on external build tools like Webpack, Slate.JS or Rollup.JS to build Shopify stores. And these simply weren’t the optimal solutions. When Shopify 2.0 dropped we saw the opportunity to build a starter theme using the new Shopify CLI and Github integration. We’re not afraid to say that the result has been brilliant. 

The developer experience on our new starter theme is equal to working on a headless project (if not better) and as Tobi Lütke stresses, the more fun developers have building stores, the better the stores end up. He’s not wrong.

For the long term, it’s also advantageous to have fewer external dependencies. If your projects are reliant on external build tools you always run the risk of needing to rebuild whenever those tools update. 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

When building our own starter theme we looked at Dawn, the new Shopify 2.0 default, took inspiration from it but used none of its code. 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.

Let’s look at the specs: 

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 of these is a new image component that’s fully native to the Shopify platform and optimised for speed and performance. Dawn does include its own image component but we noticed there’s no fallback for Safari, giving users some performance issues on this browser. We’ve cleaned that 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. Without getting too technical on the details, the end result is a website that snaps into place every time page loads. Customers can search for a product, refine that search with a filter and the results are already in place. Read more about this in the Filling Pieces case study below.

Multilingual

One we’re really proud of is our Shopify starter’s multilingual functionality. Yes, you read that right. Multilingual stores built natively on Shopify without external integrations or a headless setup. It’s never been possible before like this but the new Shopify updates have made it so. We use domain extensions for each different language, keeping SEO and site performance both at an optimum. 

Multilingual capability has always been a big reason to build a headless store. For readers with headless stores, or thinking of going headless, you might have questions about whether headless is still the best option for your e-commerce business. We’ll get to that below whilst discussing the Filling Pieces project. Hold tight.

Shopify 2.0 starter case study: Filling Pieces

Filling Pieces | Ask Phill client


Filling Pieces is the Amsterdam fashion label bridging the gap between streetwear and high fashion. They’re ambitious and have their sights set on selling their products all around the globe. We built them an e-commerce website that could match these aims.

Rather than dive into the minute details of how we built the store, we’ll give you some highlights. We built a lot of the store’s functionality ourselves, and we’d like to give you an idea of what’s possible nativelty in Shopify with 2.0.

The highlights: 

Wishlist and search functionality

Search and wishlist features are usually made possible by external apps. This solution is fine but if you want to truly prioritise performance and site speed, apps will always be code-heavy so you need to minimise their use wherever possible.

Thankfully, Shopify’s new global theme has a native search function that’s as good as anything else we’ve seen. Our 2.0 starter includes a native Shopify search that’s just as responsive, accurate and fast as any external app.

For the wishlist feature we drew on our headless development experience to build our own cloud function. Items are saved on customer metafields, reducing the need for external code that ultimately slows a website down.


Filling Pieces site

Black Friday Launch

As you’ll know Black Friday is the busiest period of the year in any e-commerce industry. Anyone who’s worked it will testify that stress is usually high and the last thing you want is for something to go wrong.

It’s not exactly the time you want to be launching a brand new website. Unless, of course, you have 100% trust that the system won’t fail or let you down at a vital moment.

That’s why a highlight of ours is that we launched the Filling Pieces store 2 days prior to Black Friday. There was total trust in the system from both camps, and Shopify 2.0 and the Ask Phill starter didn’t let us down. The store was an instant success, robust enough to withstand even the busiest customer surges and Filling Pieces navigated their most successful Black Friday to date.

Deciding against headless

This seems a strange highlight, no? Ask Phill, we’re the headless agency right? The leaders in the field and experts of the architecture. So why are we celebrating a project that decided against going headless? Let us explain.

The Filling Pieces project was originally planned as a headless Shopify Plus project. They’re scaling globally and multilingual functionality is a key feature for their continued success. Headless was always the way to go for building multilingual stores on Shopify Plus, but following Unite 2021 we looked into whether we could achieve the feat natively on 2.0.

It turns out we could and so we jointly decided that a native store on 2.0 was the better alternative. That does not mean, however, that we believe 2.0 stores are always the best option over headless Shopify Plus stores.

With Sections Everywhere Filling Pieces can build and rearrange new pages at will, telling unique stories about each of their products, about the team and the history of the brand. The store design isn’t limited to a restrictive CMS structure and pages have the look and feel of a headless site.

They use a native Shopify page builder to drop and drag sections, building multilingual and multi-currency site pages with the renowned Shopify store design experience. Had we gone ahead with the headless project, the team could still build and rearrange pages themselves but they’d have lost the workflow that makes Shopify such a joy to use.

Headless websites usually require larger teams to run smoothly and they lose the visual aspect of page design. Bringing 2 different systems like Shopify and Contentful together will always  create some overhang, and seeing a page come together in front of your eyes is unfortunately lost in a headless setup. Brands that do go headless are not tied to a development team for on-page changes and updates, but they do have to get used to a new way of working.

However, Filling Pieces’ scope is (relatively) limited in comparison to much, much larger brands. For big (and we mean really big) companies selling all across the globe that want to truly focus on localisation and customer personalisation for the coming years, headless is still the way to go. Shopify 2.0 is good but it has its limits.

In the future e-commerce stores will be totally curated to the locale and personal tastes of the individual user. At present, the closest we can get to that is through headless stores on Shopify Plus. However, like we’ve already done with the Filling Pieces case, as soon as something changes and more functionality is available solely on Shopify, we’ll adapt our methods to achieve as much as possible natively to the platform.

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:

  • 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.