Shopify 1.0 vs Shopify 2.0

In June 2021, during the Shopify Unite event, Shopify unveiled one of its most significant updates to date: Online Store 2.0, commonly known as Shopify 2.0. This update introduced a fresh approach to Shopify’s theme architecture, profoundly impacting merchants’ operations.

Online Store 2.0 offers substantial opportunities for you and your clients. It enables your Merchant to edit the content and structure freely in Shopify.

Let’s dive in.

Key Differences Between Shopify 1.0 and 2.0

Speed and Performance

One of the most notable improvements in Shopify 2.0 is enhanced speed and performance. Shopify 2.0 is faster and more efficient, handling more traffic and transactions without performance issues.

Customization

Shopify 2.0 significantly expands customization options. Users can now create custom templates and designs without needing development skills, which wasn’t possible with Shopify 1.0. This empowers store owners to design unique, personalized online stores effortlessly. Whether it’s changing your site content or rearranging sections, these tasks are now simple and do not require technical expertise.

Marketing Tools

Shopify 2.0 introduces advanced marketing tools, including email campaigns, social media integrations, and SEO optimization. These tools simplify promoting products and reaching a broader audience, enhancing the overall marketing strategy for merchants.

Mobile Optimization

Given the rise of mobile commerce, eCommerce platforms must be optimized for mobile devices. Shopify 2.0 is designed with mobile optimization in mind, ensuring customers have a seamless browsing and purchasing experience on smartphones and tablets. The theme customizer responds natively to mobile views, providing a better perspective on the customer experience.

App Integrations

Shopify 2.0 offers a broader selection of app integrations compared to Shopify 1.0. This makes it easier for merchants to add new features and functionalities to their online stores without hiring developers. With the enhanced functionalities of Online Store 2.0, the need for multiple apps is reduced, leading to faster load speeds.

How Those Liquify work with Shopify 2.0?

To leverage the full benefits of Shopify 2.0, we highly recommend using our GitHub integration. The primary difference lies in the content storage format: most content is now stored in JSON templates within the template folder. Without GitHub integration, you would need to manually copy all template files to maintain your shop.

Our GitHub integration automates this process. After your initial conversion, we ensure that the template folder remains untouched in future conversions. This prevents any overrides to content changes made directly in the Shopify editor.

To enable Shopify 2.0, you need to activate it in your Liquify Project settings. We strongly advise against attempting this with a Shopify 1.0 project. Therefore, it’s crucial to decide whether to use Shopify 1.0 or 2.0 before starting your project.

Main Benefits with liquify

Dynamic Sections

With Shopify 2.0 enabled, all your content must be placed within a section tagged with li-section="SECTION NAME". Each section should be nested inside a main element with the attribute li-element="content-for-layout". Any content outside the content-for-layout element will be statically written into the layout file. This setup is particularly useful for elements like the Navbar, Footer, or Announcement Bar.

Within Shopify, you now have the flexibility to move, edit, add, or delete sections. This allows merchants to modify the structure and content without affecting the underlying code.

Page Templates

Each necessary page (Product, Collection, Blog, etc.) you create in Webflow must include the attribute li-page="PAGENAME" on the body tag. This tag informs Shopify about the specific purpose of each page. Content pages do not require a li-page tag, as they will automatically be recognized as static pages by Liquify.

If you do not want to import a page, simply add li-page="remove".

In Shopify, merchants can edit existing page templates or create new ones based on the existing templates. For instance, if you have a product that requires special features, you can create a new page template and assign it to that product. This functionality allows you to create landing pages, CMS pages (such as Jobs, Team, etc.), or alternative product pages.

Dynamic Content

With Shopify 2.0, you can populate section settings with dynamic content. For example, you can create a single Hero design and use it on both the Article and Collection pages by selecting the appropriate dynamic variable for each page. This feature allows you and your merchants to build a scalable infrastructure for your shop.

App Blocks

With App Blocks in Shopify 2.0, adding apps within your sections is very easy. We are currently working on implementing this feature in Shopify.

Fazit

At Halbstark, we always use Shopify 2.0 for our projects. In our opinion, it is the best way to maintain and develop Shopify themes. If you have any questions, feel free to join our Discord server.