eCommerceShopify 2.0 – Everything You Need to Know!

Shopify 2.0 – Everything You Need to Know!

Share

Shopify 2.0 – Everything You Need to Know!

At the Shopify Unite Conference on June 29, 2021, Shopify announced the most expansive update to date – Shopify 2.0. The revised Shopify infrastructure, tooling, and technologies aim to improve site speed, performance, and usability. It is one of the most significant improvements that offers massive opportunities for developers and merchants. Let’s walk you through the host of improvements, features, and benefits of Shopify 2.0 that allow unlimited customizations, breaking down the complexities of store development.

Before moving forward, let’s glance at what Tobi Lutke, CEO of Shopify, thinks about the revised infrastructure.

“The internet is the world’s largest city, and Shopify is building its commerce infrastructure. Especially over the past year, we saw independent businesses succeed by showing up creatively and uniquely in this city. The future of commerce on the internet relies on creative expression at every touchpoint. Together with developers, we are building the infrastructure to make this possible.”

What is Shopify Online Store 2.0?

Shopify 2.0 focuses on the following:

Sections On Every Page

The earlier version of Shopify allowed you to drag and drop multiple sections, arrange them how you liked, and add content to each section – but only on the home page. And on other pages, such as collection, product, and blog pages, you could only edit the content. However, the game-changing Shopify 2.0 allows the store owners to add, remove, and re-arrange sections throughout the site.

Now the merchants can set up different templates without requiring a developer to add the elements manually. Instead, you can activate the templates on each page using JSON template files, which store settings data for different pages.

Updated App Extensions

Previously, there was no direct way to integrate apps with themes. Instead, the developers had to code an integration logic for existing themes, making it challenging to develop features that would work smoothly on multiple themes.

However, Shopify 2.0 offers theme app extensions for developers allowing them to extend apps into Merchants’ themes via app blocks. It helps improve the merchant’s site functionality and gives them complete control over exactly which page it will display and the location of the page it will appear on. It even allows updating the app settings directly through the theme editor.

Enhanced Theme Editor

Gone are the days of examining different sections to find the best one! Shopify 2.0 brings impressive updates to the theme editor, which now displays a tree-down view of all the collapsible sections in the sidebar. It’s now easier to visualize sections within a page, and it lets the merchants easily modify the hierarchy of a page. The improved UI on the theme editor offers ease of use for updating and revamping the online store.

An additional update to the theme editor includes the Liquid Input Setting, allowing merchants to add Liquid code directly via the theme editor. The Liquid setting is congruent with the HTML setting, except that it enables the merchants to access global and template-specific liquid objects. It reduces the need for manually changing the code of a theme, mainly when adding it for apps that use Liquid.

New Developer Tools

Shopify 2.0 introduces a whole new suite of developer tools that integrate seamlessly into Shopify. The introduction of GitHub integration, an updated Shopify CLI tool, and Theme Check streamlines the process of developing, testing, and deploying your themes.

Connecting your store with GitHub makes theme integration and development more accessible. It helps you implement workflows while working on the merchant store. The new Shopify CLI lets you create, preview, and test changes to themes. In addition, the dev server enables you to reload CSS and Liquid section changes while offering you control of how the final theme will display.

New Reference Theme

Dawn -the new theme is 35% faster than the old theme, Debut. It is Shopify’s first source-available reference theme built with semantic markup with HTML and CSS. And it will help maximize flexibility while breaking the complexities. Below are a few differences between Debut & Dawn Shopify themes.

DebutDawn
Sticky OptionNoneDual-scroll experience on large screens
Color CodeNo frameworkFramework of color structure
Slide ShowAvailableReplaces with a section that allows for common patterns
Heade/LogoLimited flexibilityFlexible with Sticky options
Image CroppingImages may get croppedImages are not cropped
Upgraded Metafields

Unlike the previous version, you don’t need APIs or third-party apps to edit metafield functionalities directly on the product, product, or collection page. Shopify 2.0 also allows you to add presentation hints to meta fields for rendering store data.

Multilingual Capabilities

With Shopify 2.0, you get multilingual stores built natively and don’t need external integrations.

