What is Shopify's Online Store 2.0 Platform?

Before Shopify Online Store 2.0 was released, the Shopify CMS was fairly limited, whilst it was possible to edit the content of a theme, you could not create new templates or re-arrange the elements on a page (except for the homepage). The editor within Online Store 2.0 gives merchants full control over building new page templates, and storefronts and adding apps with ease to specific parts of their store. The main release is rolling out the ability to edit every page structure and not just the homepage! Shopify also offers features and capabilities with a focus on best-practice development to help those who build themes do so more efficiently. Online Store 2.0 by nature allows themes to run faster for example Shopify's original Online Store 2.0 theme used for reference is 35% faster than the current default themes on Shopify. Finally, Shopify has rolled out a wide range of tools to support developers in delivering an improved, consistent and reliable development service. Let’s dive right in!

A section is simply an element within a page such as a banner or a text section. Imagine each page of your website is split into parts, these are called sections. Shopify sections allow customers to build a page up of multiple sections, re-arrange them and assign content such as images and text to them. Historically, sections were limited only to the homepage - meaning on the homepage you can add, remove and rearrange sections on the page to keep the store looking up-to-date and fresh. Other page types such as product, collection and blog pages were fixed structures only and only the content itself could be edited. If you wanted to re-arrange, add or remove sections on other pages you'd typically require a developer to do this.

Shopify’s Online Store 2.0 updates brings sections to every page of a Shopify store, meaning merchants can add, remove and re-arrange sections throughout the entire site without a developer. This feature gives the control back to the merchant rather than being reliant on developers, for example, if you need to add a banner section that you have on your homepage to the bottom of a product page, you can simply do that directly through Shopify’s theme editor. This is because Shopify now uses a special type of code called json to store each section meaning they can be used across the store. JSON is used in the template files to structure pages such as the home page, product pages and collections. Merchants can easily set up different products, collections, blogs and page templates themselves within the same store without the need for a developer to add in the elements manually. Themes bought from Shopify's Theme Store typically come with a considerable number of different sections that you can use to build and construct your store from the ground up. Custom themes will depend on what you and your agency decide to build however we recommend designing and building a large number to future-proof your store.

So let's give you an example, let's say you wanted to launch a new product that needs to have an extra banner and an image slideshow on the page - but you don't want all your product pages to follow this layout. With online store 2.0, you can head into the editor and create a new template, From there you can pick and choose the sections that exist from around your store to begin populating an entirely new page template. This means you have complete freedom over your store and only require designers and developers when you want to build new sections or features that don't already exist to meet the needs of your business, a huge advantage for teams who want to move fast and can deploy a process that delivers the very best customer experience.

Before Shopify Online Store 2.0, the way that an app is embedded and interacted with a Shopify store was fairly set in stone and would be fixed in specific positions or hard-coded by a developer. Unless the app developer offers bespoke integrations or specific compatible settings - then the app will appear on your store where it was originally intended to. With Online Store 2.0, apps are delivered in moveable and customisable blocks called theme app extensions within a page giving merchants full control over exactly which pages it will display upon and also the location of the page it appears to. You can even update the app settings directly through the theme editor too! App blocks turn app functionality into a similar feel to how standard content is manipulated around a store. Not only does this give merchants much more control over where app features are displayed, but maximises the capabilities and possibilities for app developers to create and build features for merchants to use.

Metafields are extra pieces of data that can be assigned to specific parts of Shopify such as individual pages, customers or orders. Prior to Online Store 2.0 Shopify only allowed the page title and one single rich text editor for page content of any page, product or collection. But what if you wanted to add more specific fields or information to go in a specific space of the page like an ingredient list or size chart? Metafield apps were always the first choice to achieve this, however with the release of Online Store 2.0 - Shopify launched it’s very ownMetafieldd functionality that can be edited directly on the product, product or collection page without the need for APIs or third-party apps. Metafields even supports a wide variety of file picker types with Shopify’s files picker tool.

Metafields are pieces of data that are stored against a specific object in Shopify such as a product, collection, page or blog post. Sometimes you might want to store data against the store itself which you can then use universally across the entire store for example the different colour options a meta field selector has. Thanks to Metaobjects you add and store additional structured information for your store. For example, you can store information for a product, such as features, specifications, and size charts that might apply to multiple products and not just one.

