Shopify OS 2.0 - Themes, Sections, Blocks and Much More

If it is easy, make it easier, if it is good, make it better, that’s what sums up Shopify OS 2.0. Features have been added, improvements have been made to the existing OS. It allows the users to easily build themes and theme apps. Many free and premium Shopify OS 2.0 themes are already available with easy drag and drop options, fast and loading landing pages. The update was launched a few months back in June. Shopify developers were waiting for the company to launch the new store design for quite a long time as there were some long time changes needed in the store design experience.

Let’s discuss the changes from the developer’s perspective.

When you open up your dashboard for the home page, you won’t see much of a difference there. The orders, products, customers, analytics, marketing, discounts all are the same. When you move down to Online Store that’s where you will see notice the difference as every store that is created has a default Dawn theme, which is built on the new theme architecture.

Sections and blocks on pages and templates

When you click on customize button, you will see significant changes. Back in the day we only had the section elements and you had to click into one of the sections to see the blocks and so forth. Now, we have more of a cascade-style interface that allows us to see the blocks and the section contents.

When you open products, that’s where you see more flexibility which wasn’t available previously. Back then, this flexibility was only available for the home page. Now, it is available for every other page which is appreciated by the developers. You get fine-grain control over the content and design of pages other than the home page as well. You can now also use home page elements on all the other pages that allow you to create other landing pages, just like you do in WordPress Elementor or HubSpot’s drag and drop feature. Previously, developers had to adjust the code as well to build a landing page, duplicate the content, and whatnot. The new OS 2.0 has given a lot of relief in this case.

Shopify Themes 2.0 and Online Store Editor

In order to allow for sections everywhere, Shopify has provided a new Shopify theme architecture. Now instead of writing liquid code directly into templates that code will be moved into sections and these template files will be written as JSON objects. This is the same data format that theme developers have been accustomed to with sections and theme schemers turning the files into JSON, this allows developers to build pages in the new theme editor by adding and rearranging the sections and blocks similar to how we have been doing for years now on the home page. If we take a look at the new Shopify theme architecture as demonstrated on the new theme Dawn, you can see that not much has changed. The obvious difference is that all the template files are now JSON files instead of liquid files, with the exception of the templates in the customer area.

Shopify has fulfilled its promise to enable the sections everywhere.

User-friendly Meta fields

In the Online Store, 2.0 Meta fields can now be edited directly to the admin, which means that there is no need for external apps or special URLs. In addition, you can now create Meta field definitions in a range of content types. You are no longer restricted to a single line of text.

Then when you defined your new meta field, you can edit it directly from the product page admin just like you would edit the standard fields such as titles, or description and finally in order to bring it on to your frontend, you can simply link the meta field to a field already in section settings, therefore, removing the need to hardcode meta fields into your theme via liquid code.

Theme Editor

If you have been using Shopify for some time, you would know that Shopify likes to update the look and feel of their theme editor on a pretty regular basis. The biggest difference between this theme editor compared to the previous theme editor is the tree view of sections. You can rearrange the settings from the front end. Other features of this new editor include app blocks which is the new way to add app widgets to your theme and data linking

Developer Tooling

Shopify has mentioned on its website that ‘JSON templates aren’t supported through ThemeKit’. If you want to make these changes through a local development environment, then you need to use Shopify CLI.’

So, Shopify has extended the functionality of CLI to include theme development essentially replacing the use of ThemeKit altogether. In addition, Shopify will now directly integrate with GitHub. Previously, the development teams had to come with their own Robust system for managing and deploying their own theme code changes. Now, developers can manage and deploy directly to Shopify through GitHub. These are big and bold changes in Shopify.

• No changes to Shopify Liquid Change
• No changes to section schemas
• No changes to the layout files

Here’s what Comptuan team members think about this update

“It is a huge step and the biggest updates to date (according to Shopify), this has a lot of new exciting stuff and also make our work more efficient. Some of the updates are Sections are in pages without custom coding, app blocks, custom liquid in theme customization, default filters along with navigation and inserting small script on collection page all default filters will be shown perfectly off course we will need more time for customization, File picker, improvements of meta fields and much much more. There's also one free Shopify OS 2.0 theme "Dawn" in the store by Shopify and I strongly recommend checking this out. I liked this theme and especially it only loads the CSS which is essential and does not load any other "unused" code (which is by the way most difficult part when doing optimization). We already developed/worked on a store and after inserting the content/CSS etc. according to Shopify theme architecture when tested on the staging link its score reaches 87. So whenever you have some free time please check it. And to enjoy the benefit of Shopify OS 2.0, the theme needs to be compatible/upgraded. - Nadeem Saleem, eCommerce Strategy Developer, Computan

I checked it, an awesome update, no doubt it is the biggest update, impressive thing for me is it doesn’t load unused CSS, also the migration process sounds like a lot of work. - Adeel Haider, eCommerce Developer, Computan.

"I have personally designed some pages on Shopify 2.0 and it seemed like with new JSON templates you can use JSON data in template files and include sections anywhere on the website. Metafields support a lot of media files such as images, PDF files among others. Merchants can access the global and template-specific Liquid objects with zero edits to the theme code. The new reference Shopify OS 2.0 theme is called Dawn. Shopify is trying to make the eCommerce future brighter." - Muhammad Umar, Shopify Developer, Computan.

What do you think of this update? Do let us know in the comment section. And, if you need assistance from any of our eCommerce experts, feel free to reach us.