Posted: 20 Minute read

Everything You Need to Know About Shopify 2.0

 

Introduction - a revolution in ecommerce?


At Shopify Unite (an annual Shopify developer event) all the way back in June of 2021, the next step in Shopify’s evolution was announced. Shopify, they stated, had “rebuilt the online store experience from the ground up”. In addition to the announcement itself, the write-up revealed six core changes that would come with the arrival of what they referred to as Online Store 2.0:

  • Upgraded theme architecture
  • Flexible store content
  • Enhancements to the theme editor
  • New developer tools
  • A new reference theme
  • The Shopify Theme Store reopening

Two years later, now that the dust has firmly settled, we are better equipped to evaluate these changes and what they mean for Shopify and ecommerce more generally. However, we’ll assess these changes a little further on in the article, right now the question is - was this a revolution in ecommerce? The answer, perhaps surprisingly, is a (albeit caveated) ‘yes’.

Shopify has been revolutionary in its own right since 2006 - when it began providing off-the-shelf, customisable ecommerce templates to brands of all sizes, doing for ecommerce what WordPress had achieved three years earlier for websites more generally.

By providing easy access to non-technical individuals, Shopify created a boom in dropshipping and independent ecommerce businesses, the effects of which are still being felt today. No longer did a small business require investment in the tens of thousands just to begin selling online - they could begin with an easy to use, familiar feeling ‘Shopify style’ site from a template or spend some time and resources adapting it to match their brand style.

Online Store 2.0, or Shopify 2.0 as it’s become known, has supercharged the capacity for true customisation of the look, feel and operation of a Shopify store.

Six improvements and what they mean


While improvements have been made across the board, there were six changes that Shopify felt were important enough to feature in their own announcement, so we’re going to cover them here, what Shopify said about them and what it means for your business and your customers.

1. Upgraded theme architecture


Sections everywhere


“We’ve upgraded the theme architecture for the online store, providing easier and more flexible customization options for merchants. There are also new opportunities for developers to build themes and integrations that can be easily customized by the merchant to fit their needs.”


This is a genuinely useful development for any merchant looking to own their ability to create new page types following launch. Over the last decade, websites have moved from page templates to a modular design - it’s been a selling point for WYSIWYG platforms like Squarespace and Wix and, using Gutenberg and plugins like Elementor, WordPress.

This development brings cutting edge customisation options to the Shopify platform. Not only will brands be able to create bespoke web-presences more quickly with the help of their developers, they will be able to be far more hands on with alterations to the finished product without the need for developers at all, meaning they’ll be able to respond quickly to their business and customer needs, using elements developed for every area of the site to create new custom pages or amend existing ones.

What this means, in layman’s terms, is that any page can now be augmented in the same way it was previously possible to add dynamic sections to the home page - this is useful not only from a design perspective, but also for ongoing optimisation of the customer experience and with conversion rate optimisation testing.

To give another example - were you to require a new page for a specific paid media campaign, or sale, it’s possible to use the available elements to rapidly prototype, iterate and launch a brand new, custom page to suit the needs of that specific campaign without having to rely on development time, budget or your ability to make do with an existing template.

On their announcement blog, Shopify also included the following brief walkthrough of a possible page creation process as it would look for users of Shopify 2.0.

 

Theme app extensions with app blocks


Continuing with the shift to modular development, Shopify 2.0 also tackles previous challenges with incorporating apps into themes. In their announcement, Shopify stated the following:

“Currently, there’s no structured, end-to-end solution for apps to easily integrate with themes. Developers are left to build integration logic for every existing theme and host assets themselves, making it hard to build features that work consistently across all themes and are fast anywhere in the world.”

The solution to this historic problem is to allow app blocks to be embedded in a template without the need to integrate with the theme - similar to (though not exactly) how iframes can introduce new functionality to a web page without the page needing to have it natively - though it should be noted that app blocks provide this expanded functionality without the additional issues surrounding security.

This change, as with sections everywhere, makes Shopify stores far more readily customisable by non-developers, or with minimal developer oversight, making ongoing functional improvements less expensive and time consuming after the initial build (and also making it easier to commission specific new components from a developer rather than entire new templates). The below gif, again from the announcement blog, shows how this would work with the addition of a review app to a product page.

 

Shopify Theme Extensions

 

2. Flexible store content


Improved metafields


