When to use a template, symbol or custom code components
A template allows you to group a set of blocks and save it as a snippet that can be copied and modified throughout your content. Templates are great when you want to reuse blocks, but still might make edits to the design on a per usage basis. For example, creating a hero template lets you use the same hero in many places, making as many changes as you needed each time without affecting any other pages or content.
A symbol allows you to turn any block into reusable content that you can drag-and-drop onto any page. You can edit and update your symbol in one place instead of updating each recurring component individually. Headers and footers are common examples of symbols.
You can make a design system out of symbols by creating symbols with inputs. This will keep styling consistent from page to page and lock a user into a design. Users will only be able to change certain things like text, image, what products show, how many, etc.
Symbols are one of our most powerful features and can even accept blocks as inputs in specific regions we call slots. For more information check out our guide here.
Custom Code Components
If you have a component that's very complex or used across your codebase, it might make sense to create a custom code component to use in Builder and manage in your code. Check out our guide on custom components here