Made in Builder

Made in Builder




Use Cases





Get StartedLogin




Talk to an Expert











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



Get StartedLogin

Getting Started with Models

In Builder, you structure your site content with models. These can be created and edited from the models tab in your dashboard.

Integrate page building

Integrate section building

Model types has a powerful concept of model types that unlock a ton of power. Read more about the 3 main model types to know below, and see our best practices guide for ways to use these models to structure your site

Try it out

Use pages to Build to manage entire pages, like:

  • Homepage
  • Content pages (about, partners, etc)
  • Blog pages
  • Landing pages
Try it out

Use Sections to Build and parts around your site or app

  • Announcement bars
  • Product editorial
  • Collection heros
  • Cart upsells

Use targeting to show different content on different pages and to different users

Try it out

Use Data to control structured data like

  • Navigation links
  • Product information
  • Blog post authors

Page models

For drag+drop full pages

Section models

For drag+drop page sections

CMS Data models

For custom structured data

Page models

Page models are great for building custom pages. They require a URL to be chosen for each page and allow drag+drop editing using the standard components as well as your custom components. By default pages are chosen by their chosen URL via targeting

Every Builder space comes default with one page model - which is all most need. You can customize this model with custom fields too, for instance for meta tags.

You can also create custom page models too, for instance if some pages on your site should have different settings. For instance at, we have a page model for landing pages, as well as a separate page model for our docs (like the one you are reading now!) that have some different required fields

See our full guide on integrating page building

View our tutorial on Integrating Page Building to learn more about how to integrate landing page building

What is editing like for each model type?


Editing occurs between your site header and footer, and can build out the full page


Editing occurs in the part of the page you added your Builder section.

Use targeting to target different content of the section on different pages or for different users


Enter data into structured fields

Structuring your site with models

One of the easiest ways to get started is to add landing page building to your site. Once you have that, you can start adding editable sections across your site, and use targeting to choose the right content for the right users

Here are some examples we recommend for how to structure various pages on your site

What is a model?

In Builder, a model represents a piece of your site that you want to update dynamically with multiple content entries via a single code installation. This is useful for use cases like targeting - e.g. having one piece of content for mobile and another for desktop. This also works well for creating dynamic landing pages, by embedding the component code one time and creating new entries targeting new URLs. Below, we will go over:

  • Models & fields
  • Creating a custom model
  • A/B testing
  • Targeting & scheduling

Models & testing

A good example of using a custom model is the page model. This generally has two custom fields. The title, which is some text you can enter for the title that when you’re using the APIs for Builder, you’ll want to take the title data attribute and insert it into the title tag for your page for SEO purposes. As well as the description field, it is up to you if you want to use that for the meta description tag. You can add your own custom fields if you want to. At the top there are some quick code previews on how to pull and use these models.

Now, if you create a new page or edit an existing page, you can view and edit these custom fields on the page. If you made any fields required, they will appear red until that field is updated. If you don’t complete the required fields, you will not be able to publish your page.

Creating a custom model

Lets go over to, and lets say they’ve already made pages in Builder, but now they want to control other areas of the website with some Builder drag and drop content to give their marketers freedom of what they want to present and how they want to do it. Let's make a new custom model. Navigate to the models page, and create a new component. Were going to call this bottom slide up. Once you create this you’ll see the documentation and how to use it. You can just pull the latest bottom slide up content by hitting the HTML API.

You can also add custom fields that your marketers could input that you might use in the API response to dictate how this displays or other options. But for now, we are going to keep this basic. Just by creating a component model you get the full drag and drop editor and all of the APIs to pull the content and the SDKs. For instance, if you’re using react, you just have to enter “<BuilderComponent name="bottom-slide-up" />” where you want the content to be displayed, and it will fetch and display.

Now that we’ve made this model, let’s create some content. Navigate back to the content section and create a new page. You will notice “bottom slide up” is now an option. Select this, and create your content and publish it.

Adding more fields to a page model

The standard page options (page URL, page title, and description) can be found in the options tab of each page. To add more page options, navigate to the models tab and you can add more fields here.

A/B testing

A/B testing, or test variation, is creating another version of your page with changes that you want to test. You can test multiple variations against the control to see which one works best. Go to the “tests” tab and select “create test variation”. Lets give this a 50/50 test ratio. Now, if you go back to preview you’ll see a chooser at the top (variation one and default). In variation, we can change the content. If you use any of the JavaScript SDKs, like React, it will automatically handle choosing the test variation to show. If you’re using the HTML API, you’ll get a map of test variations and you can handle this as you choose. To make this more interesting, we can create multiple instances of this. Go back to the Content section and create another bottom slide up page. We will call this “Mens bottom slide up”, and this will display different content. Now, we have two different entries for the same model type. Builder will choose which one to use by priority. You can change page priority by clicking on the page and dragging it to the top.

Targeting & scheduling

We are going to use targeting and scheduling to decide which page is going to show when. For targeting, we can say anything we know about our users (e.g. locale). You can target off of anything. For our example we are going to target off of URL that starts with “/browse/men”. Now, if a user is at this URL, this slide up will appear. Lets say you want to have a slide up only appear for a certain amount of time (e.g. a one day sale), you can schedule this page for a certain date and time. Now, this slide up will only appear for the date selected.

Up next

Custom fields
Was this article helpful?