Resources

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Home

Forum

Blog

Github

Login

Signup

Made in Builder

Dynamic Symbols

A symbol allows you to turn any component into reusable content that you can drag and drop onto any page (e.g. a header or footer). You can edit and update your symbol in one place and when you click publish, it will update in every location that it is being used. A dynamic symbol allows you to adjust the symbol's content or styling based on unique attributes. For example, a dynamic symbol could be used to display a unique promo message for logged in users versus logged out users, whereas a static symbol would appear the same on all pages

When creating a dynamic symbol, start by creating new component model. Go over to builder.io/models, select +create model and choose Section. 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 update on all pages where you use the symbol 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?