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!

Shopify Theme Studio for Developers

Builder.io can work elegantly with any Shopify theme and you an extend any part of your content with custom code.

Using your theme CSS

Typgography

Any CSS of your theme automatically applies to your Builder.io content. For example, adding a Button will inherit any button { ... } styling in your theme. Same with any fonts or typography, fonts automatically inherit, and choosing "heading 1" or "heading 2" in the rich text editor will apply your h1, h2, etc fonts

CSS classes

You can also apply any CSS classes from your theme CSS to any layer in Builder. Just select the layer and from the style tab on the left scroll to "css classes" in the "advanced" section and apply them. You can also them save these layers as templates so your editors can have an easy selection of templates (e.g. "button bold", "hero", etc) to choose from with all of the classes and somem example content already applied

Custom Javascript

You can customize every part of the Builder.io editor with custom javascript - for example click actions, data bindings, etc. We have several useful guides on this, including:

Custom Liquid

Custom code blocks

You can add liquid code anywhere onto your Builder pages and content. The simplest way to do go to the "insert" tab in the Visual Editor and drag in a "Custom Code" block. You can then add any custom liquid code directly there

You can then save these as templates to make dropping in the same code easy to other similar pages

Custom liquid components

You can easily drop in custom liquid components to your pages that you manage in your theme codebase. To create liquid components, create a new file matching the pattern snippets/*.block.liquid , e.g. snippets/hero.block.liquid

Then, in your file, add a {% comment schema %} tag defining a schema for your custom block. Your block and be as simple as only having a name, or it can have inputs as well

Then, to add this component to your page, from the "insert" tab on the left in the Visual Editor, scroll down to "liquid snippets", and drop in your snippet

Note that when you update your snippet all content in Builder referencing this snippet will automatically update, as the code they generate uses include , e.g. {% include 'hero.block' %}

To learn more about how to specify input schemas, see our guide for custom components here

Using Shopify sections

When you import theme pages in Theme Studio references to your Shopify sections are preserved. For instance, when importing a product page made up of a sections/product.liquid section, editors can add and target/test/schedule content above and below your section, and the generated code still uses {% section 'product' %} so any liquid code in that section or settings applied to it will be preserved and maintained as you make changes to them

Custom dropzones

You can add custom dropzones with component models for drag and drop editable content areas of your Shoipfy theme. These are great for carving off part of your storefront for editor control - such as site-wide ribbons, cart upsells, custom collection and product page editable areas (hero, editorials, etc).

See our step by step guide for creating a component model for a site-wide ribbon here

Questions & comments

Ask us anything in our forum - we reply quickly and thoroughly!

Visit the Builder Forum

Visit our Github

Up next

Creating a site ribbon
Was this article helpful?