Shopify Guide: Online Store 2.0

Shopify Guide: Online Store 2.0

Jun 30th 2021 - 9 minute read

Released Yesterday from Shopify Unite

Over the past year, the online structure of the retail industry and the commerce industry has evolved drastically. It’s only natural that e-commerce platforms such as Shopify should evolve with the changes that have taken place. The goal for Shopify is as clear as ever. Their mission is to give entrepreneurs certainty and independence when reaching for opportunities that only they can see.

We’re so excited to be able to bring you the latest information from Shopify Unite. From the principles which make everything possible, to the new developer tools, themes and website configurations that now make the platform even easier to operate, here in this article is where you’ll find the latest news discussed by the team just over 24 hours ago.

Shopify is an e-commerce platform that sees itself as an essential commerce infrastructure that allows hundreds and thousands of people to participate in its ability to transform an online business. There is an interplay between the evolving platform and the ecosystem of partners, designers and app developers on the other side.

We are all combining our forces to enable merchants to reap the most benefit from the platform and success. So, sit back, take notes and read through our Shopify guide to discover what the latest updates are to hit the e-commerce platform.

Evolving Developer Tools

Before we delve into the crux of what’s new, 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. This was initially created in an attempt to allow Shopify Theme Development marginally easier. Speaking for our team of 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 SSL’s, SASS failing to compile and a lack of updates alongside several other issues that required immediate attention before further theme development could be completed. These issues made Slate feel incomplete as a developer tool.

Slate used Themekit at its core to deploy and sync themes during the stages of development. Whilst we found this to work with the correct documentation and regular maintenance, unfortunately Themekit in our opinion was not fine tuned to the standard that it could be resilient enough to be referred to as a “developer tool" in the Shopify armoury, but if we had to pick an overall winner we’d say that this had the edge over Slate.

Long and short was the theme development and before Unite 2021, we feel that it was awash with technicalities and nuances to overcome. Thankfully, Shopify have released a plethora of tooling specifically with developers in mind. Here’s a quick overview of the updates that were announced by Shopify Unite:

N0.1: Github Integration - 🚀

One of the most useful updates which Shopify has released is the new integration with Github. This will allow you to continuously pull changes to your store themes. This means that collaborating safely with native support for version control is now possible, whilst maintaining the ability to implement workflows where changes must be reviewed and merged on GitHub before populating to a live theme.

N0.2: Back and Forth Sync with Git - 🎉

Syncing with GitHub will also allow you to share preview links from your local server without manually syncing or pushing zipped files. In other words, collaborating with your clients and team couldn’t be any easier.

From a Shopify Agency point of view, say bye bye BitBucket and hello GitHub.

N0.3: Hydrogen -

While the Storefront API is the powerful source behind a store’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 customers. So what might a “batteries included” web storefront solution look like? With Hydrogen, we can find out.

Hydrogen’s quick start environment provides an approachable path for web developers to build custom storefronts efficiently. Iit is a developer toolkit that includes the necessary scaffolding and components to help you build the foundation of your commerce website in just a few clicks. This has been curated in mind so that developers can focus on designing the features that make a merchant’s brand 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 uses all of the new features available in Online Store 2.0, while maximising flexibility for merchants.

N0.5: Section Based Templating -

Themes have now been transformed to fully modular, as all of the theme’s Liquid code can be found in JSON templates, which are available across the online 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 a store without the assistance of a developer. From the sections on the page to how every setting is configured, these templates further define the structure of a page, and everything in between.

N0.6: Modularity -

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 them to manage apps directly from within the theme editor. 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. Since it’s no longer necessary to open up the theme code in Shopify to manually install your app, you don’t have to worry about breaking changes being introduced. So, the outcome here means less time troubleshooting with users.

3 Guiding Principles

Make commerce creative, easy and make everything possible.

Online Store 2.0

The following 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.

Themes

In 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. You can then take these sections and use them to build your online store.

