Shopify's Online Store 2.0
This article was written in September 2021 for Thought and Mortar. This and many other articles can be found on the Thought and Mortar website.
~
In June 2021, Shopify’s annual Unite conference once again saw the unveiling of numerous exciting Shopify updates. Although hosted online for a second year running, this year’s event has proven worth the wait with a multitude of exciting updates being announced.
In this article I'll be taking a look at the update we are most excited about: Online Store 2.0 (or OS 2.0 for short!).
Continue reading to learn about Shopify Architecture, Sections Everywhere, App blocks, Metafields, the new Theme Editor, Shopify CLI and the new Dawn theme.
Shopify architecture
Shopify’s new OS 2.0 is an extensive overhaul of Shopify’s core architecture, updating how themes are developed, managed and how they integrate with the other parts of your store. Before we dive in, it’s important to acknowledge some basic concepts regarding Shopify architecture.
A Shopify store can be compartmentalised into (at least) three key sections:
The Shopify admin – The Shopify admin is home to your store’s content, such as products, collections, pages, blogs and more. It’s also home to a large number of global store settings – think shipping rules, taxes, languages and checkout settings. No matter which theme is installed, all these settings and content types will remain unchanged.
Shopify themes – A shopify theme is essentially a collection of customizable templates that allow merchants to manage how store content is presented to customers on the storefront. Specific theme settings are responsible for the customisation of layouts, fonts, colours, styles, imagery, and the layout of reusable content blocks (known as Sections).
Apps – Perhaps an outlier due to being optional, apps are (usually) third-party applications that offer extended functionality to your Shopify store. They are traditionally managed within their respective app interfaces, meaning that settings tend to be global and not theme-specific. This last point, however, is soon about to change!
What’s new in OS 2.0?
Sections Everywhere
‘Sections everywhere’ is a term that has been on the lips of Shopify developers for over 2 years now – and they are finally here (almost)!
Sections are key components to any Shopify theme. They are small, modular, reusable blocks of content that are used to create custom layouts on a store’s homepage. Imagine you navigate to your favourite store – on the homepage, you might be met with a large image slider, a list of featured products, a promotional collection, a list of featured blog articles and so on. These are all Sections and, up until now, they have only been available to use on the homepage.
Historically, if you wanted the same Section-based content on both your homepage and product page, you frustratingly had to build it twice. The Sections Everywhere update solves this and takes a huge step towards increased modularity in Shopify and promotes the use of DRYer code (Don’t Repeat Yourself).
App Blocks
App Blocks are a bit like App-specific sections. In the past, app settings were only available via the app’s UI or within the code, and integrating an app into a specific part or your store might have required custom code changes from a developer.
With App Blocks, store owners will now be able to drag-and-drop app blocks around their store, just like sections, allowing them to dictate where the content lives in the page and update settings with the theme, resulting in new theme-specific settings. Again, this is another step towards modularity, making apps easy to install and manage, and also uninstall without any unwanted code spilling into your theme.
Native metafields
Metafields are extra pieces of data that are associated with various content types in Shopify, such as products, blogs, collections, customers and orders. Before the OS 2.0 update, metafields were something of a mystery to many merchants as there was no easy, native way to access them. When utilised correctly, they can vastly expand the functionality of a Shopify store.
Here at T&M, we have used various third-party apps to harness the power of metafields, but this often comes at a monetary cost and can sometimes feel unintuitive – we want to be able to update our Product’s metafields in the Product admin, not within a separate app.
And that’s exactly what Shopify's new metafields offer.
Configurable from the general store settings, users can now easily setup and use metafields without the need of an app. So far, the new Shopify metafields offer support for toggles, text inputs, file uploads and more. The full list of metafield types can be seen here.
These metafields are only usable with Products and Product Variants for now. However, Collections, Customers and Orders are coming soon.
Updated Theme Editor
With the OS 2.0 update, the Theme Editor has also received a fresh coat of paint.
Now supporting new features such as Sections Everywhere, App Blocks and the integration of Metafields, the updated Theme Editor also boasts a new layout, taking advantage of the screen real estate in wider viewports and now offers a more user-friendly UI.
Previously, the Editor was sometimes difficult to navigate due to menus within menus, but the new design now clearly divides Theme Settings and Sections/Blocks settings into different parts of the page.
Above: Sections on the left. Theme settings on the right. Template selection at the top.
Shopify CLI developer tools
There’s been a number of ways to approach Shopify theme development over the last few years. In the past, we have used Theme Kit, Slate and most recently Slater. Unfortunately, none of these have ever ticked all boxes – they are either too slow, inconsistent, or lack support.
We have always loved the idea of super fast, local Shopify development, and so were extremely excited when we were invited to assist in the beta testing of the new Shopify CLI tool.
Shopify CLI allows developers to work locally, seeing code changes update rapidly onto a temporary development theme. This temporary theme is hidden from the Shopify Admin but remains connected, allowing developers to access the theme’s settings within Shopify itself. Deployment to live themes is also rapid, with the Shopify CLI able to upload an entire theme in a matter of seconds. We are big fans.
Dawn
One of the biggest updates in the OS 2.0 overhaul is the new, standardised approach to theme building. This new approach is required to accommodate many of the new features available, so will quickly become the new norm. However, this does mean that older themes will need to be updated in order to benefit from these features.
For more details, Shopify has released full migration documentation here. Along with all the other Unite updates, Shopify also released a brand new OS 2.0 Theme – Dawn.
OS 2.0 is backwards compatible and supports all previous legacy features.
Dawn is the first source-available reference theme for OS 2.0. It’s built using the new Theme standards, using JSON templates instead of Liquid to accommodate the Sections Everywhere and App Block functionality, and is focused on flexibility, modularity and speed. By default, it's the fastest theme of its kind. Read more about Dawn here.
shopify.dev
For more information on all of the above updates and more, visit Shopify’s new, updated documentation. It’s very pretty.
Shopify's updated documentation – shopify.dev