Resources

Ɨ

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

ā˜°

Home

Forum

Blog

Github

Login

Signup

Made in Builder

Getting Started with Builder for Shopify

A quick guide to get you up and running with our app for Shopify-hosted stores.

Builder's Shopify app allows you to customize, optimize, and re-imagine your Shopify storefront. No coding required. Builder works with any and all themes and enables you create the storefront of your dreams.

Using our powerful drag-and-drop editor, you can create and edit any type of content, whether you're looking to optimize they key parts of your shopping funnel, like 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.

How does Builder work?

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

Structuring your site

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

Extending with code

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

Featured Tutorials

Creating a landing page in 5 mins

Create a product promotion with custom dropzones

Cross-sell sections of your cart

Requirements

  • An account with Builder
  • An account with Shopify

Setup

  • If you haven't already, create a store in Shopify
  • 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, you'll 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!

Up next

Safe mode
Was this article helpful?