×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Developers

GET STARTED

FRAMEWORKS

Builder

Builder SDKs, examples, starters, and plugins

Mitosis

Universal component compiler. Write components once and compile to Vue, React, Svelte, Angular, and more

Builder

Builder SDKs, examples, starters, and plugins

Qwik

Extreme high speed frontent framework

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Made in Builder

‹ Back to blog

Shopify Online Store 2.0 + Builder = Magic

By Brent Locks

Summary

Online Store 2.0 is great for the Shopify ecosystem, and will make editing your Shopify storefront that much easier. Key to Online Store 2.0 is an upgraded editing experience. The new “sections everywhere” capability allows merchants to build out their storefront using pre-built, custom sections. Builder has always supported custom sections within Shopify, and with “sections everywhere” live, we wanted to highlight how Builder’s capabilities compare and contrast.

Overall, Builder differs from “sections everywhere” by allowing merchants to create custom sections from scratch, without relying on their developers/agency. Builder also allows merchants to add optimization capabilities to any section across their storefront. This includes high-speed A/B testing, heatmaps and advanced content segmentation based on any criteria, such as login status, items in cart, browsing behavior, and more.

The Details

Prior to Online Store 2.0, Shopify enabled developers and agencies to build custom sections (i.e. predefined section templates), which merchants could add to their homepage using Shopify's theme editor. With Online Store 2.0, you're no longer limited to just the homepage, but can add custom sections anywhere on your storefront. We’re thrilled Shopify is now providing this much needed flexibility, which Builder has always supported.

The key thing about these section templates is they need to be pre-built and pre-defined. Your developers, or agency, build these sections and install them into Shopify. You can use those section templates anywhere across your storefront but you have to stay within the boundaries of those templates. Builder allows you to do the same and create new ones from scratch visually, so you don’t need to go back to your developers/agency for updates to existing section templates or to create new ones. You can even mix and match section templates and bespoke sections with Builder.

Builder gives you complete drag and drop control over any section. You can drag and drop to build, test, edit and publish sections to your storefront. You can effectively install a "blank template" anywhere on your storefront and drag and drop to put anything in that section -- text, images, videos, carousels, products, collections, add to cart buttons, etc. Builder also lets you add optimization capabilities to any section, including built-in A/B testing, heatmaps and content segmentation based on any criteria (e.g. logged in/out, previous purchases, etc.) -- you'll never be limited by what you can build and optimize.

Beyond the ability to actually create sections from scratch, there are a few other benefits and differentiators:

1. Leverage new Shopify sections - Any new sections your developers, or agency, create for your storefront can also be used and dragged and dropped within Builder.

2. Content targeting - While Online Store 2.0 makes "sections everywhere" possible, managing sections everywhere will likely be a very tedious effort to manage efficiently with Shopify's theme editor. With Builder you can do elaborate targeting in a very seamless manner -- e.g. have sections show up on certain product or collection pages, easily do site-wide content/banners, etc.

3. Audience targeting - You can deliver different experiences to customers that are logged in vs logged out, or based on shopping behavior, what's in the cart, and more out-of-the-box with Builder, but can't with Shopify's theme editor.

4. A/B testing - You can quickly test copy, assets, CTAs, layouts, etc. of a section with Builder’s built-in A/B testing. You can't do the same with Shopify's theme editor.

5. Going headless - The custom sections your developers/agency built for your Shopify-hosted store, won't transfer over if you decide to go headless. With Builder, all content can seamlessly migrate to any headless stack, including Shopify's upcoming Hydrogen headless solution.

Here's a demonstration of creating fully customizable sections for Shopify in Builder, and managing them in the Shopify theme editor:

Conclusion

Online Store 2.0 gives merchants more flexibility with “sections everywhere,” but these sections need to be pre-built and predefined by your developers/agency before you can use them to build out your Shopify storefront. It will make sense for merchants to do more in Shopify's theme editor than they do today but, because of the differentiators described above, we see massive potential for Builder to add even more value to the Shopify ecosystem. Online Store 2.0 makes working with Builder even easier, and as more merchants start using sections, they will start seeing more value from Builder’s additional capabilities in helping them build faster and grow faster.

We've been getting a lot of questions about Shopify's Online Store 2.0, "sections everywhere," and Builder.io, which we've answered in this video:

Additionally, you can find our full documentation on Builder with sections everywhere here

Join the invite list

Read more on the blog
Death by Closure (and how Qwik solves it)
A first look at Qwik - the HTML first framework
Shopify Unite 2021 Recap

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

DEVELOPERS

Builder for Developers

Developer Docs

Github

Mitosis

Qwik

INTEGRATIONS

All integrations

Shopify

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

Partners

© 2021 Builder.io, Inc.

Security

Privacy Policy

Terms of Service