8/6 livestream: AI-Powered Figma to Storybook in Minutes

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact sales

8/6 livestream: AI-Powered Figma to Storybook in Minutes

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

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

Using preview types for custom fields, configure the Page and Section model content to display previews of your e-commerce platform's resources while editing in the Visual Editor.

Before you begin, you must set up your e-commerce plugin. For detailed instructions, see Setting Up Built-in Plugins.

To add a preview type custom field to your data model:

  1. Go to Content Models and select your model.
  2. On the Fields tab, click + New Field.
  3. In the Name field, enter a unique field name, such as productPreview.
  4. From the Type dropdown, select your e-commerce plugin's preview type, such as Shopify product preview.
  5. Optional: Click Choose Product to select a default value.
  6. Click Save.

The video below shows adding a Shopify product preview custom field to a model:

To set a preview URL:

  1. Open content within the Visual Editor for a model that has a preview field. A searchable list of e-commerce resources displays.
  2. Select a resource to fetch data from your e-commerce platform and construct a template string for the editing URL.
  3. Set your model's editing URL to a template string that embeds a product's handle, such as http://localhost:3000/products/${productPreview.handle}.
  4. Create a dynamic route on your backend by parsing the handle, fetching data from your e-commerce platform, and exposing that data to your content through state or context.

Builder determines the value of productPreview.handle when you open the model's content in the Visual Editor and select a resource from the searchable list.

The plugin fetches the associated data and exposes properties to the editing URL template string. In this case, productPreview.handle represents the handle of the selected product.

After setting up your model's editing URL to use the preview field's handle or ID, create a dynamic route on your back end that:

  • Parses the URL path to extract the resource's handle or ID.
  • Fetches the resource's data from your e-commerce platform using the parsed identifier.
  • Exposes the fetched data to your content using state or context.

Use data bindings on your blocks to display your resource's data. For more information, see Dynamic Preview URLs.

Preview a resource by selecting from the searchable list when you open your model's content in the Visual Editor.

The video below shows selecting a Shopify product for preview in the Options tab of the Visual Editor:

Your selection is saved across sessions, so the searchable list doesn't appear again after making your selection. To change the preview selection, go to the Options tab in the Visual Editor and click the edit button next to your preview field.

For more information on using e-commerce plugins, check out the following articles:

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

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024