This gives merchants the ability to arrange their store design however they like without having to know or use code once. To make this possible, Shopify has had to change how themes are structured.

New Theme Configuration

As you’ll come to understand within this Shopify guide, templates play a huge role now, 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. You can also add multiple template files, mapped products and different collections. These templates are available across the online store, which means that sections are now everywhere.

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.

They are really powerful because they give merchants a granular way of customising the layout of their Shopify store.

Inside the Editor

Within the editor, the template feature can be seen front and centre of the page. Once here, you will notice that you 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 your product pages should you need to. Every section of the new template is managed in the left-hand sidebar, which means that it is now really easy for you to navigate while you edit a product page.

You can customise the sections on your page according to what is relevant in terms of the products you are selling. For example, if the products you’re selling are handbags, you could add a section at the top of the page to show the product’s dimensions and materials.

The sub-items in the navigation menu on the left-hand side are blocks, you can add, reorder and configure them independently, so by dragging and dropping you can personalise your page.

Store Content

After adding sections and blocks to a web page, it’s important to fill your store with the right content to attract customers. Otherwise, your shop could look a little bland, so it’s time to get your brand in there.

Meta Fields

It’s important to Shopify that you can store whatever data that you would like to display on your online store. So alongside Online Store 2.0, they’re also shipping a major update to meta fields.

Not only can you define and edit meta fields directly in the admin, but you can also bind data sources to sections that can be found directly within the editor. So now there are no more hardcoding meta fields in the themes. Aren’t you glad you clicked on this Shopify guide? There’s so much newness and we’re excited to go through everything with you.

Settings Panel

From within the settings panel, you 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 you can make sure that whatever is entered here is in the right format.

Once a new meta field definition has been created and added to your products, your team will be able to access this directly from the product page whenever they are entering product information.

This ability to add new attributes to products changes the way that data can be stored inside Shopify. You can host data of any format inside one platform. Metafields are going to be a really important part of Shopify going forward.

Meta Field Infrastructure

The new meta field infrastructure not only lets you extend your Shopify models, but also powers a new content management platform. Content is very important for expressing a shop’s brand so soon you will be able to create entirely new custom types modelled using meta fields.

You’ll be able to publish content once and publish it to all of your channels including the online store. As this content is already within Shopify, you can easily connect this to other parts of the e-commerce platform.

If you’re working with CMS Shopify will be looking at this to make it easy to integrate here, but there will be more information to come on this topic a little later on this year. So, stay tuned for updates.

Editor

When you switch to the editor, you’ll notice the handy data icons on all of your section settings, these will let you connect a newly created meta field to this part of the section.

Now each product using this template will show the right dimensions automatically. So, you can do this for your products too. Of course, you can configure one for shoes, apparel products or whatever it is that you’re going to be displaying on your online store which is tailored to the type of product you’re displaying.

But it’s not just product pages that are this way, it’s pages and collections too. All these parts of the online store now have templates that merchants can customise.

Theme App Extension

Apps provide a lot of functionality to the online store, so Shopify has created a new theme app extension. With Online Store 2.0 a theme is now a set of separate components. This separation makes it possible for apps to contribute their sections and blocks without having to touch a theme’s code.

Before Online Store 0.2 merchants would have had to open the editor and add code directly into the theme, which is intimidating if you don’t know how to code and what's more, it sticks around after the app has been uninstalled.

Now apps can contribute liquid in the form of their app blocks. When an app is installed in a store, any app blocks that have been declared will become automatically available within the theme editor.

Theme App Extension Structure

Last but not least within this Shopify guide of new features is the theme app extension. This is structured like a miniature theme. There is a folder containing the blocks, but there are also other folders, assets and snippets that allow merchants to ship everything including liquid and assets in one go. It’s all managed by the platform so it would seem that the app blocks are the way of the future.

If you fancy watching Shopify Unite 2021, don't worry you haven't missed it. You can watch it on demand below;

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!