Benefits of Shopify 2.0 For Shopify Developers

  • A whole new suite of developer tools
  • Updated theme architecture
  • Enhanced development, testing, and deployment options
  • Improved app integration options

Benefits of Shopify 2.0 For Merchants

  • Flexibility of adding up sections to different pages
  • Ease of customizing sections for all templates
  • Adding metafield functionalities without APIs
  • Ability to modify the checkout section

Shopify vs. Shopify 2.0 – A Comparison

FeaturesShopifyShopify 2.0
Default ThemeDebutDawn
Default Section Only on Home PageAvailable for every page
Shopify App AssetsDevelopers need to host themselves.Shopify CDN hosts all the assets submitted via theme app extensions.
App Integration LogicBuild integration logic for every Shopify Vintage theme.Theme app extensions for developers via App Block
CodingHardcode meta fields into themes or rely on APIs to make changes to product pages.Use dynamic sources to insert standard meta fields and known resource properties as setting defaults.
File Picker OptionsColour, Data and Time, File, JSON, Measurement, Number, Rating, Reference, Text  True or False, URL+ Images, PDF files
Meta Field AccessCreated, whitelisted via the Admin API, and be able to retrieve all your meta fields via the Storefront APIDevelopers can gain access to the contents of Settings/Files.
Updated Theme EditorNeed to drill down into different sections to update the hierarchy of a page.Easily update the page order, i.e., the editor now displays a tree view of all the content on a page in the sidebar.
Liquid Input SettingAdd custom Liquid code to pages directly from the editor.
Development ToolTheme EditorShopify CLI
Version ControlShopify GitHub integration
Theme PerformanceTheme Check and Shopify Theme Inspector for Chrome+ Lighthouse CI GitHub Action
Identify Issues in Theme CodeImproved Theme Check

(Source: OSC Professionals)

Conclusion

This blog covered different features of Shopify 2.0 that promise enhanced site performance while offering faster load time and improving bounce rates. In addition, the new upgrade offers an overall improved experience to developers and merchants. At Nivara, our Shopify developers have gained expertise in developing Shopify stores from scratch using the latest OS. So, if you want to build an online store from scratch, don’t hesitate to reach out to us. We are a renowned digital agency for eCommerce helping businesses leave a mark in the industry.

Read more

Share

At the Shopify Unite Conference on June 29, 2021, Shopify announced the most expansive update to date – Shopify 2.0. The revised Shopify infrastructure, tooling, and technologies aim to improve site speed, performance, and usability. It is one of the most significant improvements that offers massive opportunities for developers and merchants. Let’s walk you through the host of improvements, features, and benefits of Shopify 2.0 that allow unlimited customizations, breaking down the complexities of store development.

Before moving forward, let’s glance at what Tobi Lutke, CEO of Shopify, thinks about the revised infrastructure.

“The internet is the world’s largest city, and Shopify is building its commerce infrastructure. Especially over the past year, we saw independent businesses succeed by showing up creatively and uniquely in this city. The future of commerce on the internet relies on creative expression at every touchpoint. Together with developers, we are building the infrastructure to make this possible.”

What is Shopify Online Store 2.0?

Shopify 2.0 focuses on the following:

Sections On Every Page

The earlier version of Shopify allowed you to drag and drop multiple sections, arrange them how you liked, and add content to each section – but only on the home page. And on other pages, such as collection, product, and blog pages, you could only edit the content. However, the game-changing Shopify 2.0 allows the store owners to add, remove, and re-arrange sections throughout the site.

Now the merchants can set up different templates without requiring a developer to add the elements manually. Instead, you can activate the templates on each page using JSON template files, which store settings data for different pages.

Updated App Extensions

Previously, there was no direct way to integrate apps with themes. Instead, the developers had to code an integration logic for existing themes, making it challenging to develop features that would work smoothly on multiple themes.

However, Shopify 2.0 offers theme app extensions for developers allowing them to extend apps into Merchants’ themes via app blocks. It helps improve the merchant’s site functionality and gives them complete control over exactly which page it will display and the location of the page it will appear on. It even allows updating the app settings directly through the theme editor.

Enhanced Theme Editor

