Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

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

>

Setting Up and Using Product Data

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:

Skill set: Intermediate

Area: UI

Video Length: 4 minutes

  • You'll need a Builder account.
  • An evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.
  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:

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:

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 Data Binding icon — the icon of the database with a small pencil — 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:

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.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Visual Copilot

Visual Headless CMS

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Ebook

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Headless Commerce Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get StartedLog In
© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences