Made in Builder.io

Upcoming webinar with Figma: Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

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

shopify app

Builder's Shopify app helps you customize, optimize, and re-imagine your Shopify storefront–no coding required. Builder works with any and all themes so you can create the storefront of your dreams.

Using Builder's powerful drag-and-drop editor, you can create and edit any type of content, whether you're looking to optimize the key parts of your shopping funnel, such as product and cart pages, or feature an upcoming launch or promotion across all your pages.

Publishing directly from Builder, you can optimize your content and experiences with targeting, A/B testing, and see detailed analytics and heat maps to measure performance and show how visitors are engaging with your storefront.

To use Builder, first decide what parts on your site should be controlled by Builder vs. hard coded in your site or application. There are two main ways you can do this:

  • Visual pages - full drag and drop control between your site's header and footer
  • Visual sections - make a part of a page visually editable in Builder and use our targeting and scheduling to decide who sees what
Try it out

Use pages to Build to manage entire pages, like:

  • Homepage
  • Content pages (about, partners, etc)
  • Blog pages
  • Landing pages
Try it out

Use Sections to Build and parts around your site or app, like

  • Announcement bars
  • Product detail descriptions
  • Collection heros
  • Cart upsells

One of the easiest ways to get started is to add landing page building to your site. Once you have that, you can start adding editable sections across your site, and use targeting to choose the right content for the right users

Here are some examples we recommend for how to structure various pages on your site

For advanced use cases, you can also extend Builder with custom code, as well as use code from your theme inside Builder.

Featured Tutorials

Create a landing page in Builder

Everyone

Get started with Builder and Next.js

Developer

  1. If you haven't already, create a store in Shopify.
  2. Add the Shopify app to your Shopify store.

Once you have the app installed in your Shopify store, you're ready to get started.

Now that you are in Builder, you can explore all it has to offer. You can either navigate your storefront in the preview pane on the right or in the sidebar on the left.

Click the page or section you want to add or modify and either select +Create or View all.

The first time you edit any page or element, you will be presented with a set of options

For example, if you were to create a new homepage, you could choose to to either:

  1. Create a new homepage
  2. Add an editable section to your existing homepage

Next, select who should be able to see this new page or section

  1. Everyone
  2. Select visitors based on targeting

Once you confirm your choices, you're ready to start building.

Need Shopify help?

Storetasker logo

Are you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.

Submit a Project
Was this article helpful?

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

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy