Shopify Guide: Online Store 2.0↘
Released Yesterday from Shopify Unite 🔥
Over the past year, the online structure of the retail industry and the commerce industry has evolved drastically. Therefore, it’s only natural that e-commerce platforms like Shopify should adapt to the changes that have taken place.
The goal for Shopify is as clear as ever, as the platform's mission is to give entrepreneurs certainty and independence when reaching for opportunities that only they can see.
So, for today's article, we’re so excited to be able to bring you a fresh Shopify guide that contains the latest information which was released only yesterday from Shopify Unite.
As you will discover within today's Shopify guide, the solution is an e-commerce platform that sees itself as an essential commerce infrastructure, allowing hundreds and thousands of merchants to participate in its ability to transform online businesses.
Naturally, there is an interplay between the evolving platform and the ecosystem of partners, designers and app developers and as a result, we are all combining forces to enable merchants to reap the most benefits from the platform.
So, before we delve into the crux of the new developer tools, themes and website configurations that make the platform even easier to operate, sit back and take notes to discover the latest updates featured within today's Shopify guide:
Evolving Developer Tools
To kick off our latest Shopify guide, let’s take a quick look at how the developer tools have evolved, from where they were to where they are now.
In the past, developers had Slate at their fingertips, which was initially created in an attempt to make Shopify theme development marginally easier for users to manage.
However, speaking for our team of expert Shopify developers here at Karmoon, we can honestly say that whilst this did assist with the mission at hand, Slate was consumed by its wrath.
Such issues that stood out for us were; faulty SSLs, SASS failing to compile and a lack of updates alongside several other issues that required immediate attention before further theme development could be completed.
Needless to say, this made Slate feel incomplete and rather problematic as a developer tool.
Slate utilised Themekit at its core to deploy and sync themes during the stages of development.
Whilst we found this to work well with the correct documentation and regular maintenance Themekit was unfortunately not fine-tuned to the standard that it could be referred to as a 'developer tool' in the Shopify armoury.
However, if we had to pick an overall winner we’d say that this had the edge over Slate.
Long and short was theme development and before Unite 2021, it was awash with technicalities and nuances to overcome.
Thankfully, the team at Shopify have released a plethora of tooling options specifically with developers in mind which we will explore within today's Shopify guide.
So, with that being said, here’s a quick overview of the updates announced by Shopify Unite:
N0.1: Github Integration -
One of the most useful updates that Shopify released is the new integration with Github. This integration allows merchants to continuously pull changes to a store's theme.
This means that collaborating safely with native support for version control is now possible and so is the ability to maintain workflows.
N0.2: Back and Forth Sync with Git -
Syncing with GitHub will also allow businesses to share preview links from their local servers without manually syncing or pushing zipped files.
In other words, collaborating with clients and teams couldn’t be easier.
N0.3: Hydrogen -
While the Storefront API is the powerful source behind a website’s front end, a lot of work is involved in setting up a functional storefront that enables developers to start designing and building a unique buying experience for shoppers.
So what might a 'batteries included' web storefront solution look like with Hydrogen? Let's find out:
Hydrogen’s quick start environment provides an approachable pathway for web developers to build custom storefronts efficiently.
Essentially, it is a developer toolkit that includes the necessary scaffolding and components to help online businesses build the foundation of their commerce website in just a few clicks.
As we established earlier in today's Shopify guide, Hydrogen has been curated with developers in mind so that expert hands can focus on designing the features that make brands memorable.
N0.4: Dawn -
Dawn is Shopify’s first open-source reference theme, which has been built with performance in mind.
This ultra-lightweight, mobile-first theme effectively utilises all of the new features available in Online Store 2.0, while maximising flexibility for merchants on the platform.
N0.5: Section Based Templating -
Themes have now been transformed to fully modular, as all of a theme’s Liquid code can be found in JSON templates across a Shopify store.
This means that sections are now available on more pages than just the homepage, which has unlocked a huge range of new opportunities for merchants to personalise their stores without the assistance of a developer.
With endless sections on the web page to how every setting is configured, 2.0 templates further define the structure of a page and everything in between.
N0.6: Modularity -
Simply put, the latest theme app extension implemented by Shopify completely changes how merchants interact with an app in the storefront. Merchants will now be able to easily integrate an app into their theme without touching code via an app block Liquid file.
This particular file will allow users to manage apps directly from within the theme editor and if they choose to uninstall an app, ghost code will be automatically removed.
It's important to note that app blocks will create less support debt and since it’s no longer necessary to open up the theme's code in Shopify to manually install an app, merchants will not need to worry about breaking changes being introduced.
Theme Architecture 🏗️
If you’re a little hazy on how Online Store 2.0 is different from other themes on Shopify’s e-commerce platform, this tutorial will clear things up.
Discover what makes the 2.0 theme architecture different from the rest, alongside the purpose of meta fields and how you can use them within your own Shopify store.
Additionally, if you want to learn how these elements work together to make the theme editor more powerful and customisable for stores on the platform, listen to ShopifyDevs on YouTube, where all things 2.0 are discussed:
3 Guiding Principles
Make commerce creative, easy and possible.
Online Store and Infrastructure 🛠️
Shopify's mission is to empower creatives and due to the inventiveness of developers, the designs of Shopify stores are increasingly advanced.
The biggest and boldest upgrade that the platform has ever shipped to the online store gives power to merchants to build storefronts, so this point had to make a feature within today's Shopify guide.
Online Store 2.0
Alongside the innovative features mentioned above, the following Online Store 2.0 elements have been rebuilt and re-imagined with Shopify consumers in mind;
N0.1: Themes and the Editor -
Merchants come here to configure their store’s design.
N0.2: Store Content -
This is what populates a store’s design.
N0.3: Developer Tooling -
This is a great way to be more productive and offer new e-commerce platform features when building a website theme or app for your online store.
With this new update, website themes are now completely modular and are composed of reusable sections, so they’re kind of like an online store’s lego bricks.
Merchants can then take these sections and use them to build an online store. This gives retailers the ability to arrange their store's design however they would like without having to know or use code.
To make this possible, Shopify has had to change how themes are structured:
New Theme Configuration
As you’ll come to understand within today's Shopify guide, templates play a huge role in this update, from the structure of a web page, to how each setting is configured.
Now all of the theme’s Liquid code is contained within sections. Additionally, merchants can also add multiple template files, mapped products and different collections to their store.
These templates are available across an online store, which means that sections are now everywhere.
For those of you that don't know, sections are chunks of Liquid code and handy setting options, but if you look a little closer, you’ll see that the Liquid code also contains an array of blocks.
These blocks further break up a section and are also configurable chunks of Liquid code.
Ultimately, they are really powerful elements as they provide merchants with a granular way to customise the layout of their Shopify store.
Inside the Editor 🖱️
The next touchpoint within today's Shopify guide is the editor. Within the editor, the template feature can be seen from the front and centre of a page.
Once here, merchants will notice that they now have multiple template options per page.
On the product page, a default template will be offered, but it's super easy to go ahead and create a brand new template for a store's product pages, should you need to do so.
Every section of the new template is managed in the left-hand sidebar, making it super easy for users to navigate while a product page is being edited.
Merchants can also customise the sections on each page according to what is relevant in terms of the products being sold.
For example, if the products being sold are handbags, the merchant could add a section at the top of the page to show the dimensions and materials of each item.
Separately, the sub-items in the navigation menu on the left-hand side are blocks. Therefore, retailers can add, reorder and configure these elements independently, by dragging and dropping structures to personalise each page with ease.
After adding sections and blocks to a web page, it’s important to fill a store with the right content to attract customers.
Otherwise, online stores could end up looking a little bland, so it’s time to get your brand in there.
Meta Fields 💬
It should be noted within today's Shopify guide that users can store whatever data they'd like to display on site.
This means that the platform is also shipping a major update to meta fields alongside Online Store 2.0.
So, not only can users define and edit meta fields directly in the Shopify admin, but data sources can be bound to sections directly within the editor.
As a result, there are no longer any hard coding meta fields involved with themes on Shopify.
Aren’t you glad you clicked on this Shopify guide? There’s so much newness and we’re here for it.
Within the settings panel, merchants can either create a new meta field definition using a new set of types such as colour, URLs and more as well as being able to add validation and descriptions so that whatever is entered here will be in the right format.
Once a new meta field definition has been created and added to each product, your team will be able to access this directly from the product page.
This ability to add new attributes to products changes the way that data can be stored inside Shopify.
Furthermore, online stores can host data of any format inside one platform and we believe that meta fields are going to be a really important part of Shopify going forward.
So, when the future comes knocking, give some thought to today's Shopify guide and remember that you heard it here first.
Meta Field Infrastructure ⚡
The new meta field infrastructure not only allows users to extend their Shopify models, but also powers a new content management platform.
Content is very important for expressing a brand so, merchants will soon be able to create entirely new custom types using meta fields.
Stores on Shopify will also be able to publish content and share it to all channels including their online store.
As this content is already within Shopify, users can easily connect this to other parts of the e-commerce platform. Separately, it should also be noted that if you’re working with a content management system, Shopify will be looking to make this easy to integrate.
However, from what we've heard there will be more information to come on this topic a little later on in the year. So, stay tuned for updates with another Shopify guide.
When users switch to the editor, they’ll notice the handy data icons on all section settings. These enable users to connect a newly created meta field to this part of the section.
So, now each product using this template will show the right dimensions automatically and this can be done for products too.
Of course, retailers can configure one for shoes and one for apparel products or whatever it is that they’re selling.
Nonetheless, it’s not just product pages that have evolved, it’s store pages and collections too, as all of these elements now have templates that merchants can customise to their liking.
Theme App Extension 🧱
Next up in today's Shopify guide is the theme app extension.
See, apps on Shopify provide a lot of functionality to online stores, so the platform has created a new theme app extension.
With Online Store 2.0 a theme is now made up of a set of separate components. This separation makes it possible for apps to contribute to sections and blocks without having to touch a theme’s code.
Before Online Store 2.0 merchants would have needed to open the editor and add code directly into their theme, which is intimidating if you don’t know what you're doing.
What's more, is that it sticks around after the app has been uninstalled.
Therefore, apps can now contribute Liquid in the form of their app blocks. So, when an app is installed, any app blocks that have been declared will become automatically available within the theme editor.
We bet you didn't expect to discover this much newness within today's Shopify guide and it doesn't end there:
Theme App Extension Structure
Last but not least within today's Shopify guide is the theme app extension which is structured like a miniature theme.
With the theme app extension structure, there is a folder containing blocks, but there are also other folders, assets and snippets that allow merchants to ship everything including Liquid and assets in one go.
In a nutshell, all of these are managed by the platform so it would seem as though app blocks are the way of the future.
If you fancy catching up on Shopify Unite 2021, you can watch it on-demand below:
Is It Worth Upgrading? 🤔
So, you’ve got the facts in regards to what changes Online Store 2.0 has brought to the table from today's Shopify guide, but the burning question is - is it worth upgrading to one of the latest themes on Shopify?
Personally, we think it’s completely bonkers not to take the plunge and upgrade a theme to 2.0.
Why? Well, the way we look at it is that merchants who are considering the upgrade will already be utilising the e-commerce platform and the most logical move any businessman or woman will ever make is to benefit the future of their company.
So, why not upgrade your store’s theme and access features that are only available with Online Store 2.0?
Just remember that the; ‘sections everywhere’ layout, new meta fields integration, improved app integration and increased site loading speed are just some of the key attributes that your e-commerce site can expect to receive with Online Store 2.0.
There's more potential than you could ever imagine with this latest renovation and thanks to Shopify, it's possible to reach new heights with e-commerce in 2021.
Upgrading To Shopify 2.0?
There are two main ways in which merchants can upgrade to Shopify 2.0, but this depends on whether you are already using a theme that you are happy with.
If you’re thinking of sticking with an existing theme, theme developers will be required to release a version that is compatible with Online Store 2.0 by the end of the year.
Any customisations to the original theme will need to be moved over to the upgraded version, as the standard template coding language has been switched over from Liquid to JSON.
However, if you’re happy to move to a new design, 2.0 themes are becoming more widespread across the Shopify Theme Store so, it should be easy to choose a layout that has the right functionalities for your business.
As we mentioned earlier, Dawn is the theme that was created by Shopify to showcase the full capabilities and characteristics of Online Store 2.0.
So, if you want to see what the latest in tech can do for your Shopify store, why not give this theme a try?
Ready To Move? 🏠
For either of the upgrades above to take place, expert knowledge of Shopify’s platform will be required.
So, there’s just one question remaining - are you ready to move your e-commerce store to Shopify 2.0?
If the answer is yes or you’re actively looking to work with a Shopify agency designer or developer to assist you with your business, we’d love to hear from you. Get in touch to get started!