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.
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
Create a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
// pages/[...page].tsx
import React from "react";
import { useRouter } from "next/router";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { BuilderContent } from "@builder.io/sdk";
import { GetStaticProps } from "next";
// Replace with your Public API Key
builder.init(YOUR_API_KEY);
// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
// Fetch the builder content for the given model
const announcementBar = await builder
.get("announcement-bar", {
userAttributes: {
urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
},
})
.toPromise();
// Return the announcement bar content as props
return {
props: {
announcementBar: announcementBar || null,
},
// Revalidate the content every 5 seconds
revalidate: 5,
};
};
// Define the announcement bar component
export default function announcementBar({ announcementBar }: { page: BuilderContent | null }) {
const router = useRouter();
const isPreviewing = useIsPreviewing();
// If the announcement bar is available, render
// the BuilderComponent with the content
return (
<>
{/* Render the announcement bar */}
<BuilderComponent model="announcement-bar" content={announcementBar || undefined} />
</>
);
}
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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
const urlPath = '/' + (params?.page?.join('/') || '');
const announce = await builder
.get('announcement-bar', { userAttributes: { urlPath } })
.toPromise();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.
return (
<>
<!-- Put your header here -->
<YourHeader />
<BuilderComponent model="announcement-bar" content={announce} />
<!-- The rest of your page -->
<TheRestOfYourPage />`
</>
);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:
/**
* https://www.builder.io/c/docs/integrate-section-building
* https://www.builder.io/c/blueprints/announcement-bar
* src/pages/announcements/[...page].tsx
*/
import {
Content,
fetchOneEntry,
type BuilderContent,
} from '@builder.io/sdk-react';
import type { GetStaticPaths, GetStaticProps } from 'next';
const BUILDER_API_KEY = 'YOUR_API_KEY';
const MODEL_NAME = 'announcement-bar';
export const getStaticProps: GetStaticProps = async ({ params }) => {
const urlPath =
'/announcements/' +
(Array.isArray(params?.page) ? params.page.join('/') : params?.page || '');
const announcementBar = await fetchOneEntry({
model: MODEL_NAME,
apiKey: BUILDER_API_KEY,
userAttributes: { urlPath },
});
return {
props: { content: announcementBar },
};
};
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [],
fallback: 'blocking',
};
};
const AnnouncementBarPage = (props: { content: BuilderContent | null }) => {
return (
<>
{props.content && (
<Content
content={props.content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
/>
)}
{/* content coming from your app (or also Builder) */}
<div>The rest of your page goes here</div>
</>
);
};
export default AnnouncementBarPage;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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}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.
const announcementBar = await fetchOneEntry({
apiKey: 'YOUR_API_KEY',
model: 'announcement-bar',
userAttributes: { urlPath },
});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.
return (
<>
<Content
content={props.content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
/>
<TheRestOfYourPage />
</>
);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:
// Example file structure, app/[...page]/page.tsx
// You could alternatively use src/app/[...page]/page.tsx
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "../../components/builder";
// Replace with your Public API Key
builder.init(YOUR_PUBLIC_API_KEY);
interface PageProps {
params: {
page: string[];
};
}
export default async function Page(props: PageProps) {
const model = "announcement-bar";
const content = await builder
// Get the page content from Builder with the specified options
.get("announcement-bar", {
userAttributes: {
// Use the page path specified in the URL to fetch the content
urlPath: "/" + (props?.params?.page?.join("/") || ""),
},
// Set prerender to false to return JSON instead of HTML
prerender: false,
})
// Convert the result to a promise
.toPromise();
return (
<>
{/* Render the announcement bar */}
<RenderBuilderContent content={content} model={model} />
</>
);
}Notice that RenderBuilderContent is a component you'd make. In this example, RenderBuilderContent is in builder.tsx:
// components/builder.tsx
"use client";
import { ComponentProps } from "react";
import { builder } from "@builder.io/sdk";
import { BuilderComponent, useIsPreviewing } from "@builder.io/react";
// Replace with your Public API Key
builder.init(YOUR_API_KEY);
type BuilderPageProps = ComponentProps<typeof BuilderComponent>;
export function RenderBuilderContent(props: BuilderPageProps) {
// Call the useIsPreviewing hook to determine if
// the page is being previewed in Builder
const isPreviewing = useIsPreviewing();
// If "content" has a value or the section is being previewed in Builder,
// render the BuilderComponent with the specified content and model props.
if (props.content || isPreviewing) {
return <BuilderComponent {...props} />;
}
return null;
}
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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
const urlPath = '/' + (params?.page?.join('/') || '');
const announce = await builder
.get('announcement-bar', { userAttributes: { urlPath } })
.toPromise();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.
return (
<>
<!-- Put your header here -->
<YourHeader />
<BuilderComponent model="announcement-bar" content={announce} />
<!-- The rest of your page -->
<TheRestOfYourPage />`
</>
);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:
/**
* https://www.builder.io/c/docs/integrate-section-building
* https://www.builder.io/c/blueprints/announcement-bar
* app/announcements/[...slug]/page.tsx
*/
import {
Content,
fetchOneEntry,
isEditing,
isPreviewing,
} from '@builder.io/sdk-react';
interface PageProps {
params: {
slug: string[];
};
searchParams: Record<string, string>;
}
const apiKey = 'YOUR_API_KEY';
const model = 'announcement-bar';
export default async function Page(props: PageProps) {
const urlPath = '/announcements/' + (props.params?.slug?.join('/') || '');
const announcementBar = await fetchOneEntry({
apiKey,
model,
userAttributes: { urlPath },
});
const canShowAnnouncementBar =
announcementBar ||
isPreviewing(props.searchParams) ||
isEditing(props.searchParams);
return (
<>
{canShowAnnouncementBar && (
<Content content={announcementBar} apiKey={apiKey} model={model} />
)}
{/* Your content coming from your app (or also Builder) */}
<div>The rest of your page goes here</div>
</>
);
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}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.
const content = await fetchOneEntry({
apiKey: 'YOUR_API_KEY',
model: 'announcement-bar',
userAttributes: { urlPath },
});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.
return (
<>
/* Announcement bar goes here */
<Content model="announcement-bar" content={content} apiKey={YOUR_API_KEY} />
<TheRestOfYourPage />`
</>
);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:
import { useEffect, useState } from "react";
import { BuilderComponent, builder } from "@builder.io/react";
// Replace with your Public API Key.
builder.init(YOUR_API_KEY);
export default function Page() {
const [announcement, setAnnouncement] = useState(null);
useEffect(() => {
builder
.get("announcement-bar", {
userAttributes: {
// To allow targeting different announcements at different pages (URLs)
urlPath: window.location.pathname,
},
})
.toPromise()
.then((announcementBar) => setAnnouncement(announcementBar));
}, []);
return (
<>
{/* Put your header here. */}
<YourHeader />
<BuilderComponent model="announcement-bar" content={announcement} />
{/* Put the rest of your page here. */}
<TheRestOfYourPage />
</>
);
}
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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
const urlPath = '/' + (params?.page?.join('/') || '');
const announce = await builder
.get('announcement-bar', { userAttributes: { urlPath } })
.toPromise();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.
return (
<>
<!-- Put your header here -->
<YourHeader />
<BuilderComponent model="announcement-bar" content={announce} />
<!-- The rest of your page -->
<TheRestOfYourPage />`
</>
);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:
/**
* https://www.builder.io/c/docs/integrate-section-building
* https://www.builder.io/c/blueprints/announcement-bar
* src/components/AnnouncementBar.tsx
*/
import {
Content,
fetchOneEntry,
type BuilderContent,
} from '@builder.io/sdk-react';
import { useEffect, useState } from 'react';
const BUILDER_API_KEY = 'YOUR_API_KEY';
const MODEL_NAME = 'announcement-bar';
export default function AnnouncementBar() {
const [content, setContent] = useState<BuilderContent | null>(null);
useEffect(() => {
fetchOneEntry({
model: MODEL_NAME,
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: window.location.pathname,
},
})
.then((content) => {
if (content) {
setContent(content);
}
})
.catch((err) => {
console.log('Oops: ', err);
});
}, []);
return (
<>
{content && (
<Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
/>
)}
{/* content coming from your app (or also Builder) */}
<div>The rest of your page goes here</div>
</>
);
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}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.
const urlPath = window.location.pathname;
const content = await fetchOneEntry({
model: MODEL_NAME,
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: urlPath,
},
options: getBuilderSearchParams(new URL(location.href).searchParams),
});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.
return (
<>
{/* Put your announcementBar here */}
<Content model={MODEL_NAME} content={content} apiKey={BUILDER_API_KEY} />
{/* The rest of your page */}
<TheRestOfYourPage />
</>
);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.
/**
* https://www.builder.io/c/docs/integrate-section-building
* https://www.builder.io/c/blueprints/announcement-bar
* app/routes/announcements.$slug.tsx
*/
import {
Content,
fetchOneEntry,
type BuilderContent,
} from '@builder.io/sdk-react';
import { useEffect, useState } from 'react';
const BUILDER_API_KEY = 'YOUR_API_KEY';
const MODEL_NAME = 'announcement-bar';
export default function AnnouncementsRoute() {
const [content, setContent] = useState<BuilderContent | null>(null);
useEffect(() => {
fetchOneEntry({
model: MODEL_NAME,
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: window.location.pathname,
},
})
.then((content) => {
if (content) {
setContent(content);
}
})
.catch((err) => {
console.log('Oops: ', err);
});
}, []);
return (
<>
{content && (
<Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
/>
)}
{/* content coming from your app (or also Builder) */}
<div>The rest of your page goes here</div>
</>
);
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}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.
const urlPath = '/' + (params?.page?.join('/') || '');
const announce = await fetchOneEntry('announcement-bar', { userAttributes: { urlPath } })
.toPromise();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.
return (
<>
<!-- Put your header here -->
<YourHeader />
<Content
model="announcement-bar"
apiKey="YOUR_API_KEY"
content={announce}
/>
<!-- The rest of your page -->
<TheRestOfYourPage />`
</>
);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.
// $.tsx
import { BuilderComponent, builder } from "@builder.io/react";
import type { LoaderArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
// Initialize the Builder client and pass in your Public API Key
builder.init(YOUR_PUBLIC_API_KEY); // <-- add your Public API Key here
// Fetch contents of the announcement bar section
export const loader = async ({ params, request }: LoaderArgs) => {
// Fetch data content from Builder.io based on the URL path
const announcementBar = await builder
.get("announcement-bar", {
userAttributes: {
urlPath: `/${params["*"]}`,
},
})
.toPromise();
// Verify if the user is previewing or editing in Builder
const isPreviewing = new URL(request.url).searchParams.has("builder.preview");
// If the announcement bar is not found and the user is not previewing, return null
if (!announcementBar && !isPreviewing) {
return null;
}
return { announcementBar };
};
// Define and render the page.
export default function Page() {
// Use the useLoaderData hook to get the announcement bar data from `loader` above.
const { announcementBar } = useLoaderData<typeof loader>();
// Render the announcement bar content from Builder.io
return announcementBar ? (
<BuilderComponent model="announcement-bar" content={announcementBar} />
) : null;
}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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
/**
* Quickstart snippet
* snippets/hydrogen/app/components/AnnouncementBarPage.tsx
*/
import {Content, fetchOneEntry} from '@builder.io/sdk-react';
import type {LoaderFunction} from '@remix-run/node';
import {useLoaderData} from '@remix-run/react';
import {useNonce} from '@shopify/hydrogen';
const BUILDER_API_KEY = 'YOUR_API_KEY';
const model = 'announcement-bar';
export const announcementsLoader: LoaderFunction = async ({
params,
request,
}) => {
try {
const pathname = `/announcements/${params['*'] || ''}`;
const url = new URL(request.url);
const content = await fetchOneEntry({
model,
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: pathname,
},
});
return {content, model};
} catch (e) {
console.error(e);
return {content: null};
}
};
export default function AnnouncementBarPage() {
const {content, model} = useLoaderData<{content: any; model: string}>();
const nonce = useNonce();
return (
<div>
{content && (
<Content
model={model}
apiKey={BUILDER_API_KEY}
content={content}
nonce={nonce}
/>
)}
<div>The rest of your page goes here</div>
</div>
);
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}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.
// $.tsx
import { BuilderComponent, builder } from "@builder.io/react";
import type { LoaderArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
// Initialize the Builder client and pass in your Public API Key
builder.init(YOUR_PUBLIC_API_KEY); // <-- add your Public API Key here
// Fetch contents of the announcement bar section
export const loader = async ({ params, request }: LoaderArgs) => {
// Fetch data content from Builder.io based on the URL path
const announcementBar = await builder
.get("announcement-bar", {
userAttributes: {
urlPath: `/${params["*"]}`,
},
})
.toPromise();
// Verify if the user is previewing or editing in Builder
const isPreviewing = new URL(request.url).searchParams.has("builder.preview");
// If the announcement bar is not found and the user is not previewing, return null
if (!announcementBar && !isPreviewing) {
return null;
}
return { announcementBar };
};
// Define and render the page.
export default function Page() {
// Use the useLoaderData hook to get the announcement bar data from `loader` above.
const { announcementBar } = useLoaderData<typeof loader>();
// Render the announcement bar content from Builder.io
return announcementBar ? (
<BuilderComponent model="announcement-bar" content={announcementBar} />
) : null;
}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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
<!-- https://www.builder.io/c/docs/integrate-section-building -->
<!-- https://www.builder.io/c/blueprints/announcement-bar -->
<!-- src/routes/announcements/[...catchall]/+page.svelte -->
<script>
import { isPreviewing, Content } from '@builder.io/sdk-svelte';
const apiKey = 'YOUR_API_KEY';
const model = 'announcement-bar';
export let data;
const canShowContent = data.content || isPreviewing(data.searchParams);
</script>
<main>
{#if canShowContent}
<!-- Your Announcement Bar section -->
<Content {model} content={data.content} {apiKey} />
{/if}
<!-- <NavBar/> -->
<!-- <OtherRestOfYourPage/> -->
<div>The rest of your page goes here</div>
</main>In +page.server.js, define a load() function that fetches the content for the announcement-bar section.
/* src/routes/homepage/+page.server.js */
import { fetchOneEntry, getBuilderSearchParams } from '@builder.io/sdk-svelte';
/** @type {import('../../$types').PageServerLoad} */
export async function load(event) {
// fetch your Builder content
const content = await fetchOneEntry({
model: 'announcement-bar',
apiKey: /* Add your Public API Key */,
options: getBuilderSearchParams(event.url.searchParams),
userAttributes: {
urlPath: event.url.pathname || '/',
},
});
return { content };
}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:
// vite.config.js
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [sveltekit()],
// add this to fix SDK bundling errors.
optimizeDeps: { exclude: ["isolated-vm"] },
});
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.
<!-- https://www.builder.io/c/docs/integrate-section-building -->
<!-- https://www.builder.io/c/blueprints/announcement-bar -->
<!-- src/routes/announcements/[...catchall]/+page.svelte -->
<script>
import { isPreviewing, Content } from '@builder.io/sdk-svelte';
const apiKey = 'YOUR_API_KEY';
const model = 'announcement-bar';
export let data;
const canShowContent = data.content || isPreviewing(data.searchParams);
</script>
<main>
{#if canShowContent}
<!-- Your Announcement Bar section -->
<Content {model} content={data.content} {apiKey} />
{/if}
<!-- <NavBar/> -->
<!-- <OtherRestOfYourPage/> -->
<div>The rest of your page goes here</div>
</main>Create a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:
<!-- https://www.builder.io/c/docs/integrate-section-building -->
<!-- https://www.builder.io/c/blueprints/announcement-bar -->
<script setup lang="ts">
import {
Content,
type BuilderContent,
fetchOneEntry,
isPreviewing,
} from '@builder.io/sdk-vue';
import { onMounted, ref } from 'vue';
const content = ref<BuilderContent | null>(null);
const apiKey = 'YOUR_API_KEY';
const canShowContent = ref(false);
const model = 'announcement-bar';
onMounted(async () => {
content.value = await fetchOneEntry({
model,
apiKey,
userAttributes: {
urlPath: window.location.pathname,
},
});
canShowContent.value = content.value ? true : isPreviewing();
});
</script>
<template>
<Content
v-if="canShowContent"
:model="model"
:content="content"
:api-key="apiKey"
/>
<!-- Your content coming from your app (or also Builder) -->
<div>The rest of your page goes here</div>
</template>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:
<!-- https://www.builder.io/c/docs/integrate-section-building -->
<!-- https://www.builder.io/c/blueprints/announcement-bar -->
<!-- pages/announcements/[...app].vue -->
<script setup>
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue';
import { ref } from 'vue';
const route = useRoute();
const model = 'announcement-bar';
const apiKey = 'YOUR_API_KEY';
const canShowAnnouncementBar = ref(false);
const { data: announcement } = await useAsyncData(
`builderData-${model}-${route.path}`,
() =>
fetchOneEntry({
model,
apiKey,
userAttributes: { urlPath: route.path },
})
);
canShowAnnouncementBar.value = announcement.value
? true
: isPreviewing(route.query);
</script>
<template>
<Content
v-if="canShowAnnouncementBar"
:model="model"
:content="announcement"
:api-key="apiKey"
/>
<!-- Your content coming from your app (or also Builder) -->
<div>The rest of your page goes here</div>
</template>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.
<Content
:key="$route.path"
model="announcement-bar"
@contentLoaded="contentLoaded"
@contentError="contentError"
:options="{
url: $route.path,
}"
/>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:
/**
* https://www.builder.io/c/docs/integrate-section-building
* https://www.builder.io/c/blueprints/announcement-bar
* src/routes/announcements/[...index]/index.tsx
*/
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import { Content, fetchOneEntry } from '@builder.io/sdk-qwik';
export const BUILDER_PUBLIC_API_KEY = 'YOUR_API_KEY';
export const BUILDER_MODEL = 'announcement-bar';
export const useBuilderContent = routeLoader$(async ({ url }) => {
const announcementBar = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API_KEY,
userAttributes: {
urlPath: url.pathname,
},
});
return announcementBar;
});
export default component$(() => {
const announcement = useBuilderContent();
return (
<>
{announcement.value && (
<Content
model={BUILDER_MODEL}
content={announcement.value}
apiKey={BUILDER_PUBLIC_API_KEY}
/>
)}
{/* Your content coming from your app (or also Builder) */}
<div>The rest of your page goes here</div>
</>
);
});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:
<div>
<!-- Put your header here. -->
<YourHeader />
<Content
model={BUILDER_MODEL}
content={content}
apiKey={BUILDER_PUBLIC_API_KEY}
/>
<!-- Put the rest of your page here. -->
<TheRestOfYourPage />
</div>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:
// App.js/**
import type { BuilderContent } from '@builder.io/sdk-react-native';
import { Content, fetchOneEntry } from '@builder.io/sdk-react-native';
import { useLocalSearchParams } from 'expo-router';
import { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
const BUILDER_API_KEY = /* Put your Public API Key */;
const MODEL_NAME = 'announcement-bar';
export default function AnnouncementScreen() {
const [content, setContent] = useState<BuilderContent | null>(null);
const { slug } = useLocalSearchParams<{ slug: string }>();
useEffect(() => {
fetchOneEntry({
model: MODEL_NAME,
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: `/announcements/${slug}`,
},
})
.then((data) => {
setContent(data);
})
.catch((err) => console.error('Error fetching Builder Content: ', err));
}, []);
return (
<View>
{content ? (
<Content
apiKey={BUILDER_API_KEY}
model={MODEL_NAME}
content={content}
/>
) : (
<Text>Announcement Bar not Found</Text>
)}
{/* Your content coming from your app (or also Builder) */}
<Text>The rest of your page goes here</Text>
</View>
);
}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.
// Simulate a page path or use a relevant attribute for targeting
const urlPath = '/some-path'; // Example: The path you're targeting
fetchOneEntry({
model: 'announcement-bar',
apiKey: 'YOUR_API_KEY',
userAttributes: { urlPath: urlPath }, // Targeting based on the URL path
})
.then(data => {
// Handle the fetched data; for example, setting state
})
.catch(err => console.error('Error fetching Builder Content:', err));
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.
return (
<View style={{ padding: 20 }}>
{content ? (
// your header here
<Content
apiKey={BUILDER_API_KEY}
model="announcement-bar"
content={content}
/>
// your footer here
) : (
<Text>Not Found.</Text>
)}
</View>
);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.
npm install @builder.io/sdk-angularAdd a new component using the Angular CLI tool, which creates the announcement bar component:
ng g c announcementBarIn 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.
<!-- src/app/announcement-bar.component.html -->
<ng-container *ngIf="content">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey">
</builder-content>
<RestOfYourPage/>
</ng-container>Replace the placeholder content in the AnnouncementBarComponent with the code below. Make sure to provide your Public API Key.
/**
* https://www.builder.io/c/docs/integrate-section-building
* https://www.builder.io/c/blueprints/announcement-bar
* src/app/announcement-bar/announcement-bar.component.ts
*/
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
Content,
fetchOneEntry,
isPreviewing,
type BuilderContent,
} from '@builder.io/sdk-angular';
@Component({
selector: 'app-announcement-bar',
standalone: true,
imports: [CommonModule, Content],
template: `
<ng-container *ngIf="!notFound">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
></builder-content>
</ng-container>
<ng-template #notFound>
<div>404 - Content not found</div>
</ng-template>
<!-- Your content coming from your app (or also Builder) -->
<div>The rest of your page goes here</div>
`,
})
export class AnnouncementBarComponent {
apiKey = 'YOUR_API_KEY';
model = 'announcement-bar';
content: BuilderContent | null = null;
notFound = false;
async ngOnInit() {
const urlPath = window.location.pathname || '';
const content = await fetchOneEntry({
apiKey: this.apiKey,
model: this.model,
userAttributes: {
urlPath,
},
});
this.content = content;
this.notFound = !content && !isPreviewing();
}
}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:
import { Routes } from '@angular/router';
import { AnnouncementBarComponent } from './announcement-bar/announcement-bar.component';
export const routes: Routes = [
{
path: '**',
component: AnnouncementBarComponent,
},
];Add a new component using the Angular CLI tool, which creates the announcement bar component:
ng g c announcementBarIn 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.
<!-- src/app/announcement-bar.component.html -->
<ng-container *ngIf="content">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey">
</builder-content>
</ng-container>Replace the placeholder content in your component's template with the following:
<!-- src/app/announcement-bar/announcement-bar.component.html -->
<ng-container *ngIf="content">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
></builder-content>
</ng-container>
<div>The rest of your page goes here</div>Update announcement-bar.component.ts:
/**
* https://www.builder.io/c/docs/integrate-section-building
* https://www.builder.io/c/blueprints/announcement-bar
* src/app/announcement-bar/announcement-bar.component.ts
*/
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {
Content,
isPreviewing,
type BuilderContent,
} from '@builder.io/sdk-angular';
@Component({
selector: 'app-announcement-bar',
standalone: true,
imports: [Content, CommonModule],
template: `
<ng-container *ngIf="canShowContent; else notFound">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
></builder-content>
</ng-container>
<ng-template #notFound> 404 </ng-template>
`,
})
export class AnnouncementBarComponent implements OnInit {
apiKey = 'YOUR_API_KEY';
model = 'announcement-bar';
content: BuilderContent | null = null;
canShowContent = false;
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.activatedRoute.data.subscribe((data: any) => {
this.content = data.content;
const searchParams = this.activatedRoute.snapshot.queryParams;
this.canShowContent = !!this.content || isPreviewing(searchParams);
});
}
}Create an announcement-bar.resolver.ts file with the following code to fetch the content asynchronously from the server:
import type { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
import { BuilderContent, fetchOneEntry } from '@builder.io/sdk-angular';
export const announcementBarResolver: ResolveFn<BuilderContent | null> = async (
route: ActivatedRouteSnapshot
) => {
const urlPath = `/${route.url.join('/')}`;
return await fetchOneEntry({
apiKey: 'YOUR_API_KEY',
model: 'announcement-bar',
userAttributes: {
urlPath,
},
});
};Add a route for the AnnouncementBarComponent to app.route.ts:
// app.routes.ts
import { Routes } from '@angular/router';
import { LandingPageComponent } from './landing-page/landing-page.component';
export const routes: Routes = [
{
path: '**',
component: LandingPageComponent,
},
];Edit your gatsby-config.js file to have the following contents, replacing YOUR_API_KEY with your Public API Key:
// gatsby-config.js
module.exports = {
...,
plugins: [
{
resolve: '@builder.io/gatsby',
options: {
// Replace with your Public API Key.
publicAPIKey: YOUR_API_KEY,
},
},
],
};Create a page with the following contents:
// src/pages/your-page.jsx
import * as React from 'react';
import { graphql } from 'gatsby';
import { BuilderComponent } from '@builder.io/react';
function Page({ data }) {
const models = data?.allBuilderModels;
const announce = models.oneAnnouncementBar?.content;
return (
<>
{/* Put your header here. */}
<YourHeader />
<BuilderComponent model="announcement-bar" content={announce} />
{/* Put the rest of your page here. */}
<TheRestOfYourPage />
</>
);
}
export default Page;
export const announceQuery = graphql`
query ($path: String!) {
allBuilderModels {
oneAnnouncementBar(target: { urlPath: $path }) {
content
}
}
}
`;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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
export const pageQuery = graphql`
query ($path: String!) {
allBuilderModels {
oneAnnouncementBar(target: { urlPath: $path }) {
content
}
}
}
`;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.
function PageTemplate({ data }) {
const models = data?.allBuilderModels;
const announce = models.oneAnnouncementBar?.content;
return (
<>
<!-- Put your header here. -->
<YourHeader />
<BuilderComponent model="announcement-bar" content={announce} />
<!-- The rest of your page. -->
<TheRestOfYourPage />
</>
);
}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:
// your-app.js
app.get('/', async (req, res) => {
const apiKey = YOUR_API_KEY;
const encodedUrl = encodeURIComponent(req.url);
// You can also query, sort, and target this content.
// See full docs on our content API: https://www.builder.io/c/docs/query-api
const { data: announceData } =
await fetch(`https://cdn.builder.io/api/v1/html/announcement-bar?apiKey=${apiKey}&url=${encodedUrl}`)
.then((res) => res.json());
const announceHtml = announceData.html;
res.send(`
<html>
<body>
<!-- Put your header here. -->
<nav>...</nav>
${announceHtml}
<!-- Put the rest of your page here. -->
<div>...</div>
</body>
</html>
`);
}
});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.
const encodedUrl = encodeURIComponent(req.url);
const { data: announceData } =
await fetch(`https://cdn.builder.io/api/v1/html/announcement-bar?apiKey=${apiKey}&url=${encodedUrl}`)
.then((res) => res.json());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.
const announceHtml = announceData.data.html;
res.send(`
<html>
<body>
<!-- Put your header here. -->
<nav>...</nav>
${announceHtml}
<!-- Put the rest of your page here. -->
<div>...</div>
</body>
</html>
`);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.
// Import necessary libraries
import SwiftUI
import BuilderIO
struct ContentView: View {
@ObservedObject var content: BuilderContentWrapper = BuilderContentWrapper()
init() {
self.getContent()
}
// Define getContent as a method to fetch content from Builder.io
func getContent() {
Content.getContent(model: "announcement-bar",
apiKey: YOUR_PUBLIC_API_KEY, // Replace with your Public API key
url: "", // No URL is needed for sections
locale: "",
preview: "") { content in
// The completion block to be executed once getContent is completed
// Ideally in the main thread because it likely updates UI components
DispatchQueue.main.async {
// Calls changeContent on self.content with the new content
self.content.changeContent(content)
}
}
}
var body: some View {
VStack {
if let contentValue = content.content {
// Use the content to render your section view
// TO DO: Replace with code to render your section
RenderContent(content: contentValue, apiKey: YOUR_PUBLIC_API_KEY)
} else {
// Display a loading message if the content is not yet available
Text("Loading...")
}
// Handle live previewing
if Content.isPreviewing() {
// Display a 'Reload' button during content previews for manual refresh
Button("Reload") {
self.getContent()
}
}
}
}
}
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.
{% render 'model.announcement-bar.builder' %}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:
ng generate component announcementBarIn 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().
// src/app/app.module.ts
import { BuilderModule } from '@builder.io/angular'; // <-- import at top
...
@NgModule({
...
// Add your API key to the AppModule imports array.
imports: [
BrowserModule,
AppRoutingModule,
BuilderModule.forRoot(YOUR_API_KEY),
],
});Replace the placeholder content in your component's template with the following:
<!-- src/app/announcement-bar/announcement-bar.component.html -->
<builder-component model="announcement-bar"></builder-component>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.
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:
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.
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.
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.