Gone are the days of examining different sections to find the best one! Shopify 2.0 brings impressive updates to the theme editor, which now displays a tree-down view of all the collapsible sections in the sidebar. It’s now easier to visualize sections within a page, and it lets the merchants easily modify the hierarchy of a page. The improved UI on the theme editor offers ease of use for updating and revamping the online store.

An additional update to the theme editor includes the Liquid Input Setting, allowing merchants to add Liquid code directly via the theme editor. The Liquid setting is congruent with the HTML setting, except that it enables the merchants to access global and template-specific liquid objects. It reduces the need for manually changing the code of a theme, mainly when adding it for apps that use Liquid.

New Developer Tools

Shopify 2.0 introduces a whole new suite of developer tools that integrate seamlessly into Shopify. The introduction of GitHub integration, an updated Shopify CLI tool, and Theme Check streamlines the process of developing, testing, and deploying your themes.

Connecting your store with GitHub makes theme integration and development more accessible. It helps you implement workflows while working on the merchant store. The new Shopify CLI lets you create, preview, and test changes to themes. In addition, the dev server enables you to reload CSS and Liquid section changes while offering you control of how the final theme will display.

New Reference Theme

Dawn -the new theme is 35% faster than the old theme, Debut. It is Shopify’s first source-available reference theme built with semantic markup with HTML and CSS. And it will help maximize flexibility while breaking the complexities. Below are a few differences between Debut & Dawn Shopify themes.

DebutDawn
Sticky OptionNoneDual-scroll experience on large screens
Color CodeNo frameworkFramework of color structure
Slide ShowAvailableReplaces with a section that allows for common patterns
Heade/LogoLimited flexibilityFlexible with Sticky options
Image CroppingImages may get croppedImages are not cropped
Upgraded Metafields

Unlike the previous version, you don’t need APIs or third-party apps to edit metafield functionalities directly on the product, product, or collection page. Shopify 2.0 also allows you to add presentation hints to meta fields for rendering store data.

Multilingual Capabilities

With Shopify 2.0, you get multilingual stores built natively and don’t need external integrations.

Benefits of Shopify 2.0 For Shopify Developers

  • A whole new suite of developer tools
  • Updated theme architecture
  • Enhanced development, testing, and deployment options
  • Improved app integration options

Benefits of Shopify 2.0 For Merchants

  • Flexibility of adding up sections to different pages
  • Ease of customizing sections for all templates
  • Adding metafield functionalities without APIs
  • Ability to modify the checkout section

Shopify vs. Shopify 2.0 – A Comparison

FeaturesShopifyShopify 2.0
Default ThemeDebutDawn
Default Section Only on Home PageAvailable for every page
Shopify App AssetsDevelopers need to host themselves.Shopify CDN hosts all the assets submitted via theme app extensions.
App Integration LogicBuild integration logic for every Shopify Vintage theme.Theme app extensions for developers via App Block
CodingHardcode meta fields into themes or rely on APIs to make changes to product pages.Use dynamic sources to insert standard meta fields and known resource properties as setting defaults.
File Picker OptionsColour, Data and Time, File, JSON, Measurement, Number, Rating, Reference, Text  True or False, URL+ Images, PDF files
Meta Field AccessCreated, whitelisted via the Admin API, and be able to retrieve all your meta fields via the Storefront APIDevelopers can gain access to the contents of Settings/Files.
Updated Theme EditorNeed to drill down into different sections to update the hierarchy of a page.Easily update the page order, i.e., the editor now displays a tree view of all the content on a page in the sidebar.
Liquid Input SettingAdd custom Liquid code to pages directly from the editor.
Development ToolTheme EditorShopify CLI
Version ControlShopify GitHub integration
Theme PerformanceTheme Check and Shopify Theme Inspector for Chrome+ Lighthouse CI GitHub Action
Identify Issues in Theme CodeImproved Theme Check

(Source: OSC Professionals)

Conclusion

This blog covered different features of Shopify 2.0 that promise enhanced site performance while offering faster load time and improving bounce rates. In addition, the new upgrade offers an overall improved experience to developers and merchants. At Nivara, our Shopify developers have gained expertise in developing Shopify stores from scratch using the latest OS. So, if you want to build an online store from scratch, don’t hesitate to reach out to us. We are a renowned digital agency for eCommerce helping businesses leave a mark in the industry.

Read more

Local News