Builder best practices
👉Tip: for an overview of how Builder works - see here
Structuring your site
There are a lot of ways you can use Builder for your site. Some of the main questions you'll want to ask yourselves - what on your site should be in your code vs in Builder.
As a general rule, parts of your site that should be managed by non developers should probably be in Builder. Parts that are complex with a lot of code, should probably be in your codebase. Using custom components in your Builder content can help you strike a good balance here as well
One of the easiest ways to get started is to add landing page building to your site. Once you have that, you can start adding editable sections across your site, and use targeting to choose the right content for the right users
Here are some examples we recommend for how to structure various pages on your site
Custom components
In addition to being able to define Builder-editable areas of your site, you can also use components from your code in Builder controlled content areas (pages and sections). This is great for extending Builder with advanced functionality, keeping intricate areas controlled in your codebase, etc while still leaving flexibility for your editors.
Additional, you can use symbols to create design systems and separate concerns between designers making pre styled blocks used by editors. Symbols can also keep the same content in sync across multiple pages, managed and edited in one place, with no coding required.
You can use roles and permissions to decide who in your organization is able to edit designs, content, code, etc
Advanced structuring
To offer even more flexibility for testing, targeting, and optimizing content, you can also put full pages in Builder with "smart" components in them - e.g. components that are aware of the page they are on (e.g. via context, URL, etc) and render the current product info, images, form, buy button, etc.
This can allow even more rich testing and optimizing without requiring custom development for every layout change, while still encapsulating complex components (like product forms, etc) in code.
Below are two example on how you can do this, for instance, on a product detail page.
👉Tip: for a more technical overview of Builder - see here
