Collection fields

Collection fields are the building blocks of a collection's structure. Build custom CMS collections and enrich Ecommerce collections with custom fields.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

Collection fields aren't website elements. They're simply fields where data is stored for each collection item, which you’ll be able to reference in your designs. You can build your collections by adding collection fields as needed for the type of content you’re working with. You can also update the structure of existing collections and collection templates, or add custom fields to Ecommerce collections.

Open the CMS collection panel and create a new collection or choose an existing collection and open the collection settings to update its structure. 

Learn more: Collections

Collection field types

There are many different field types to choose from when structuring your collection. Each field translates into different kinds of content that you incorporate into the design for your project.

Plain text field

Adds simple unformatted text to your collection items. It can be connected to any text element (Add panel → Typography section), except rich text, when designing with your content.

Learn more: Plain text field

Rich text field

These are made for long-form content, like a blog post. It allows editors to add in headings, paragraphs, and media like images and videos right inside this one field.

Learn more: Rich text field

Image field

Adds an image to your collection items. These can be used as regular images or background images in your designs.

Learn more: Image field

Video field

Adds videos hosted on platforms such as YouTube or Vimeo through a URL. These are usually connected to a video element.

Learn more: Video field

Link field

Adds a generic link that can be connected to any link element such as a button, a text link, or a link block.

Learn more: Link field

Email field

Adds an email address field to collection items that can be connected to any link element in your designs.

Learn more: Email field

Phone field

Add a phone number to collection items that can also be connected to any link element in your project.

Learn more: Phone field

Number field

Add any kind of number (integer, decimal) to your collection items. You can use this field in your designs by connecting it to any text element.

Learn more: Number field

Date/Time field

Add a date and time picker to your collection items. This connects to any text element and can be set to use any format (month, day, year) in your designs.

Learn more: Date field

Switch field

Adds a way to separate collection items. It can be used to filter collection lists.

Learn more: 

Color field

Adds a unique color to each collection item which can be applied as text color, background color, and border color in your designs.

Learn more: Color field

Option field

Creates a list of predefined values so you can pick one for each collection item.

Learn more: Option field

File field

Adds a file to your collection items that you can connect to any link element in your project.

Learn more: File field

Reference field

Links to other collection items from the same or different collections. You can link CMS collections to Ecommerce collections and vice versa. In your designs, you can reference both collection items.

Learn more: Reference field

Multi-reference field

Similar to a reference field, but you can link to multiple items from a collection of your choice.

Learn more: Multi-reference field

Editor preview

You can see a preview of the collection structure as you're setting up a collection and its fields. This preview which appears on the right of the collection settings shows you how the collection item input form will look like the Designer and the Editor once you’ve completed building your collection structure.