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:
- Go to Content Models and select your model.
- On the Fields tab, click + New Field.
- In the Name field, enter a unique field name, such as
productPreview. - From the Type dropdown, select your e-commerce plugin's preview type, such as
Shopify product preview. - Optional: Click Choose Product to select a default value.
- Click Save.
The video below shows adding a Shopify product preview custom field to a model:
To set a preview URL:
- Open content within the Visual Editor for a model that has a preview field. A searchable list of e-commerce resources displays.
- Select a resource to fetch data from your e-commerce platform and construct a template string for the editing URL.
- Set your model's editing URL to a template string that embeds a product's handle, such as
http://localhost:3000/products/${productPreview.handle}. - 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: