Both Shopify and Shopify Plus remain to be one of the fastest developing eCommerce platforms in the world. Shopify has enabled companies, big and small, to easily establish an online store to easily and start selling online, in-store, and via third-party channels.

Last month, Shopify announced the release of Online Store 2.0,  which is the next step in the Shopify system progression. It is expected to have new capabilities that will enable developers to increase their functionality and possibilities, while also giving you more control over their own stores, items, collections, and pages.

The goal is to meet modern customers' expectations of how a site should perform by addressing several of the software's known limitations.

Strap right in as we share what this means for you as an eCommerce entrepreneur and how you can upgrade your own store with the help of Webinopoly Shopify Experts.

Quick Overview

It’s an exciting time for the eCommerce space as Shopify‘s Online Store 2.0 will completely transform the platform as we know it. Its new editor will provide you complete freedom over creating new page layouts, storefronts, and easily integrating apps to particular areas of their store. One of the biggest updates is you will now have the ability to customize every page structure and not just the homepage.

A slew of new features and capabilities were also unveiled, all of which are centered on best-practice development. During the launch, they chose to present a new base theme as a benchmark, one that’s faster than Shopify’s current default themes! There will also be a number of new tools that are aimed to help and support developers in providing a more consistent, dependable, and enhanced development experience.

What’s in store?

Upgraded theme architecture

Shopify has improved the overall theme architecture making it easier and more versatile for you to customize. As developers, we also now have more opportunities to create themes and integrations that you, the merchant, can easily tweak as needed.

Sections for every page

If you have tried customizing your Shopify store before, you may have noticed a few limitations here and there. Until this update, you on Shopify had limited options for how they were able to represent their businesses. Moving sections around were limited to only the home page and not the backend.

Before, if you wanted to make changes on other pages that were not the home page, you would have to tweak your codes, get your developer to do some workarounds, or install apps.

Now, this has all changed because sections are now available on every page.

What is a section? A section is basically just an element within a page. This could be a banner or a section of text. With the new update, you will now be able to add sections to any page, not just the home page, which opens up a slew of new ways to customize every facet of your store. Content and settings for some parts of a Shopify store, such as the product page or photos in a slideshow are contained within sections.

Developers will now have access to a variety of various settings types inside these sections. These vary from text inputs and image pickers to custom HTML and menus. Thanks to these updates, you may also alter your pages and populate it with content using the new theme editor.

Before, sections can only be modified on the homepage to keep it looking updated while other pages like the product page, collection, or blog had a fixed architecture that could not be modified except for the content. Now you will be able to create pages with numerous sections and rearrange them as you like. You should be able to attach images and text as well.

Why is this a game-changer? If you wanted to move a banner or add a new one to say your product page, you will be able to do it directly through the theme editor. If you are well equipped to do so, you will be able to easily customize every page and set up different page templates without having to tap a developer This all bodes well for brands who want to personalize every corner of their Shopify store. 

How sections on every page work

The new modifications are possible because of Shopify’s new approach to how the storefront will render templates. Sections are contained within the /sections directory of a theme. It can be included in your theme’s layout files added to any template using the Theme Editor. We recommend for you explore the  /sections directory so you can get a better understanding of the various components that can be placed as sections.

You can include a section in a template using the new section tag. This tag behaves like the familiar include tag for snippets — {% section 'header' %} will include the section located at sections/header.liquid.

In this update, each page type can now be rendered using a JSON template file. JSON templates are data files that store a list of sections to be rendered and their associated settings. You can add, remove, and reorder these sections using the theme editor. When a page is rendered with a JSON template, the sections are rendered in the order specified by the order attribute. There's no markup between the sections.

Now stores can have multiple template files that map to different products, collection pages, custom pages, blog posts, and more. This allows you to easily have a different template for your product page, collection page, and other pages in the same store.

in the new JSON template files, you may specify which parts should show by default when your theme is first installed, as well as the order in which they should appear. After you've uploaded the JSON template, you can go to the theme editor and add any section with presets, just like you did before with dynamic sections on the main page.

