Sign up: Designing Enterprise UI Directly on Production Code

What are best AI tools? Take the State of AI survey

Builder.io
Builder.io
Contact sales

Sign up: Designing Enterprise UI Directly on Production Code

What are best AI tools? Take the State of AI survey

Builder.io
Builder.io
< Back to blog

ecommerce

Shopify Online Store 2.0 + Builder = Magic

August 2, 2021

Written By Brent Locks

Builder's Shopify app supports Online Store 2.0

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's Shopify app lets you build your store visually

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

Light bulb tip icon.

Tip: Visit our Shopify hub for more resources.

Join the invite list

Share

Twitter
LinkedIn
Facebook

Generate high quality code that uses your components & design tokens.

Try it nowGet a demo

Continue Reading
AI8 MIN
Subagents: When and How to Use Them
WRITTEN BY Alice Moore
February 3, 2026
AI9 MIN
Best LLMs for coding in 2026
WRITTEN BY Matt Abrams
January 28, 2026
AI8 MIN
Lovable Alternatives for 2026
WRITTEN BY Alice Moore
January 27, 2026

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Resources

User Guides

Developer Docs

Forum

Blog

Github

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Design to Code

  • Headless CMS

    Multi-Brand CMS

  • Landing Pages

  • Web Apps

  • Prototypes

  • Marketing Sites

  • Headless Commerce

  • Documentation

  • Fusion Docs

  • Publish Docs

  • Figma AI to Production Code

  • AI Prototyping for Product Managers

  • Figma to Storybook

  • Figma to App Converter

  • Blog

  • Webinars

  • Guides

  • Case Studies

  • Community Forum

  • Partners

  • Affiliate Program

  • CMS Integrations

  • CMS Blueprints

  • Glossary

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

  • About

  • News

  • Careers

  • Contact Sales

Security

Privacy Policy

SaaS Terms

Trust Center

Cookie Preferences

YouTube icon
Github icon
Blsky Icon
Twitter "X" icon
LinkedIn icon
Feed Icon