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.