It is so easy to visualise sections within a page with the “tree-down” view of collapsible sections - gone are the days of searching through a long list of sections to try and find the right one. In addition, further enhancements include the ability to add liquid theme code directly via the theme editor. Online store 2.0 is truly a beautiful way to edit a website, and it creates a no-code drag-and-drop style CMS store experiences and advanced customization options for merchants whilst still allowing developers complete control over the code without impacting site speed. You can also duplicate the theme to test data and be sure you are happy with the changes before you deploy.

Dawn is Shopify's original online store 2.0 example theme and is used as a starting point for many themes now. However, since it's launch all Shopify themes that are available in the shopify theme store library are os 2.0 compatible meaning merchants have complete access to the power content management system and the content of their store. Dawn is used as a reference theme on how to deploy online store 2.0.

Shopify uses its very own code language called ‘Liquid’ which is a type of templating language to form all the pages and functionality of a store. Liquid is the language that pulls together and structures the HTML and CSS of the webpage. With Shopify 2.0, Shopify placed vast investment into improving the way developers can code and build Shopify stores. Some developer features include integrating GitHub, a version control toolset, directly into Shopify, Shopify CLI, theme architecture, theme checking tools for debugging and finally the ability to add liquid code directly into the theme editor itself. The Shopify developer community is very large and a popular route for developers to follow as Shopify has placed huge emphasis on making the platform great to build store on. If a platform has a motivated development community this creates more opportunities to have amazing stores and an admin that is easy to use.

Shopify's checkout has received huge amounts of change over recent years with the ability for Shopify Plus merchants to customise it with checkout extensibility and use apps that add new features to checkout experience. Shopify functions was also released to allow developers to write code to change the logic behind the checkout for features such as discounting. Shopify also released their highest converting one-page checkout. Whilst not strictly part of Online Store 2.0, a great step toward allowing merchants to control the user experience for their customers & users. The debut introduction of updated checkout functioanality has been welcomed by the Shopify community allowing brands to deploy customisation and reduce errors and issues for visitors.

A solution that gives a merchants more control over store experience with less reliance on custom code from a theme developer is a massive win for brands. Test changes, use development themes, anything you can think is likely to be possible is the power So let's dive into the main benefits that Shopify's Online Store 2.0 has to offer!

Store owners have control over the layouts and content of the store with less reliance on developers. It puts the power back to marketing teams, so if they need to deploy quick updates then they can do it themselves faster.

Reduced development investment - online store 2.0 means that less of your development budget is being spent on populating page layouts as you can do it yourself within the editor. The budget can be spent elsewhere on improving the design, building new sections and growing the store.

Ability to test and iterate faster - the ability to update page layouts faster, means that brands can iterate and change their stores faster with a strategy to improve conversion rates and reduce bounce rate.

Lastly, online store 2.0 promotes a culture of creativity, as developers can build tools that leave brands fully in control allowing brands to be more experimental and create stores that stand out.

So there it is, Shopify and Shopify Plus’s flexibility is truly revolutionised with the launch of Online Store 2.0. From full page editing ability, metafields natively within Shopify, improve editor UI and much-needed developer tools - we cannot wait to watch the platform transform as more and more themes adopt it. If you are wondering how you can get Shopify Online Store 2.0 - see our frequently asked questions below! We hope you've enjoyed our article on Shopify Online Store 2.0.

Upgrade with Charle today

Looking for an agency with Shopify expertise?

As a Shopify partner, we work with brands on both Shopify and Shopify Plus to create the very best ecommerce designs powered by the very best Shopify technology. We've written a whole page on our specialism on Shopify & Shopify Plus. Check it out here!

Bespoke Shopify Plus Websites

Unique & Engaging Designs

Cutting Edge Functions and Features

Migration from other platforms

Conversion & Sales Focused Strategy

Expert Long Term Partner

What We Do

Who We Are

Get In Touch

London
020 3026 3652

Stay Up To Date With Ecommerce

Join our newletter to receive free ecommerce guides, tips and tricks.