Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

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

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

To get the most out of this document, make sure you've enabled and set up your e-commerce plugin. For detailed instructions, see Setting Up Built-in Plugins.

  1. Go to Models.
  2. Open your model and click the +New Field button.
  3. Give the new field a descriptive name, such as productPreview.
  4. In the Type drop-down, select one of your e-commerce plugin's preview types. This example uses the Shopify product preview type.
  5. Builder prompts you to choose a default value from your products. Though you can close the prompt without choosing a default value, we recommend selecting a default value as a best practice. This helps your team mates understand the purpose of the field.

The video below shows these steps while adding a Shopify product preview custom field.

When you open content within the Visual Editor for a model that has a preview field, a searchable list of e-commerce resources appears. Selecting a resource fetches its data from your e-commerce platform and can be used to construct a template string for the editing URL.

For example, you can set your model's editing URL to a template string that embeds a product's handle, such as http://localhost:3000/products/${product.handle}. You can respond to the request with a dynamic route on your back end by parsing the handle, fetching data from your e-commerce platform, and exposing that data to your content through state or context.

With this technique, non-developer teammates can preview what products, collections, and other resources look like on your product detail pages—also known as PDPs—and other content.

Builder determines the value of productPreview.handle when the user opens the model's content in the Visual Editor and selects a resource from the searchable list.

The plugin fetches the associated data from the e-commerce platform and exposes its properties to the editing URL template string on an object with the same name as the field. 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, as above, you can 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

You can then use data bindings on your blocks to display your resource's data with data bindings.

For more information on using this technique with URLs, see Dynamic Preview URLs.

You can preview a resource by selecting it from the searchable list that appears when you open your model's content in the Visual Editor.

The searchable list doesn't appear again after making your selection when you reopen your content because your selection is saved across sessions.

You can change the preview selection in the future from the Options tab in the Visual Editor by selecting the preview field's edit button.

The annotated screenshot below illustrates how an example page might display a preview for a product in a Shopify store:

  1. The editing URL, previously set to http://localhost:3000/products/${productPreview.handle}, evaluates to http://localhost:3000/product/short-sleeve-t-shirt after the user selects the Short sleeve t-shirt for the preview field.
  2. A binding for the title of the Product View block, which is a custom component in the example registered by the application, sets the Product View's title to state.product.title. state.product is passed when rendering the content in the dynamic route on the back end.
  3. The title renders within the Product View block's custom component.

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

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy