BUILDER

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

This page was made in Builder!

Getting Started with Theme Studio

A quick guide to get you up and running with the Builder Theme Studio

Builder's Theme Studio for Shopify allows you to customize, optimize, and re-imagine your Shopify storefront. No coding required. Theme Studio 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 Theme Studio, 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.

Get Started

There are two key ways customers use Theme Studio:

1

Dropzones

Use dropzones to add Builder-editable regions anywhere on your storefront

Choose this when you want to make edits to your current storefront without replacing whole pages

LEARN MORE

2

Page Building

Create new pages in Builder of any page type - product, collection, landing, etc - and customize it completely

Choose this when you want to create or replace pages of your storefront completely with full control

LEARN MORE

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

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

Now that you are in Theme Studio 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.

Hover over the page or element that you want to add or modify and then Edit. 

The first time you edit any page or element, you will be presented with two options:

1. Import Your Current Template - this imports Sections from your current theme pages and allows you to create and optimize content around those sections

2. Choose A Template - every element and aspect of the page can be changed and customized

Now you're ready to customize that page or element by dragging and dropping new blocks (text, images, videos, products, collections, add to cart buttons), adjusting the style and layout, personalize your content for specific audiences— all without having to write code. It's pretty magical!

Up next

Safe mode
Was this article helpful?