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

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

Typography

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

Custom liquid components are useful for when you want to (or need to) create custom components or functionality using liquid code. For example you might want to create a custom product cell and control all the logic and styles within liquid code that lives in your theme, but you want to give other non technical people on your team the ability to customize (e.g. change the product, customize text, etc) and use the component within content they are creating inside of Builder.

One important thing to consider when evaluating whether or not to use custom liquid components or instead create re-usable content like symbols within Builder is how much do you want your team to be able to edit the content. If you are creating something like a carousel slider for your homepage and would like your non technical team to be able to edit pretty much anything using the Builder drag and drop editor, it makes more sense to build that content within Builder as a symbol or template. If on the other hand you want to build a complex component that you want to live within your theme code, and only want your team members to change minor things like the title or background image, creating a custom liquid component probably is the right approach. This doc on when to use what goes into a little more depth and can help you decide what to use.

To create liquid components, create a new file matching the pattern snippets/*.block.liquid , e.g. snippets/hero.block.liquid. Note: in order for custom liquid components to function properly within Builder, you will need to create them as a snippet, not a section.

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. Just keep in mind the contents of this {% comment schema %} tag must be valid JSON.

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' %}

The input schema for custom liquid components is essentially the same as what we define for use by our docs on custom React components. To learn more about the options you have when specifying input schemas, see our guide for custom components here

When building out custom liquid components it is important to consder keeping them simple and on the smaller side of things. If you find yourself creating a component with 10 or 20 inputs, it would probably make sense to either break it down into smaller components, or choose to remove some of the content from the liquid component and build it as a template or symbol in Builder so that your non developer teammates can edit it more easily. For example, if you are creating an accordion component to handle frequently asked questions (FAQs), instead of building the component to take a certain fixed number of questions and answers, trim it down so the component just consists of a single question and answer. Then in the Builder visual editor your teammates can drag and drop as many of the FAQ components onto the page as they need as they add or delete FAQs, instead of bugging you to add additional inputs as they decide to add more questions/answers. Keeping components small helps improve performance and makes it easier for your team to move more quickly.

Custom sections

You can add custom sections with section models for drag and drop editable content areas of your Shopify 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!

Was this article helpful?