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 Code Generation Options

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.

Default code generation

Out 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

How it works

Install code

Model code

Content code

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

When to use this

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

Render code generation

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.

How it works

Install code

Model code

Content code

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

When to use Render code generation

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.

How to enable Render code generation

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

Metafield code generation

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.

How it works

Install code

Model code

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

Enabling metafield code generation

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

Webcomponents

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).

How it works

See our webcomponents SDK docs for more

Enabling webcomponents

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

Other SDKs and APIs

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.

How it works

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

Enabling custom SDK/API usage

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.

Was this article helpful?