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

ā˜°

Forum

Blog

Github

Signup

Made in Builder

Creating symbols that accept blocks as inputs

Symbols are one of our most powerful features. This guide covers how to accept blocks as an input to allow dropping arbitrary content blocks inside your symbols, in specific regions we call slots.

Prerequisites

You'll first want to understand how to create symbols as well as view our guide on creating symbols with inputs.

Also, if you use our React SDK, you'll need to be on a version >= 1.1.41

Symbols are one of our most powerful features. This guide covers how to accept blocks as an input to allow dropping arbitrary content blocks inside your symbols, in specific regions we call slots.

Adding slots

When editing your symbol, there is a new block type called slots that you can add within them. These allow you to define regions where the user of your symbol can drop content into.

When in the Visual Editor, from the insert tab on the left, hit show more. Find the slot block and drop it into your symbol

Note: you can have multiple slots as long as you give them different names. You can set the name of a slot from the options tab when selected.

Usage

Once you have published your symbol, you can now drop it into any page from the my symbols tab of the insert menu, and drop blocks inside where your slots are!

Was this article helpful?