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.
There are two key ways customers use Theme Studio:
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
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
- An account with Builder
- An account with Shopify
- If you haven't already, create a store in Shopify
- Add the Builder.io Theme Studio app to your Shopify store
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!