Control any part of your storefront 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:
Troubleshooting
Have any issues with the above steps? Chat us and we'll happily help you out!
