Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

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

Popular Tutorials

>

Set Up and Use Product Data

With one Data model, your teammates can create, edit, and use Data content entires to change content instantly. The following video shows an example of switching between two Data content entries made from the same Product Data model.

By coordinating the shape of your data with your UI, developers, designers, and writers can all work in parallel:

This tutorial shows you how to create and use a Data model for products. This guide covers:

  • Creating a Data model
  • Adding custom fields to the Data model
  • Creating Data content entries
  • Binding Data from the entries to blocks in the Visual Editor

Skill set: Intermediate

Area: UI

Video Length: 4 minutes

Prerequisites

  • You'll need a Builder account.
  • An evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.

Step 1: Create a Data model

  1. Go to Models.
  2. Click the + Create New button.
  3. Name and describe your model. This example uses the Name Product and the Description Product we sell.
  4. Add a custom field by clicking on the + New Field button. Name the first new field name with a Type of Text.
  5. Add Helper Text so teammates know what to enter in each field.
  6. Repeat the previous two steps for each field and adjust the Helper Text and Type according to the kind of field you want. This example uses:

Name, Type Text

Photo, Type File

Tagline, Type Text

Copy, Type Long text

Deliverable, Type Text

Price, Type Number

7. Click Save.

The following video demonstrates the above process:

Step 2: Use your data model to make content entries

The next step is to use the Data model you just made. Here, you make two Data content entries; Shoes and Pie.

  1. Go to Content.
  2. Click the + New button.
  3. Select Product.
  4. Fill out each custom field.
  5. Name the new content entry Shoes.
  6. Click Publish.
  7. Repeat the previous step and make another called Chef's Pie with pie-related data.

This video shows this process of making two Product Data entries:

Step 3: Use your data in the Visual Editor

This tutorial example uses a pre-existing product page with placeholder content and a built-in template for the layout.

  1. Open the content where you'd like to use the data.
  2. In the Visual Editor, go to the Data tab.
  3. Click the + Connect Data button.
  4. Choose Builder and then choose the Data model you made in Step 1: Create a Data Model. In this example, the Data model is Product.
  5. Click Pick an Entry.
  6. Choose one of the two you created in Step 2: Use your Data model to make content entries. In this example, the two options are Shoes and Chef's Pie.
  7. Bind the data to each block by clicking the icon with four dots and choosing the data that you want to populate that block. Repeat for each block.
  8. When you're done binding the data, you can click on the pencil icon next to the entry you chose in the Data tab and switch to another entry, so that the content changes instantly.

The following video demonstrates the above process:

Next steps

To get even more out of Data models with Builder, check out Integrating CMS Data.

For more general information on Data models, refer to the Data Models documentation.

Extend using your Data models by exploring Reusable Blocks.


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?