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



Get StartedLogin






Made in Builder

Introduction to Symbols

A symbol allows you to turn any component 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.

Let's say you create a form that will exist on every page of your site, you can make that form a symbol so that it not only becomes a reusable component to simply drag and drop on all of your pages, but whenever you make an update to the symbol, the form on all pages will reflect that change.

Creating a symbol

You can save any element or groups of elements as a symbol. Select the section you want to save as a symbol. Next to the Edit button, click on the dropdown arrow and choose +convert to symbol.

You can access your symbol on the left sidebar in the Insert tab under My Symbols.

Symbol vs Template

A template is similar to a symbol as it allows you to group a set of elements and save it as a reusable component. However, unlike a template, any changes made to a symbol will update the symbol everywhere it is used.

In the case that you want to make an update to your symbol on one page and not reflect everywhere that symbol is used, you have the option of creating an inline symbol. Making a symbol inline allows you to edit that instance of the symbol on one page without those changes reflecting on any other page.

Common use cases

Identical content

If you have identical content (e.g. navigation, headers, footers, forms) that you'll use on multiple pages, you can make this content into a symbol. Any edits made to the symbol will automatically be applied anywhere the symbol is used.

To create a symbol, right click your content and select "convert to symbol". 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.

Design systems

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. Learn more about using inputs in symbols here.

A/B Testing

If you have a component, such as a button, that you want to A/B test across several pages, you can create a symbol and run tests across the pages.

To create a symbol with A/B testing, navigate to the symbol's page and select the "A/B tests" tab. Adjust your variations and publish. Now you can drag and drop your symbol onto any page. You can view the results on the symbols page.

Advanced use cases

For more information on using symbols, see the following articles:

Was this article helpful?