BUILDER

Resources

Home

Forum

Github

Login

Signup

This page was made in Builder!

Dynamic Symbols

A symbol allows you to turn any component into reusable content, such as a header or footer, 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.

Symbols don't have to simply be static data reused across pages. Symbols can also be dynamic components, such as a ribbon at the top of the page that displays a unique promo message on a set date or targets various user locales.

When creating a dynamic symbol, start by creating new component model. Go over to builder.io/models, select +create model and choose component. Then give your component a name, such as “ribbon”.

Navigate back to your Content page. You’ll see that the new Ribbon model has been added. Let's create a new symbol by Clicking +New Entry and selecting the Ribbon model. Now you can build out your ribbon design.

To create a symbol, right click your content and select convert to symbol. Name your symbol and save it. To make it dynamic, click Edit on the symbol and toggle the dynamic switch.

After you've named and saved your symbol, you can find your new symbol in the insert tab under the My Symbols section. Now you can drag and drop it onto other pages. Any changes made to the symbol will updated on all pages and keep the content identical.

A great example of dynamic symbols is a site-wide ribbon targeting different audiences or locales. Click here for a tutorial.

Up next

Shopify FAQ
Was this article helpful?