Shopify Guide: Online Store 2.0

OS20 Shopify Guide 🔥

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 such as Shopify should adapt to the changes that have taken place and why it is important for experts like us to share the latest updates with you in a Shopify guide.

The goal for the future of the Shopify theme structure 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 with a new and innovative Shopify design foundation.

Naturally, there is an interplay between the evolving platform for Shopify stores 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 Shopify 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 for Shopify Stores

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, Shopify 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 and designers 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 Shopify theme development could be completed.

Needless to say, this made Slate feel incomplete and rather problematic as a Shopify design and developer tool, but enough of the heavy. Let's move onto the positives within today's Shopify guide.

Slate utilised Themekit at its core to deploy and sync themes during the stages of development and 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 'Shopify developer tool' in the platform's armoury.

However, if we had to pick an overall winner we’d say that this had the edge over Slate.

Long and short was Shopify theme development and before Unite 2021, it was awash with technicalities and nuances to overcome.

Thankfully, the Shopify design team at 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 the Shopify design team released is the new integration with Github. This integration allows merchants to continuously pull changes to a Shopify 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 -

It's important to note within today's Shopify guide that syncing with GitHub also enables 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 on a Shopify store.

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 Shopify 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 Shopify storefronts efficiently.

Essentially, it is a Shopify 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: The Dawn Shopify Theme -

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 Shopify sites 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 of a Shopify store, which has unlocked a huge range of new opportunities for merchants to personalise their stores without the assistance of a Shopify developer.

With endless sections on the web page to how every setting is configured, Online Store 2.0 Shopify theme designs further define the structure of a page and everything in between.

N0.6: Modularity -

Simply put, the latest Shopify theme app extension implemented has completely changed how merchants interact with an app in the storefront, which is well worth a mention within today's Shopify guide.

In a nutshell, this means that merchants will now be able to easily integrate an app into their Shopify theme without touching code via an app block Liquid file.

This particular file will allow users to manage apps directly from within the Shopify theme editor and if they choose to uninstall an app, ghost code will be automatically removed.

Theme Architecture 🏗️

Next up in today's Shopify guide, we are going to be discussing all things related to the theme architecture of Online Store 2.0.

If you’re a little hazy on how Online Store 2.0 is different from other Shopify themes on the e-commerce platform, this tutorial will clear things up.

Discover what makes the Online Store 2.0 Shopify 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 Shopify theme editor more powerful and customisable for stores on the platform, listen to ShopifyDevs on YouTube, where all things Online Store 2.0 are discussed:

3 Guiding Principles

Make Shopify commerce creative, easy and possible.

Shopify Store Infrastructure 🛠️

Shopify's mission is to empower creatives and due to the inventiveness of Shopify developers, the designs for stores on the platform are increasingly advanced.

The biggest and boldest upgrade that the platform has ever shipped to Shopify stores gives power back to the merchant to build their storefront, so this point had to make a feature within today's Shopify guide.

Online Store 2.0 Shopify Themes

Alongside the innovative features mentioned above within today's Shopify guide, the following Online Store 2.0 Shopify theme elements have been rebuilt and re-imagined with Shopify websites in mind;

N0.1: Shopify Themes and the Editor -

Merchants come here to configure their Shopify store’s design.

N0.2: Shopify Store Content -

This is what populates a store’s Shopify design.

N0.3: Shopify Developer Tooling -

This is a great way to be more productive and offer new e-commerce platform features when building a Shopify theme or app for your online store.

Shopify Themes 🎨

With this new update, Shopify themes are now completely modular and are composed of reusable sections, so they’re kind of like an online store’s lego bricks.

Shopify store owners 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, the platform has had to change how Shopify themes are structured:

New Shopify 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 across each Shopify design.

Now all Liquid code within a Shopify theme is contained within sections. Additionally, merchants can also add multiple template files, mapped products and different collections to their store.

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 Shopify Store Editor 🖱️

The next touchpoint within today's Shopify guide is the store 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 Shopify design templates per page to choose from.

On the product page, a default Shopify design option 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 Shopify store owners 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.

Shopify Store Content

The next section within today's Shopify guide is all about adding the right content to your Shopify store.

After adding sections and blocks to a web page, it’s important to fill a Shopify 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 Shopify themes.

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 Shopify themes.

Aren’t you glad you clicked on this Shopify guide? There’s so much newness and we’re here for it.

Settings Panel

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 Shopify support 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, Shopify 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 for Shopify sites 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.

Shopify stores will also be able to publish content and share it to all channels including their online store.

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.

Shopify Store Editor

When users switch to the Shopify store 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.

Shopify 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 Shopify 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 Shopify design templates existed, 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:

Shopify 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 Shopify 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 to Online Store 2.0? 🤔

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 Shopify themes on the platform?

Personally, we think it’s completely bonkers not to take the plunge and upgrade a Online Store 2.0 Shopify design.

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 Shopify 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 an Online Store 2.0 Shopify Theme?

There are two main ways in which merchants can upgrade to an Online Store 2.0 Shopify theme, 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 Shopify design, a team of Shopify experts 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 Shopify 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 Shopify design, Online Store 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.

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 to Online Store 2.0? 🏠

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-Shopify store to Online Store 2.0 after reading our Shopify guide?

Fancy Another Article?

We're all talked out on this topic, but we hope that you have found our guide to Online Store 2.0 useful.

We've got a lot more to say in our guide to browsing the Theme Store by Shopify features. So, if you fancy another article, dive straight in.

If 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!