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