New app blocks and theme app extension for developers

Another great new feature in this update is how we install apps. Now, if you have been using Shopify long enough, you know how much of a pain it is when you delete any apps because it leaves unnecessary code in your theme, meaning you have to go to your theme code and delete it yourself or have to ask your developer to do it for you.

If you didn’t have knowledge of coding, it would take you some time to do this. In the same vein, when you try to install apps, there are ties when you have had to install its code or even build new ones.

Before, developers would face challenges when integrating apps with themes. There was no way for apps to integrate them and so we would have to build integration logic for existing themes. This means that features had to be modified each time because there wasn’t any way to make it work consistently across multiple themes but now this has changed thanks to the theme app extensions that were introduced.

If you have different developers working on your code, you can see how this is such a pain point. Often developers may use different file names so other developers would need time to study the code before making any changes.

The new Shopify introduces a new set-up called Theme App Extensions which should now allow apps to have their own sections and blocks into the theme. If you go to your theme editor now and want to add your app to one of the pages, you should find an option to choose that app (if it’s compatible). For example, you wanted to add Product Reviews to your product pages. Before you would have had to add code into your template but now can easily do it on the theme editor.

The theme app extensions are great news as it will allow developers to extend themes in a way that protects theme code integrity and provides better app development and merchant experiences. 

Theme app extensions let developers edit existing Shopify themes to add extra resources. These are divided into:

• Assets: scripts, style sheets, and static content that extend the theme’s functionality
• App Blocks: UI components that work alongside the editor
• Snippets: reusable pieces of code that work in app blocks

Now that apps are now distributed as blocks within a page with Online Store 2.0, you can have complete control over which pages of your store they appear on and where they appear. Plus you can make changes to the app's settings right from the theme editor. Everyone from the merchant to the app developers will benefit from this kickass update.

The app's modularity is a great plus. For developers, this simply means that you can now use the theme editor to add and remove UI components, no need to delve into the theme's code. All of this makes managing the app’s resources a breeze.

To build your first theme app extensions and make your apps compatible with Online Store 2.0, you can check the migration information in Shopify’s documentation, or work with a Shopify Expert here at Webinopoly.

A spanking new theme editor

As you know, your online store's storefront is best represented by Shopify themes. It provides the search feature, product catalog, shopping cart, and checkout pages that should always be optimized for any device especially mobile. With Online Store 2.0, Shopify has overhauled the theme architecture and revamped the theme editor.

One of Shopify’s key goals for these new capabilities is to provide a new editing experience for merchants, to make it easier than ever to develop storefronts from the ground up, integrate theme extensions, and manage apps within themes.

The new feature now enables merchants to centralize and customize functionalities to suit their needs.

A "tree-down" view of collapsible sections was also introduced so it should be even easier to visualize sections within a page. The pain of sifting through a huge list of sections to find the proper one is now gone. Additionally, the possibility to add liquid code directly from the theme editor has been added.

By the end of 2021, migration to the new 2.0 will be required. To do so, Shopify store owners will need to hire a developer who can change the code to conform to the 2.0 criteria.

You will need to start converting Liquid templates to JSON templates as part of this process. Plus, convert HTML to the new Sections format. This whole procedure will take time and effort, so it’s best to consult a Shopify developer.

If you’re interested to take the leap and get started ahead, our Shopify Experts here at Webinopoly are happy to help you. Just get in touch with us here.

A new default theme, Dawn

The latest Shopify update also offers a new default theme, Dawn. This will be the new reference theme that developers can utilize as a starting point for building new themes that adhere to the new standards. Dawn overrides Debut as the default theme and actually loads 35% faster!

What do you need to know about Dawn:

• It's made with current responsive HTML and CSS, so it'll operate on any screen size. Because it’s mobile-friendly (favored by Google), this will be great for SEO.
• The use of JavaScript has been minimized, resulting in faster website loading. As a result, you'll have a better user experience (UX) and a higher search engine ranking.
• The harmonized color palette now allows you to edit colors across the entire site.
• You will have complete control over the appearance of your site by selecting a primary and secondary color scheme. Every element can have its color inverted or have a different backdrop color thanks to the atomic design.
• Dawn is more adaptable and intuitive than Debut and your customers should feel and see the difference

Improved loading speed

Of course, one of Shopify's main objectives is to enhance loading speed, this means that all the new Shopify 2.0 layouts will now load faster. The checkout now loads twice as fast as it did previously.

Manage metafields and add more info to your product pages

Now that metafields have been added to the revised theme editor, what is it and how does it help you?

What metafields do is allow you to add hidden information to products and other resources. Metafields can be used for a variety of purposes, like adding a summary to a blog article. Metafields can also be used to share data with other Shopify apps.

 You will be able to create them via Settings > Metafields

You will be able to view them on the product page admin, and in the theme customizer. If you want to use individual templates for different products, you can also include content specific to each product.

These data points can be used by developers to display information based on the object displayed.  Metafields keep track of this data in the background and present it on the relevant product page, a feature not present in the previous Shopify version.

Sneak peek of “Content”

The launch also shared a new tool Shopify is calling "Content. This is for whatever kind of content you'd like to place around your store. Now instead of Pages and Blog Posts, you'll be able to create any form of material you want, including testimonials, photos, lists, and size charts.

A great change from how in the past you needed to create a page whenever you wanted to add a block of content, even if you didn’t want a standalone page. This was tiresome to work with due to the limitations. It was difficult for merchants to use and it was an extra hassle for developers. This new ‘content’ should be a welcome addition.

Checkout app extensions

Before, Only Shopify Plus businesses had access to the checkout page editor, and if you weren’t, there wasn’t much you could do except add your logo and modify the colors.

You couldn't do much more than add your logo and modify the colors if you weren't on Shopify Plus. Developers will now be able to design apps that can be installed directly on the checkout page thanks to these new extensions.

The checkout has been significantly improved in Shopify 2.0 and can now handle seven times the capacity and can be customized with extensions that allow new features to be added to previously inaccessible parts.

Now you might be asking, how can access Shopify Online Store 2.0?

As of writing, the only way to get access to this is if you start a new Shopify store. The new Shopify stores will now come with Dawn, the recently introduced base theme.

Most of you who read this will most likely already have an existing Shopify store and so you would need to wait for your theme developer (if you have it custom) or if you are using themes from the store, you’ll need to check if the theme makers are going to release new versions of their themes and when. Remember, you need to have this ready by 2021.

Conclusion

Advantages of Shopify 2.0 for store owners

Shopify 2.0 offers a whole host of benefits for store owners, including:

• Changing or updating content is now much easier
• Add sections everywhere to any part of your store
• Merchants now have the ability to create new pages with complicated designs with less assistance from a developer
• Faster website speed
• If a developer is hired to design a new portion, the new block will be offered to all stores
• Easier and more convenient integration of apps
• Ability to customize the checkout section
• Native integration of metafields

What happens to stores built prior to Shopify 2.0?

Aside from the theme editing interface, all stores developed with Shopify 1.0 will continue to function normally. Nothing should be changed in your store.

How can you migrate from Shopify 1.0 to Shopify 2.0?

You can definitely get a headstart and upgrade from version 1.0 to 2.0, but you'll require the assistance of a Shopify developer.

The good news is that our team of Shopify experts here at Webinopoly are ready to help you out. We can help you out with the new sections, check the code to make sure your apps are supported and updated, and run tests to see what we can improve on your page.

Connect with us

If you’re ready to start, you may call us at 713-805-5888, email us at [email protected], or leave us a message here.

Learn more about Webinopoly

If you’d like to learn more about what we can do or view our portfolio, please click on the links below:

• Explore our services
• See our previous work here