In another effort to reduce the friction inherent in customisation, Shopify 2.0 has also attempted to make it easier to adapt themes to the unique needs of each brand through use of improved metafields. A metafield, in this instance, is additional, custom information added to a resource.

Were your business to sell soups, for example, there would ordinarily be nowhere to add a list of ingredients or other dietary information; the addition of a metafield would allow you to add a downloadable information file to the page without the need to hardcode the change into the theme.


Shopify details the changes like this:

  • More flexible: Metafields now have a much more flexible type system that will grow over time to become more tailored to commerce data.
  • Standard metafields: We’re introducing standard metafields, which make it much simpler for custom themes to work out of the box on stores across different market verticals.
  • Presentation hints: You will now be able to add presentation hints to metafields, allowing Storefront API and Liquid users to render merchant data in the way the merchant intended, with far less custom code.

Essentially this makes some of the final tweaking of a theme for various niches that little bit easier - and also offers ample scope for ‘one-off’ changes, meaning you don’t have to panic if a single item requires something unique - including the option to add hints to ensure that changes are made the right way when they’re needed.

SInce the initial announcement, however, metafields have come quite a long way. They are, of course, still perfect for such tweaking and the addition of product guides, specifications etc. - but there is a huge range of additional options that have and are still in the process of opening up for their use.

To give you a couple of examples:

  • Complementary products: - if you have a number of products that are often purchased together, or by the same consumer type, you can create metafields which join those products together and allow you to show a ‘recommended products’ on the product pages which can serve as a suggested product promotion.
  • Shop the meta-object: - brands can now create meta-objects, a grouped collection of metafields which can be added as a block to any page type. This can allow you to have content which will show whenever that set object is referred to on a page. Say you’re running a sports team, or working with a popular designer, you can create a meta-object of that individual and then, wherever that individual person appears, these can be added. Writing about the signing of a new striker? The user can shop for their numbered shirt, see their performance information, check out other linked merchandise - essentially as much information as you’ve linked to the meta object.


In fact, the uses are as many and varied as you can imagine - you can make meta-objects of meta-objects, allowing you to create information hierarchies that serve useful and/or important information to your users wherever it is applicable to the page they are viewing.

In the original announcement, Shopify also included a video of the addition of a metafield - which will give you an idea of the process, but which appears to have cut off the final result. We’re all human after all, it seems.


 

3. Enhancements to the theme editor


One of the many reasons Velstar has been happy to position itself as a Shopify specific agency is the strength of the Shopify UX and UI - and this change is an excellent example of that attention to detail.

Users will now be able to change the hierarchy of a page using a simple drag and drop function. Magic.

 

Shopify Theme Editor Enhancements

 

Changes to the theme editor don’t stop there, though, there is also…

Liquid input setting


This will now permit brands to access both sitewide and page specific Liquid objects from the editor - similar to how the HTML setting type worked previously. Shopify’s announcement blog links, when discussing this, to a sample of custom code in a GitHub repository which slightly amends various aspects of the page’s colour scheme and padding for screens over 750px wide.

About this, Shopify states: 

“These changes make it easier for merchants to work with the new features of Online Store 2.0, and make decisions about their online store without engaging with a developer—freeing up your time to focus on building creative integrations and solutions.”

I hate to sound too much like a Blue Peter presenter, but I’d be reluctant to advise anyone to start playing with Liquid files without a suitably trained professional present. However, it does represent yet another opportunity for businesses to refine the look and feel of a theme to suit the exact (and often evolving) needs of a brand and, while it may still require a developer, it should certainly require fewer hours of their time.

4. New developer tools


As you might guess from the title, these are aimed at developers rather than merchants, but they’re still a significant step forward in terms of the ease of development. As with many of the other improvements, this is aiming to allow developers the freedom and time to do what they do best - avoiding unnecessary hurdles that occur when changes need to be made in a live environment with a ‘better sandboxed environment’, for example.

The announcement details three main improvements or additions to the developer toolkit. 

Shopify GitHub integration


This is a change that has probably become even more significant since its release. At the time of announcement, the details were essentially that there was improved provision for collaboration between developers due to native support for version control, as well as the capacity to implement workflows which require approval before synching with the live site. You can see the integration on Shopify’s video here:


 

The reason I suggest that this is more interesting now than at the time of its release is that, since June of 2021, the Microsoft owned GitHub has introduced Copilot which is its OpenAI powered AI coding assistant. While Copilot isn’t sufficiently advanced to write code in its entirety, it does perform well as a sounding board for developers - and an easy way to complete simple but time consuming tasks.

So, while this was an important announcement at its moment of release - it may yet be one of the most important integrations to come from the whole Shopify 2.0 rollout. AI integration is a long way from a panacea (despite what LinkedIn tells you), but it is useful now and is only going to improve over time. At the point of writing, for example, some 40 to 60% of all code is generated by Copilot in editors where it is used.

Shopify CLI (Command Line Interface)


Despite occasional forays into Python, the command line is still a foreign place for me - but for skilled coders (whose number I am not among) the Shopify CLI is again designed to help speed up the process of building, iterating and launching new apps, extensions and themes.

According to Shopify, the new CLI helps speed up such processes because:

  • Developers can safely develop, preview, and test changes inside development themes
  • It’s possible to hot-reload CSS and Liquid section changes during development thanks to new dev servers
  • New theme projects can use the new Dawn theme as a starting point to reduce friction and get new Open Store 2.0 themes launched quickly
  • Developers can both push and publish themes directly from the command line
  • You can now easily run Theme Check (see Theme Check section) on your theme
  • Test data for your theme can be easily populated - including products, customers, and draft orders

Development themes


These hidden, temporary development environments are short term, do not count toward your theme limit, are connected to the theme you’re working on, and are safe areas for you to experiment in real time with themes - if there are small changes you want to make quickly (though you’ll want to use something else if it’s going to take a bit of work as they are deleted whenever you log out or after 7 days of inactivity).

Again, Shopify emphasised that the purpose of this introduction was to improve ease of use, staying:

“These tools are designed to make your development process easier, and get you up and running with Online Store 2.0 quickly.”


Theme Check


While I imagine many developers will be debugging elsewhere (especially those with Copilot), Shopify 2.0 also brought with it Theme Check a language server for Liquid and JSON which scans themes for errors (in my case, the inevitable missing bracket that has been the bane of any script I’ve written for a decade).

The tool can also be integrated, according to Shopify, with text editors such as Visual Studio Code, and is capable of identifying several types of issues - including Liquid syntax errors (damn you, brackets *shakes fist*), missing templates, performance issues, and more.

You can see (but not hear, for some reason - it looks like there should be sound, but there isn’t) the tool in action here:

 

5. A new reference theme


Dawn is referred to constantly (and linked to variously) throughout the announcement - and for good reason. This theme, according to Shopify’s claims, resolves several long-standing issues with Shopify stores.

To begin with, the new theme is focused on achieving a better speed - loading 35% faster than the most common default theme Debut, which Shopify state is used by more than half of merchants on the platform.
Secondly is the use of semantic markup - though the blog doesn’t elaborate, I’m assuming here (as I’ve not heard of huge leaps with Shopify’s schema) that it’s referring to replacing standard <div>s and <span>s with elements that communicate information about the content within them (think <article>, <aside>, <form>).

While this is unlikely to boost a site’s visibility (John Mueller has already stated this is not a ranking factor) it will allow the various bots that constantly crawl the web to better understand your website - which can mean that it’s easier for search engines to match your page with queries.

This was a big step forward for Shopify - which has had a long way to go on semantic markup and structured data for some time. If used properly and combined with schema markup - whether manually or via an app - this could help Shopify merchants take advantage of the growing importance of structured data (especially as ‘AI’ assistants will increasingly be using such data for context).

On the announcement blog, Shopify published the following when discussing the theme:

“Dawn is Shopify’s first source-available reference theme with OS 2.0 flexibility and a focus on speed. It is built with semantic markup with HTML and CSS, instead of leaning on polyfills and external libraries, to create great experiences on all browsers. It’s designed to maximize flexibility while minimizing complexity, which means balancing being opinionated with our design with allowing merchants the space to make changes that they deemed fit for their business.”

 

Shopify Reference Theme

 

6. The Shopify Theme Store reopening


Another big announcement for merchants without the resources to employ a developer was that the Theme Store was to reopen (having been closed in 2018) - allowing merchants to choose a starting point closer to their ideal from which to start their customisation. Their pitch to the potential developers of these themes? The following:

“With millions of merchants using Shopify to run their businesses, now is the time to build themes for these global entrepreneurs. The Shopify Theme Store has been closed since 2018, so this is an opportunity to get in early and establish yourself as a trusted theme developer.”



Since its launch there are now more than 130 paid themes, with more than 10 available to use for free - meaning that not only are merchants spoiled for choice, but that the theme store has become an active and vibrant part of the wider Shopify ecosystem. 

 

Migrating to Shopify 2.0


There have been no announcements suggesting that support is set to end, and their own support page states the following:

“Upgrading to Online Store 2.0 isn't mandatory. Merchants can continue using a vintage theme if it meets their needs.”


However, the Online Store 2.0 (Shopify 2.0) features are not available to merchants using the older version, meaning that those merchants are likely missing out on dozens of ways to improve performance both in terms of sales and customer satisfaction. For that reason, Velstar has begun to encourage merchants with older sites to begin migrating to the platform’s new iteration.

Shopify has provided the following advice for migration to 2.0:

  • Download an Online Store 2.0 theme from the Shopify Theme Store: Update the look of a store and get access to new features by downloading a new theme from the Shopify Theme Store.
  • Download a new version of a theme: If a theme offers an updated version that uses Online Store 2.0, then you can add the latest theme version to a store manually.
  • Migrate a theme manually: Add Online Store 2.0 functionality to a theme by converting a Liquid template into a JSON template, and moving any required Liquid code or HTML into sections that you can include in the new JSON template.


This advice, however, is probably only applicable to merchants that have made minimal changes to their themes and which use few integrations and apps. There is also, however, an assessment table provided (pictured below) and you can find the linked version here.

 

Shopify Migration Assessment Table

 

One of the easiest ways to decide whether or not you’ll need help from a developer for your migration is to check Shopify’s migration documentation for developers. While it’s an informative and reasonably comprehensive guide to the process, and one which I could probably just about follow for a fairly simple site, I would be loath to attempt this myself for anything more complex than a mildly customised version of the Debut template - and in that case, I could probably reasonably suggest moving to the Dawn template and making such modifications again.

Your mileage may vary, but for most large retailers, I’d suggest - at the very least - having developer oversight for any such migration of a more complicated or bespoke site.

Success Story


Since the launch of Shopify 2.0, we’ve handled several migrations - among the most illustrative of its benefits, however, has been the work we’ve undertaken for Kelly Loves.

Relatively new to the UK, Kelly Loves was growing quickly and wanted their web presence to better serve their customers and provide them with the best UX possible while also facilitating their continued growth.

As such, we worked with the brand both on the development of a new Shopify 2.0 site and also for ongoing work on their site content. Since their February launch, their site has gone from strength to strength, growing its traffic, its visibility, but also its profitability.

 

Visibility


While there are a number of factors at play in lifting the visibility of the Kelly Loves website - the efforts of our SEO and content teams and the quality of the product improving its link profile being just two - there can be little doubting that the site experienced a significant jump in visibility following its shift to Shopify 2.0.

 

Shopify Success Story

 

Design and development


Our design and development teams are always sensational, but the additional customisation facilitated by the Shopify 2.0 platform allowed them to create a site which was both entirely on brand, but also chock full of features, easy to use and enticing for the end user.

 

Kelly Loves Homepage

Not only were the pages designed for the best possible user experience, and tested thoroughly to ensure they allowed for the easiest customer journey, the platform’s overhauled architecture and usability features allowed the team to move at a blistering pace as new features complemented the experience and skill of our team to allow for a quality build at speed.

 

Kelly Loves PLP

 

Core web vitals


One of the most common historical issues with Shopify as a platform has always been its performance against key SEO metrics such as core web vitals - however, the new Shopify Plus 2.0 site for Kelly Loves managed to combine the use of key apps, native functionality and custom code to produce a site that clears even the more recent and more stringent performance requirements.

 

Shopify Core Web Vitals

Post launch conversion figures


Great design and build are obviously important to any brand, but what matters most of all is its impact on the bottom line. While conversion tracking previously had been patchy, the new site - built with measurement in mind - offered the following insights into the performance of the site’s capacity to convert:

  • 1.8% conversion of product viewers
  • 19% conversion from added to basket
  • 42% conversion of checkout process

What’s next for Shopify?


It’s been a weird few years for everyone (he says, making a pitch for understatement of the year) and Shopify is no exception - their stock price ballooned during the ecommerce panic of 2020, then it returned to pre-pandemic levels when everyone calmed down a little; they moved into logistics and realised, like many who have worked in logistics, that it’s really hard, and then moved straight back out.

So, to quote the final words of Pink Floyd’s Keep Talking ‘where do we go from here?’ There is very little doubt that Shopify, Canada’s largest business by market cap, is around for the long-haul. It’s a hugely successful platform that provides enormous benefits to millions of merchants and their customers. So the first thing we can say definitively about the future of Shopify is that there definitely is a future for Shopify.

The next thing we can say is that Shopify is on a collision course with Amazon in a number of areas - which recently included that brief foray into logistics, but also latterly with the ‘Pay with Prime’ dispute that took some negotiation and about 12 months to resolve. However, despite a turbulent relationship, closer integration with the largest marketplace in the world seems to make sense for both platforms and so the near future for Shopify is likely to include improvements to integrations with external marketplaces, allowing you to better and more seamlessly sell from your Shopify store anywhere on the web.

For the short-term, however, thankfully we have Shopify Editions to offer a little insight - and their most recent publication (Winter 2023) provides the following key mission statements: -

  • Boost conversion: From fast and frictionless storefronts to a more streamlined checkout, we’re making it easier to seize every sale and convert customers.
  • Sell across channels: Sell in person, on social, or online with deeply integrated sales channels. Be everywhere your customers are, and easily manage it from one central platform.
  • Go global: Selling internationally has never been more within reach. With updates to Shopify Markets and the introduction of our full stack solution Markets Pro, it’s more possible than ever to rapidly expand to new markets from a single store.
  • Expand with B2B: Since launching 6 months ago, we’ve already improved B2B on Shopify with dozens of enhancements. We’re harnessing what we know from running the world’s leading direct-to-consumer (DTC) commerce solution to continually make business-to-business (B2B) selling better.
  • Find & engage customers: In this competitive landscape, it’s important to create strong customer relationships. Make your marketing budget go further with the right tools to target, reach, and re-engage high-value customers.
  • Fulfill & deliver: No matter what fulfillment looks like for your business, we’ve got the simple and affordable logistics solutions you need.
  • Run your business: Managing your business can be challenging and time-consuming, but Shopify makes it easy with powerful management tools that help you do more with less.
  • Build with us: Built by developers for businesses of all sizes, the Shopify platform is always evolving. Our latest releases help speed up your build and give you more ways to customize commerce.
  • Choose your components: The Shopify platform is built on a collection of underlying components that power millions of businesses around the world. Now we’re making those components available to the world’s largest retailers.

This collection of statements, while a little opaque in blurb form (the document does, in fairness, expand) essentially represents the platform's continued aim to become central to each part of a merchant’s business. It’s as you would expect for a platform that has established such a sizable market share - its existing customers are now a larger potential revenue stream than new customers.

While for Amazon that has meant cloning merchant products and squeezing its customers for ad revenue, for Shopify this requires them to produce viable integrations and improvements to keep merchants growing and, as a result, increasing Shopify’s revenue from its fees.

Whatever happens, it’s going to be a very interesting time for Shopify over the next 2-3 years (which will take it to its 20th birthday) - no doubt with plenty of new integrations and a lot of AI with varying degrees of usefulness.

Final thoughts (TL;DR)


All in all, Shopify 2.0 is a huge effort to increase the ease of setting up and moving to Shopify. With developments aimed at making it easier for merchants to set up independently and to provide developers with the tools to work more efficiently.

The improvements aim to tackle several longstanding weaknesses of the platform, and close the gap in general performance with more traditional CMSs such as WordPress.

The updates also allow for ongoing improved performance without need for another major overhaul, meaning Shopify 2.0 stores are likely to be futureproofed for at least the next five years - though I’d expect to see work on the platform's next iteration beginning on or before its 20th anniversary.

Migration is necessary to unlock the new features, and serious work has been done to make it as simple as possible for smaller retailers to do so manually and for larger retailers to achieve migration without the need to rebuild complex sites from first principles.

Merchants can expect more and better integrations to arrive both natively and from partners and further efforts to overcome known issues with the platform (speed, SEO visibility, structured data, for example) and for a shift to Shopify 2.0 to benefit them in both short and mid-term performance.

The future looks bright - despite uncertain market conditions - and if you’d like to speak to a team of dedicated Shopify experts, you can get in touch with us today and we’ll see what we can do.

 

Resources

The Hub