Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

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 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:

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.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

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

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy