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

Forum

Blog

Github

Signup

Made in Builder

Visually control specific regions of your site with sections

Builder editable regions can be dropped onto existing pages to allow drag and drop editing anywhere on your site, app, or store. This includes the ability to a/b test, target, and schedule your content as well

What is a section?

A section is a Builder-editable region of an existing page of yours that you integrate into that pages code. Once created, you can edit that content and publish directly from Builder

How to create a section

1. Create a section model

To create a custom section, start by creating a model.

To do this, let’s create a new section model. Go over to builder.io/models, select +create model and choose section.

Then give your section a name. In our example, let's make a site-wide ribbon section we'll call ribbon.

2. Set the preview URL

Then, let’s give our section an editing URL. This is what Builder will open in the Visual Editor to edit your ribbon, so this just needs to be any URL this Builder section will display on. In our case, since this section will be site-wide, we can just enter our homepage URL (e.g. https://our-site.com)

Note that if you are adding this code on a collection page, choose one of your collection pages (https://our-site.com/collections/something) as the editing URL. Same goes for product page, etc.

3. Install the code

4. Create content

Once everything is installed, head over to /content and hit +new entry and create a content entry. This will open the editor the page you specified, and where you installed the code should show add block.

Now drag and drop to create your content, and hit publish when ready! Note that you can also use targeting and a/b testing to show different content to different visitors or pages.

Conclusion

You can use custom sections for tons of use cases in Builder. For instance, try out any of these tutorials for step by step instructions for how to accomplish some common use cases with custom sections:

Creating a site-wide ribbon

Troubleshooting

Have any issues with the above steps? Chat us and we'll happily help you out!

Was this article helpful?