Integrate Sections
Enterprise plans
You can use Builder Sections to create reusable content across multiple pages. You can manage the code within your codebase, and teammates in the UI can iterate in the Visual Editor.
Examples include:
This tutorial shows you how to create and add an announcement bar section to a page.
For more conceptual information Section Models, refer to the Section Models documentation.
Prerequisites
To follow along with this tutorial, you should have the following:
- a Builder account
- an app in the framework of your choice with the appropriate Builder SDK installed
Add an announcement bar section to your app
Create a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the announcement bar is rendered in the context of the page.
BuilderComponent receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple BuilderComponent instances next to each other.
Check out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.
Create a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the announcement bar is rendered in the context of the page.
Content receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple BuilderComponent instances next to each other.
Check out How to Create a Page for a tutorial on how to create a page in Builder and Integrating Pages on how to render your Page content within your template.
Set up an integrated Announcement Bar section as follows:
Notice that RenderBuilderContent is a component you'd make. In this example, RenderBuilderContent is in builder.tsx:
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the announcement bar is rendered in the context of the page.
BuilderComponent receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple BuilderComponent instances next to each other.
Check out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.
Set up an integrated Announcement Bar section as follows:
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the announcement bar is rendered in the context of the page.
Content receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple Content instances next to each other.
Check out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.
Create a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Additionally, Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the page and the page's announcement bar are rendered.
BuilderComponent receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple BuilderComponent instances next to each other.
Check out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.
Create a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the page and the page's announcement bar are rendered.
Content receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple Content instances next to each other.
Visit How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your Page content within your template.
Paste the following code into a new file within the routes directory called $.tsx, making sure to replace YOUR_API_KEY with your Public API Key.
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the page and the page's announcement bar are rendered.
Content receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple Content instances next to each other.
Want the latest and greatest of Remix with Builder? We recommend using Gen 2.
Paste the following code into a new file within the routes directory called $.tsx, making sure to replace YOUR_API_KEY with your Public API Key.
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Paste the following code into a new file within the routes directory called $.tsx, making sure to replace YOUR_API_KEY with your Public API Key.
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Want the latest and greatest of Hydrogen with Builder? We recommend using Gen 2.
Paste the following code into a new file within the routes directory called $.tsx, making sure to replace YOUR_API_KEY with your Public API Key.
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
In your SvelteKit app, you can add the following to any page to fetch data from the server and render it wherever you want: an Announcement Bar. For this example, it could be on your +page.svelte page.
In +page.server.js, define a load() function that fetches the content for the announcement-bar section.
If your build is facing errors importing isolated-vm, exclude it from the pre-bundling step by adding the following code to vite.config.js:
In your SvelteKit app, you can add the following to any page to fetch data from the server and render it wherever you want: an Announcement Bar. For this example, it could be on your +page.svelte page.
Create a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
Import fetchOneEntry, Content, and isPreviewing from the Vue SDK.
Using fetchOneEntry(), specify the announcement-bar model, your Public API Key, and the announcement-bar content.
Create a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the url targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content, and Content renders it.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple Content instances next to each other.
Create a page, for example src/routes/[...index]/index.tsx, with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The example below shows the overall structure of including your section on a page:
The following App.js code is an example of integrating an announcement-bar model. Make sure to replace YOUR_API_KEY with your Public API Key:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the page and the page's announcement bar are rendered.
Content receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple Content instances next to each other.
Check out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.
Install the Builder Angular Gen 2 SDK.
Add a new component using the Angular CLI tool, which creates the announcement bar component:
In the template, announcement-bar.component.html, add this conditional container to your template. It checks if the content exists and, if so, renders the Builder content block using the specified model and the Public API Key.
Replace the placeholder content in the AnnouncementBarComponent with the code below. Make sure to provide your Public API Key.
Declare the route for the AnnouncementBarComponent in app.routes.ts. In this example, the path is /announcements, but yours might be different if you generated your component in a different directory:
Add a new component using the Angular CLI tool, which creates the announcement bar component:
In the template, announcement-bar.component.html, add this conditional container to your template. It checks if the content exists and, if so, renders the Builder content block using the specified model and the Public API Key.
Replace the placeholder content in your component's template with the following:
Update announcement-bar.component.ts:
Create an announcement-bar.resolver.ts file with the following code to fetch the content asynchronously from the server:
Add a route for the AnnouncementBarComponent to app.route.ts:
Edit your gatsby-config.js file to have the following contents, replacing YOUR_API_KEY with your Public API Key:
Create a page with the following contents:
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the page and the page's announcement bar are rendered.
BuilderComponent receives the content for the announcement bar through the content prop and renders it next to your page's content.
You can also render a Builder-managed page next to your announcement bar or any other section by placing multiple BuilderComponent instances next to each other.
Check out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.
Fetch your announcement bar's pre-rendered HTML from Builder's HTML API. Then inject it into your app's page template.
The example below uses Express.js. Replace apiKey with your Public API Key:
Sections are typically targeted using some information about the user's state.
For instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.
Aside from targeting, you can also query sections by custom fields.
The announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.
The snippet below demonstrates how the page and the page's announcement bar are rendered.
The announcement bar's pre-rendered HTML is interpolated into the page's template.
You can also render a Builder-managed page next to your announcement bar or any other section by interpolating their pre-rendered HTML next to each other.
Check out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.
Tip: When using the HTML API to serve content you need to integrate Builder previewing into your site so that previews are accurate. For detailed instructions, visit Previewing content on your site in the HTML API document.
In the view file where you want to render Builder content, import BuilderIO and add code to fetch your Builder content. This example uses ContentView.swift in a minimal iOS app.
Add the following code to import Builder and fetch the announcement bar, making sure to replace YOUR_PUBLIC_API_KEY with your Builder Public API Key.
For more flexibilty when working with an integrated Swift app, we recommend using Appetize.io. Find detailed instructions in the section Using your app with Builder in Integrating Pages.
Add the following code in any .liquid file that you would like this Builder section to appear on.
Learn more about Builder's Shopify code generation options and using Builder.io with Shopify for developers.
Add a new component using the Angular CLI tool, which creates the announcement bar component:
In app.module.ts, import BuilderModule at the top with the other JavaScript imports and add BuilderModule to the @NgModule() imports array.
Copy your Public API Key from your Account settings and pass it into forRoot().
Replace the placeholder content in your component's template with the following:
Creating a Section model
Create a Section model so you can make an announcement bar content entry.
- Go to Models.
- Click +Create Model.
- Select Section.
- Enter Announcement bar as the name for your new Section model.
- For all frameworks except Swift: change the Preview URL on the Model Options page to the URL of the page that you added code to display your section. This example uses
http://localhost:####/announcements, but yours might be different. - Click Save.
The video below demonstrates this process:
When you create or edit an announcement bar section, the Visual Editor displays your content embedded within your Preview URL page, providing visual context and importing styles from your site. It's a live view of your section, as it will look on one of your pages when you publish.
Published Sections typically appear across multiple pages with different URLs depending on how they're targeted. When previewing in the editor, however, they only appear within the Preview URL's page. For more information, refer to Editing and Previewing Your Site.
For more information what Section Models are and how to use them, refer to the Section Models documentation.
Creating an announcement bar content entry
Now that your Section model is set up, you can create an announcement bar content entry to add an announcement bar to your site.
- Go to Content.
- Click the + New Entry button and select Announcement bar.
- Build and style your announcement bar.
- Name the content entry.
- Click Publish.
The video below demonstrates this process:
Targeting by URL path
To make your announcement bar display based on targeting, in the section content entry; for example, in the announcement bar:
- Click on the Targeting icon.
- For Where, select URL path.
- Add the URL path you'd like to target.
- Click the Publish button.
The video below shows this process in an integrated Remix app where the targeted URL path is /builder so that the announcement bar doesn't show up on any other URLs. This process is the same, regardless of the framework you use. The URL path you target, however, might differ.
If you're using Gatsby, you might need to restart your app to render the announcement bar.
Live previewing custom fields and Data models
When working with sections that use custom fields or data models, it's helpful to set up live previewing. In this way you get real-time updates in the Visual Editor without having to publish your changes.
For detailed instructions on setting up live previewing for your custom fields and data models, visit Live Previewing Data Models and Custom Fields.
What's next
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
Use your custom components in Builder
To use your own components in the Visual Editor, including fully customizing and controlling the blocks your team works with, start Integrating Custom Components.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some Sections in Builder and drag in some elements. Play with styles and explore the UI.
Use your custom components in Builder
To use your own components in the Visual Editor, including fully customizing and controlling the blocks your team works with, start Integrating Custom Components.
With your app and Builder working together, the next step is the fun part–add some Sections in Builder and drag in some elements. Play with styles and explore the UI.
Use your custom components in Builder
To use your own components in the Visual Editor, including fully customizing and controlling the blocks your team works with, start Integrating Custom Components.
For more information on how to work with Models in Builder, refer to Understanding Content Models.
With your app and Builder working together, the next step is the fun part–add some Sections in Builder and drag in some elements. Play with styles and explore the UI.
Learn more about our Shopify code generation options and using Builder.io with Shopify for developers
With your app and Builder working together, the next step is the fun part–add some Sections in Builder and drag in some elements. Play with styles and explore the UI.