The Ultimate Guide to Shopify 2.0 for Ecommerce Brands

When Shopify announced the Online Store 2.0 in June 2021, it promised a new approach to ecommerce website development. This new framework changed the Shopify ecosystem for merchants and developers.

Here, we’ll explore the differences between Shopify 1.0 and 2.0. We’ll also discuss best practices for migrating to Shopify 2.0, including whether or not you should redesign your website.

What is Shopify 2.0? 

Shopify’s Online Store 2.0 (OS 2.0) is the latest version of Shopify’s platform. The update introduced new features and tools to optimize the merchant and customer experience. Many functions do not require coding knowledge, allowing merchants greater customization without needing developers. 

The benefits of Shopify 2.0 include: 

• Better speed and performance
• Improved content management tools
• Enhanced control over customer touchpoints, including the checkout process

‍

What are the differences between Shopify 1.0 and 2.0?

Shopify 2.0 created new opportunities for merchants and developers to customize ecommerce websites. It did not change the pricing structure or plans (i.e., Shopify versus Shopify Plus).

Here are six differences between Shopify 1.0 and 2.0. 

A new theme architecture

With Shopify 1.0, merchants could only customize the layout of the homepage. Shopify 2.0 introduced a new theme architecture called Sections Everywhere. The framework relies on JSON templates rather than Shopify’s original Liquid template language. 

These templates enable store owners to better control the layout of every page without having to code it themselves. With Sections Everywhere, brands can add, delete, or reorder content. Merchants also choose which sections are displayed by default when creating a new page.

An updated theme editor 

Shopify’s 2.0 improves the user interface of its theme editor. The new editor displays a tree view of content in a sidebar. Merchants can drag and drop sections—making it easy to modify the structure of a page. 

Customized store content

Shopify 1.0 only offered merchants standard metafields. Online Store 2.0 enables brands to create custom content without additional coding. Merchants can add custom metafields for product pages and collection pages. For example, a retailer can add a “Complete the Look” section under a product image to drive cross-selling and upselling. 

Shopify 2.0 also introduced File Picker. This feature makes uploading images, videos, or other media files easy when creating a custom metafield. 

Streamlined theme app extensions

In Shopify 1.0, developers had to build integration logic to connect apps with themes. Theme app blocks make installing Shopify apps easier, as users don’t have to touch the theme’s code. With app blocks, Shopify users can better customize their websites and extend functionality. Shopify 2.0 also automatically removes ghost code when apps are uninstalled. 

Enhanced developer tools 

The Online Store 2.0 updates introduced new features for Shopify developers to build custom themes or apps. These tools include: 

• Shopify GitHub integration: Developers can now connect their GitHub account, making tracking and managing site changes easier.

• Shopify CLI tool: Shopify updated its Command Line Interface (CLI) tool to include themes and automate basic development tasks. 

• Theme Check: Shopify’s new Theme Check tool will scan themes for errors. 

‍

A new reference theme  

Dawn is Shopify’s new default theme, replacing 1.0’s Debut. Dawn pulls together all of Shopify’s 2.0 features, enabling merchants to design custom and high-performing ecommerce websites. (Websites using the Dawn theme load 35% faster than Debut.) All the free themes on Shopify’s Theme Store use this framework today. 

Migrating to Shopify 2.0? Here’s what you need to know

Migrating to Shopify 2.0 is not mandatory. But as Shopify continues to add new features and customization options, migrating to OS 2.0 will be essential for growth. Today, Shopify requires all themes and apps to use the new infrastructure. 

Merchants have three options when they want to migrate to Online Store 2.0.

1. Download a new theme: Merchants can choose a Shopify 2.0 theme template from the Shopify Theme Store.

2. Download a new version of your theme: Merchants who purchased a professional theme will need to check with their developer to see if a new version exists. 

3. Migrate your theme manually: Shopify merchants who choose this option must be comfortable editing HTML, CSS, and Liquid code. (Shopify.dev has a migration guide to help.) 

‍

Considerations for migrating to Online Store 2.0 

Migrating to Shopify 2.0 requires time and resources. Upgrading will be more challenging if your current website relies on custom features and apps. 

With careful planning, merchants can avoid compromising the customer experience and losing sales. Here are some things to consider before updating your Shopify store. 

• Consider your entire tech stack. Check current apps and integrations to determine if they are Shopify 2.0 compatible. 
• Back up your current store before migrating.
• Communicate potential downtime with customers to avoid confusion or frustration. 
• Engage in extensive testing before publishing—including A/B testing the new design, checking functionality, and verifying the performance of integrations or apps. 

‍

What is the timeframe?

The timing of a migration depends on the brand's needs. For example, a brand migrating from a simple Shopify theme (with little custom code or third-party apps) could take a few hours. 

However, Shopify stores with a high degree of customization require more time. One modification could lead to a string of issues, ultimately impacting sales. 

Most sizable brands will want to take an iterative approach to minimize risk. This process will require rebuilding their liquid-based theme in JSON. In some cases, this can take over 100 hours. 

Should you redesign your website when migrating to 2.0?

Many brands want to redesign their website when moving to OS 2.0. A redesign can be appropriate if your current storefront looks dated or is no longer aligned with your brand ethos.

However, a simultaneous migration and redesign can be challenging. A new web design requires careful planning, including understanding targeted key performance indicators (KPIs), building a brand guide, audience research, and testing. Merchants may not have the resources, budget, and time to execute both.

Unfortunately, many brands also make the mistake of prioritizing aesthetics when combining a migration and redesign, and even a small change can negatively impact the user experience. This can affect key metrics like adds to cart, average order value, and conversion rates.

A new Shopify experience

Shopify 2.0 made it easier for merchants to meet customer demand with increased levels of customization. At the same time, new developer tools created a new paradigm for app developers—expanding the possibilities for a positive customer experience. 

Need help figuring out if you should redesign your current website when migrating? Are you looking to optimize your Shopify 2.0 store? We’re here for you. Get a free proposal today.  

‍