website design mockup

April 13, 2022

What is Shopify Online Store 2.0?

Shopify, one of the most popular and user-friendly eCommerce platforms, is championed for giving business owners the autonomy to customize and manage their online stores with little to no coding knowledge. Shopify themes are easily customizable to fit your branding, product type and customer needs. However many merchants complain about a lack of flexibility when customizing themes. In order to address some of these concerns, Shopify announced the Online Store 2.0 theme standard in their annual product update in June 2021. In this article, we’ll do a deep dive to understand what the difference is between the new Online Store 2.0 standard and old themes, what features are included, and what to consider before upgrading.

What is Online Store 2.0?

Online Store 2.0 is the new Shopify theme standard. Shopify reimagined the theme architecture from the ground up to make themes more modular and flexible. Merchants can pick and choose the elements to include on each page and increase personalization without having to touch code.

Older themes, which Shopify refers to as “vintage themes”, were built to be familiar to developers and easy to make custom-code changes. But it was difficult for merchants to change more than what developers had built in in the theme editor. Many custom features merchants wanted in their store had to be custom-coded. They would need to hire a developer, which went against the DIY changes Shopify intended to give to merchants. 

In the Online Store 2.0 theme standard, the theme consists of a layout file similar to vintage themes. This layout file renders all the common code that is used throughout the website, such as the header, footer and any app snippets that are applied across the whole storefront. Each template is written with a set of instructions to describe which sections it will use. Every page consists of a list of sections that can be easily added and taken away. It translates nicely to the theme editor and makes building themes for developers and editing themes for merchants much more flexible and streamlined.

What features come with Online Store 2.0?

There are a number of improvements in addition to the new way that themes are built. These are sure to make your life easier when working on your theme on a day-to-day basis.  

You can customize (almost) every page 

Some vintage themes have the ability to add sections – but only on the home page. It looks like the image below, where you click on the “add section” button to select between a few sections. However on other pages you were at the whim of how the developers originally built the templates. Merchants could only change certain settings within a template, but could not add or remove sections without going into the code.

Now with Online Store 2.0 you can add and remove sections in almost every page. You can now fully customize the home page, product page, collection page, collections list, blog page, cart page and other informational pages. The only page you cannot add sections to is the checkout page, which is a locked page for most Shopify plans except Shopify Plus.

Example of vintage section-themed

Add apps directly into your theme with app sections 

A common merchant complaint is that many apps hand off the responsibility of managing app code snippets in the theme off to the merchants. When you delete an app the code snippet in your theme is not automatically removed. This can slow down your store unnecessarily because the app code is still loaded in. Down the road, there may also be theme conflicts that break the storefront all because of that forgotten code snippet.

This happened to a client of mine that had switched subscription apps. The old app snippets were conflicting with the new one and prevented the new subscription app’s checkout to be shown.

A new feature that was introduced is the concept of app sections within Online Store 2.0 themes. This makes storefront apps act like any other section you may add. App sections are self-contained so there are no app snippets to put into your code. If you remove an app section there are no remnants of the app. App sections also help to speed up app loading times. App assets such as styling files are integrated into Shopify’s hosting platform instead of loading from the app’s servers. This means a faster loading time for apps and a faster storefront overall. Online Store 2.0 is still new so not all apps have adapted to this new format. But many popular ones have adapted such as Judge.me, Loox and Tidio. You can see the full list of online store 2.0 compatible apps here 

What does this look like? 

The first step is to install an app from the Shopify app store. I will choose Judge.me, a popular product reviews app. Then I go to my Online Store 2.0 theme editor area. If I click on “Add section” and scroll to the bottom, I see all the app sections that I can install from Judge.me! This is much more user-friendly to merchants and saves time and stress of having to go into the theme files.

Example of how to add app blocks into a theme with the Online Store 2.0 theme editor.

Add flexible store content to your themes 

With Online Store 2.0, you can show metafields – extra information about a product – in your storefront. For example, if you sell clothes, you might want to provide additional information about how to wash an item. You could create a metafield called “washing instructions,” and reference it in your theme. Shopify introduced Dynamic Sources within Online Store 2.0 themes. Once you create a metafield, you can reference the metafield in your theme if you see a little icon in the right corner of fields. This will connect your metafield to this field in the theme and show the metafield’s value on the storefront.

What a dynamic source icon looks like in the theme editor Online Store 2.0

This means you can input different washing instructions for each product but the information will show up in the same place. This gives even more freedom to merchants to customize every page in a standardized way. This helps customers understand the products more and keep the Shopify backend organized.

Why is Online Store 2.0 important for your business? 

Online Store 2.0 themes are the future of Shopify. Moving to an Online Store 2.0 theme might be for you if you struggle customizing your theme to your liking. Additionally, upgrading to an Online Store 2.0 theme could help improve your store speed. As mentioned before, apps can be loaded faster thanks to the introduction of app sections. Shopify also released an open source Online Store 2.0 theme called Dawn which was developed with performance in mind. Many theme developers have built upon the Dawn theme in their upgrades to take advantage of the performance optimizations.

Let me be clear – you don’t HAVE to switch to an Online Store 2.0 theme if your vintage theme works perfectly fine for you and your business. However Shopify built this new standard to improve merchants’ lives so exploring this option might improve your business in the long run.

How do I switch over to an Online Store 2.0 theme? 

Many popular theme developers such as Out of the Sandbox and We are Underground have upgraded their themes to be compatible with Online Store 2.0.  If you use a theme from Shopify or one of these companies, you can directly upgrade your theme using their theme upgrader app or by downloading the newer theme onto your store. If you want to switch over to a new theme, the Shopify theme store has over 70 Online Store 2.0 themes at the time of writing.

However the amount of work required to switch between themes depends upon how old your theme is. If your theme is older than 4 years old you might have to manually transfer settings. It might not be possible to use a theme upgrader app because the files are completely different from the two themes.

Ready to switch over to Online Store 2.0? 

Shopify’s new Online Store 2.0 theme standard is designed to make merchants’ lives easier when customizing the storefront. You can decide exactly what to change on each page, as well add apps directly using app sections. You can add metafields to your collections, products, variants and orders to give customers important information and reduce repetitiveness on the backend. 

If this article has convinced you that Online Store 2.0 would make your life easier and your storefront faster and cleaner, get in touch with us at Plentiful Commerce. We can help you upgrade quickly and hassle-free without any disruption to your current operations. 

Join the Plentiful Commerce newsletter!

You'll get bi-monthly emails full of useful information you need to know to improve your Shopify store and get more sales. These can include blog posts, latest Shopify news, optimization tips, and client success stories.

* indicates required

Leave a Reply

Your email address will not be published. Required fields are marked *