Made in Builder

Γ—

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

☰

Product

Features

Integrations

Talk to an Expert

Pricing

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

☰

Creating and Using Section Models

Sections in this document are separate and distinct from the Section block that you drag into a page from the Visual Editor's Insert tab.

This Section is a content model, just as a Page is a content model. In fact, the Section model is very similar to the Page model.

You can create Section models and use the Section's content items inside Symbols on your Builder pages and your development team can use them in your company's own codebase outside of Builder through the Content API or by using an SDK. Thus you can have the same content both inside Builder and outside of Builder, even though the use outside Builder is a developer task.

πŸ‘‰ Tip: This tutorial shows you how to create and use Section Models in the Builder UI. To connect Section Models you create in the UI with your codebase, check out Integrating Sections in Your Codebase.

Creating a Section Model

To create a Section model, navigate to the Content area of your Builder Space in the left side bar.

Under Models, click Add/Edit Models.

Choose Section in the dialog, and click Create Model.

When the Model Options dialogue opens, give your Section Model a name. Leave the defaults for the Model and ignore the code sections.

Unlike a Page, a Section does not have a URL. However, you can give your Section an editing URL. This is what Builder will open in the Visual Editor for editing so it can be any URL where this Builder section will be displayed. For example, if this section is to be site-wide, you can use your homepage URL, such as https://our-site.com.

Your new Section appears in the list of Models. Here it's called Header.

Creating an instance of a Section Model

Click +New and select Header.

A new Section has a lot in common with a new page; however, a Section only contains part of your content.

Next, add some content. The following example shows adding an Image block.

Next, choose an image and give the Section a name in the upper-left corner. Click the Publish button.

Using a Section in a Page

Open a page where you want to use the Section.

From the Insert tab, under the Code section, drag a Symbol onto the work area.

Click the purple Edit Symbol button.

Choose the instance of your Section model that you just created to add to the symbol. This example uses the Header section demo previously added as a Section.

Now your Section's content appears in your Symbol. While you use a Symbol to display your Section Model content, your development team can use the same Section directly in code via the Builder Content API.

Now the Section content appears anywhere you use this Symbol.

Next steps

Now that you know how to create reusable content using a Section Model, explore more ways to reuse elements in the following documentation:

Types of Reusable Blocks: learn about how to reuse content and designs in Builder

Introduction to Symbols: learn more about editing and reusing Symbols

Using Builder Sections with your code

For developers

Symbols and Sections are powerful features of Builder that streamline team member pairing. Business and design teammates have space to iterate, test, and design, while developers can focus on the code. For more information, refer to Integrating Sections into Your Codebase.

Was this article helpful?