A Dive into Shopify 2.0

A Dive into Shopify 2.0 🤿

Shopify’s Online Store 2.0 is the platform’s most significant and forward-thinking feature update. A combination of new features and enhancements that make it easier to create, maintain, and update themes and theme apps. Still fresh to the market, we’ve been tinkering away to understand and test how this will effect merchants and developers alike.

Shopify’s Online Store 2.0 is the platform’s most significant and forward-thinking feature update. Despite the fact that the technology is new to merchants and developers alike. A combination of new features and enhancements that make it easier to create, maintain, and update themes and theme apps, Shopify’s Online Store 2.0 is the platform’s most significant and forward-thinking feature update.

Merchants on Shopify had limited options for how they represented their businesses, with section freedom restricted to simply the front page. To accomplish a comparable effect on other pages, code tweaks, intricate workarounds with blocks, or bespoke apps were required.

If you’re a store owner who doesn’t have in house development, the new online editor and content management system is likely to have the greatest influence on you… in a very good way!

Shopify’s new template language now includes an in-house editor, allowing for better flexibility with content structure and sections. As we know from a lot of our clients who work with SEO strategists & ourselves as CRO Experts being able to monitor the success of information architecture and content in both optimising for search engines, and in conversions, is key.🔑

This makes educating our clients and giving them the freedom with their CMS’s even easier, as well as allowing us to make better recommendations on dynamic content strategies.

Let’s dive in to the new tools and features to understand how they impact your store, and the possibilities they present. We’ll also go over what you’ll need to do to bring your themes and apps up to Online Store 2.0 standards (you are welcome!).

WHAT’S NEW?

SECTIONS ARE A WONDERFUL THING! 🗄

The amount of blocks available inside the store was limited in the previous edition of the online store. Previously, stores had various templates that corresponded to various products. As a merchant, you now have the option of adding sections to each new page with the 2.0 edition. Before, you could only add sections to the homepage before.

That all varies with each page’s sections. Merchants may now add sections to any page, not just the home page, which opens up a slew of new ways to customise every facet of a store.

Another plus is the app’s modularity. This simply means that you may now use the theme editor to add and delete UI components as a developer. You don’t need to look into the theme’s code.

This provides an easy way to manage an app’s supporting materials. With Shopify 2.0, you can effortlessly manage and host your app’s supporting materials on the platform.

LET’S GET FLEXIBLE 👯‍♀️

Refinements to the store’s content metafields

Merchants may now add metafields and properties to their themes without having to use APIs or code. This means merchants will be able to add exactly the content they need to the product page, such as a spot for customers to contribute a size chart or an ingredient list. Metafields can now be used to add items that are unlikely to show in the core store editor.

On the development side, Shopify have made three major changes to metafields:

Metafields: now has a far more flexible type system, which will evolve over time to become more customised to commerce data.
Standard metafields: Shopify have introduced standard metafields, which will make it much easier for custom themes to run on stores across multiple market verticals right out of the box.
Presentation hints: Storefront API and Liquid users will now be able to provide presentation hints to metafields, allowing them to render merchant data in the way the merchant intended with significantly less bespoke code.

FILE PICKER

Images and PDF files are now supported by Metafields. The metafield file picker, rather than hard coding an asset into a theme, makes it simple to upload and select media on product pages. All of the images you’ve saved in the Settings/Files section are immediately usable.

FILES API

The new Files API will also give developers access to the contents of Settings/Files. Apps can use this GraphQL API to upload or select media files from Settings/Files. Apps now have access to this portion of the admin, which includes the ability to populate media metafields with information.

ENHANCEMENTS TO THE THEME EDITOR🪄

Shopify have also made significant upgrades to the theme editor to put merchants in the driving seat whilst making it easier for developers to navigate.

The editor now displays a tree view of all the material on a page in the sidebar, eliminating the need to dive down into separate sections. With the exception of the header and footer (which can contain blocks that can be moved or hidden but cannot be hidden themselves), merchants can conceal most blocks from this sidebar. These enhancements make it simple for merchants to edit a page’s hierarchy.

LIQUID INPUT SETTING

A new Liquid input setting has been added to the theme editor, allowing merchants to add custom Liquid code to pages directly from the editor. The Liquid setting is similar to the HTML setting type in that it allows merchants to access Liquid variables, allowing them to access global and template-specific Liquid objects.

This feature eliminates the need for merchants to manually alter a theme’s code, especially when adding code for Liquid-based apps. Developers can learn how to add this setting to a section or block in our developer guide, or look at the custom-liquid section of our new Dawn theme for an example of how this can be done.

