Introducing Shopify's Online Store 2.0

For many years a major frustration of the Shopify platform has been the limitation in users’ ability to customise their online store at a finer, granular level. That is all set to change with the release of their new Online Store 2.0, what they are referring to as their biggest leap forward in the online store experience yet.

The Online Store sales channel, your primary channel for selling products online, encapsulates the entire e-commerce experience for many Shopify users. As such carefully crafting a unique, branded website through which to display and sell your products is of utter importance. Migrating to the Online Store 2.0 will open up a new world of customisation and enhancements for your most important e-commerce presence.

So Online Store 2.0, what gives? Well let’s hop into some of the new features:

1. Upgraded theme architecture

The new architecture swaps out Liquid Templates in favour of JSON. This allows for far easier rendering of custom, unique pages, products, collections and blogs. Each page type can have its own unique sections and blocks, carefully rendered from the JSON template. No longer are you stuck having the same content across all your products, with custom templates you’re able to customise each product page to create a unique experience dedicated to that project, with no need to even touch the code.

Part of the architecture restructure has seen the implementation of what’s called Theme app extensions. These allow you to add new app sections, extending the app’s featured directly into the theme itself with no need to manually add any app code into your theme. Not only does this simplify the process of adding custom app content to your store, it also means that should you uninstall the app, no code is left in your theme leading to potentially storefront breaking issues. App developers can build brand new UI components and leave them to you, the merchant, to place exactly them as you need to.

2. Flexible store content

Online Store 2.0 comes with the ability to access a variety of new “flexible” content types without the need for hardcoding metafield or building custom API solutions. With the new update, custom metafields and properties can be updated with a simple setting, allowing the ability to pull in custom content like product sizing, ingredients or instructions.

Metafields are now finally supported natively within the Shopify admin, currently limited to Products and Variants but with support for Collections, Customers and Orders coming soon. These metafields allow you to create new ‘definitions’ that will be surfaced as additional custom fields within a product’s admin page. These definitions can be a variety of content types from simple text, to a date or even uploaded file, in fact, the all-new Files API will allow developers to build custom solutions for accessing new or existing media content like images, videos and 3D models.

3. Storefront filtering

Online Store 2.0 also heralds the arrival of an overhauled Storefront filtering experience that allows you to step outside the workload intensive use of product tags to apply custom filters to your collection pages. With Storefront filtering, you can now automatically enable filtering of products based on universal criteria like availability, price, brand (vendor) and product type. To expand on this, there is also now support for dynamically generating filters based on custom variant options like size, colour, gender, height, weight, you name it! Do note though that collections with over 1000 products will not show filtering options. This limitation has been put in place by Shopify to ensure the Liquid calculations required to filter more than 1000 products will seriously impact your storefront performance leading to a poor customer experience. For best user experience (UX) we recommend against surfacing collections of this size as directly linking to a more refined collection of products will lead to a better customer experience.

4. Theme editor enhancements

The update to the Online Store not only affected what’s possible within the theme code but how merchants can interact with the template in their Theme Editor. More features and options mean more power in the merchant’s hand, empowering them to take advantage of the new Online Store 2.0 features.

These new features include an overhauled user interface for easier access to specific settings, new content blocks like the Liquid input setting allowing users to input custom Liquid code without the need to access the actual theme coding files, and all new support for CSS gradients.

4. New tools

To interact with the all-new features and ways to build, Shopify has also released a plethora of new developer tools.

The Shopify Github Integration allows for developers to connect a theme repo from GitHub directly into your client’s Shopify store. This expands the ability to work collaboratively with your development team using version control and have PR’s automatically synced to Shopify upon merging.

The revamped Shopify CLI tool now allows for greater control of your theme customisation with the ability to hot-reload CSS and Liquid changes, initialise new themes based on Dawn (see below), run Theme Check to lint your code and populate test data.

5. Dawn

To tie this all together, Shopify launched a brand new, free to use a template called “Dawn” likely named to represent a new “dawn” in theme development. Built to take advantage of the new feature released with the Online Store 2.0, Dawn will come preinstalled on most new stores and is available to download from the Shopify Theme Store.

Dawn is focused on speed and performance, scoring a solid 99% in our in-house speed tests, setting a new bar for how performant an e-commerce store can be in a world where a heavy backend/frontend stack can slow performance, impacting your SEO and buyers’ experience.

Dawn achieves this by taking a JavaScript minimal approach that used JS only on an as needed, where needed basis. The use of browser native features assists to ensure the user experience still feels modern, snappy with no compromises.

So where does that leave you? Many developers are updating their theme’s to support the new Online Store 2.0, but so far there are very few available through the Shopify Theme Store and even if you install a new theme, you still need to customise your theme from scratch to retain the current look and feel of your website.

Luckily this is where Launch Digital can help! As part of our Shopify custom development services, we are happy to announce we now offer full Online Store 2.0 Migration. If you think that the offerings of Online Store 2.0 will help elevate your e-commerce business to the next level, reach out to us today for a chat!

‍

‍