Learn why Gartner just named Builder a Cool Vendor

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

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

shopify app

Builder supports a wide variety of needs and workflows. In this guide, we will break down the different options and why you might choose each.

Our default code generation tries to strike a balance between speed, flexibility, and compatability. It supports all features of our platform, such as server side rendering (for best possible page speed), using custom liquid code and snippets, liquid targeting, and more

Install code

Model code

Content code

This is the code you add where you want a Builder section to show up

{% include 'model.my-section.builder' %}

If you are not sure which option to use in this doc, this is a good one to start with and is the default.

Tip: When using the default code generation option, Builder writes code to your store's theme. If you are using any sort of version control outside of the Shopify admin, or are pulling your theme down to develop locally and then pushing changes back up, you will need to make sure you pull the latest from your production theme to ensure all Builder created files will not be overwritten or deleted. If you push new theme code that removes the Builder created files, Builder created sections or pages may disappear or malfunction.

This option works the same as above, but uses the render tag instead of include. The render tag is best for performance, but requires none of your code uses the include tag, which many stores and integrations use. The include tag will not load inside of any content in a render tag, but will display an error instead due to how Shopify has implemented this feature.

Install code

Model code

Content code

This is the code you add where you want a Builder section to show up

{% render 'model.my-section.builder' %}

This option is a best practice if you don't use include in your store's theme code. Also, if you already use render throughout your code, this may be required as using include (the default code generation) can show errors in your store.

From your settings page at builder.io/account/organization go to advanced settings and choose the advanced tab and turn on use render tag instead of include

For some use cases, it is preferable to not have Builder generate many files. This can be helpful if you manage your code in Git, push code often, or generally want less files in your theme code.

With this option, you only need one file per model in Builder. All content is saved in meta fields, so the same content works automatically across themes (vs having some parts of content or files be theme specific like in the above options).

With this option, server side rendering is still supported, but not with any custom liquid code or snippets within Builder content.

Install code

Model code

This is the code you add where you want a Builder section to show up

{% render 'model.my-section.builder' %}

To enable this option, go to builder.io/models, choose the model you want to turn this on for, choose show more options and turn on Use Shopify metafields

For some use cases, you want complete control of how content loads on your site. For this, you can use our Webcomponents SDK and have Builder generate 0 code for you. This content will load in the browser only, and you can't use any liquid code or targeting (but can use custom targeting).

<script async src="https://cdn.builder.io/js/webcomponents"></script>
<builder-component model="my-section">Loading...</builder-component>

See our webcomponents SDK docs for more

To enable this option, go to builder.io/models, choose the model you want to turn this on for, choose show more options and turn on Render client-side only

We also have an experimental code generation mode called High Speed Mode.

Builder has many additional integration options you can find here. For instance, if you use React or Vue you can add those integrations directly onto your Shopify store, or even use our HTML API.

See the integration examples below and you can find more info here.

All of these options work out of the box. Simply by publishing content you can access any of it via any SDK or API. Just know that instead of using liquid snippets like {% include 'model.my-section.builder' %} you would integrate in JavaScript like the examples above.

You will also want to turn on Render client side only for each model you want to ingegrate this way to avoid any unnecessarily generated liquid code.

Need Shopify help?

Storetasker logo

Are you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.

Submit a Project
Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Mitosis

AI Shell

Mitosis

Micro Agent

Mitosis

GPT Crawler

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences

Gartner Cool Vendor 2024