These changes make it easy for merchants to work with the new capabilities of Online Store 2.0 and make decisions about their online store without having to consult a developer, freeing up your time to focus on building creative integrations and solutions (our Design team want to express their excitement here🥳).

BRAND SPANKING NEW DEVELOPER TOOLS 💎

Developers will be able to create applications and themes for Shopify merchants in a whole new way with Online Store 2.0. To help with this transition, we’re launching a set of new developer tools that integrate smoothly with Shopify and aid in the development, testing, and deployment of your themes.

You’ll get more robust theme development with version control, a better sandboxed environment to create themes locally, and streamlined development with a real-time linter customised for Shopify themes with the release of the Shopify GitHub connection, an upgraded Shopify CLI tool, and Theme Check.

Here’s the list of features you’ll get:

Within development themes, you can create, preview, and test modifications to themes.
The dev server allows you to quickly reload CSS and Liquid section changes.
Create a new theme project with the new Dawn theme.
The command line is used to push and publish themes.
Run the theme through a theme check.
Fill in test data for customers and draught orders for the theme.

A NEW REFERENCE THEME 👊

The gift that keeps on giving! Shopify have also unveiled a brand new default theme to coincide with the launch of Online Store 2.0. It links together all of the features discussed above. ‘Dawn’ is what they call it. ‘Christmas’ is what we call it.

Dawn is Shopify’s first open-source reference theme, with OS 2.0 flexibility and a focus on performance. Instead of relying on polyfills and external libraries, it is created with semantic markup and HTML and CSS to provide amazing experiences across all browsers. It’s built to optimise flexibility while minimising complexity, which includes balancing our design preferences with merchants’ freedom to make adjustments that are appropriate for their business.

The most important goal with Dawn was stretching the limits of JavaScript-only-as-needed approach to development. This is because Shopify are putting more emphasis on speed than ever before, establishing a fast foundation to help merchant stores load rapidly. Go go go!!

THE SHOPIFY THEME STORE REOPENING 💈

Shopify has announced that, in addition to the enhancements in Online Store 2.0, the Shopify Theme Store has reopened to partners from July 15, 2021. You will be have been allowed to submit new themes for evaluation from that day, and approved themes will begin to be published.

UPDATING YOUR THEMES AND APPS 🔁

To fully benefit from these enhancements, you should plan to update your themes and apps to Online Store 2.0’s updated requirements as soon as possible — especially since merchants have grown to expect the flexibility OS 2.0 affords.

By the end of the year, all Shopify Theme Store themes and Shopify App Store apps will be required to utilise the new infrastructure. Existing themes will continue to work beyond this year, but merchants will need to make sure their theme is Online Store 2.0 compliant in order to access new Online Store 2.0 capabilities through the theme editor.

WILL I HAVE TO UPGRADE AS A MERCHANT RIGHT AWAY?

No, is the quick answer. Shopify, on the other hand, will be throwing all of its resources at the new store editor, which is focused to the company’s vision for the future. You should consider migrating as soon as feasible BUT no, things won’t crash if you don’t. Depending on your current theme, this will seem differently for you.

Shopify’s Official Theme If you’re using an official Shopify theme, you’ll hopefully be able to upgrade to a newer version in the near future. Official Shopify themes are those available on the Shopify Theme Store that were designed by Shopify as well as official Partners. Official Partners are currently working on updating and creating new themes for the new Online Store 2.0 experience.
Theme of a Third Party (Themeforest, TemplateMonster..) Theme for a Third Party. Similar to the foregoing, it’s possible that your Developer is changing the theme to make it 2.0 compatible. Some developers may not be continuing support, so check to see if they are, and if they aren’t, look for a new 2.0 theme to prepare for migration.
Custom Theme If you use a custom Shopify theme, you won’t be able to use Online Store 2.0. To learn about the migration plan for Store 2.0, you’ll need to contact the developer or your in-house team (…or us!)
Headless theme Last but by no means least, there’s the Headless Theme. Headless themes, for those unfamiliar, are those that are divorced from the Shopify platform and interface with Shopify as a Platform API. This provides enormous flexibility, but it necessitates developer expertise, know-how, and resources. The Store Editor isn’t used in these instances, thus it won’t make a difference to the Headless. You lucky scoundrels!

CONCLUSION

Overall, this is a much-anticipated and much-needed upgrade to the commerce platform that drives today’s and tomorrow’s commerce. The upgrade appears to provide Merchants with much-needed granular control without creating a minefield to navigate. It also allows you to delve a little further if and, more crucially, when you desire by customising particular entities. Do you need a size chart specifically for your shirts? Simply assign your shirts to a Product Template with a custom size chart. Done.

‍