Integration Fields Reference
This article explains what an Integration Field is and how to configure them in the Custom Type builder.
This document explains how to use an Integration Field in your content model. It assumes that you have already set up an Integration Fields API in your repository settings. Want to learn how to set up Integration Fields? See Set up Integration Fields.
Integration Field lets you integrate data from an external API with your content. After setting up an Integration Field in Settings, the next step will be to add the field to your Custom Type.
When adding an Integration Field, you'll see the options to set the Field name, API ID, and Field placeholder.
Slice Machine vs. Legacy Editor
Editing fields is almost identical in Slice Machine and the Legacy editor. But it is important to know that the mock config option (to add data to preview content fields in the Slice Simulator) is only available in Slice Machine.
As soon as you've configured the Integration Field, you will be able to add your Integration Field to your Custom Types.
Open your Custom Type. Find your Integration Field at the bottom of the content field list and drag it into your Custom Type.
Save your Custom Type, and you're good to go! Content editors will now be able to select products from your catalog or custom API.
The following table displays the JSON keys and values of the field’s 'API response.
Edit the JSON model with caution
Only edit the JSON model to make changes to the Rich Text field labels. Making abrupt changes can cause conflicts when synchronizing changes with your documents.
type
string (required)
The value must be IntegrationFields
config
object (required)
Object for the configuration options
config.catalog
string
A label that indicates the catalog you're going to use. It must contain your repo name and the name of the catalog, separated by dashes, for example your-repo-name—name-of-your-integration
config.label
string
The label that shows up for the field in the entry editor
config.placeholder
string
A user-friendly placeholder into the field
// API response example of an Integration field
{
// ...
"example_integration_field":{
"id":6562914664611,
"title":"Organic coffee blend",
"body_html":"",
"vendor":"Bare Blends",
"product_type":"coffee blend",
"created_at":"2021-03-08T15:46:19+11:00",
"handle":"organic-toast-golden",
"updated_at":"2021-04-07T10:31:07+10:00",
"published_at":null,
"template_suffix":"",
"published_scope":"web",
"tags":"",
"admin_graphql_api_id":"gid://shopify/Product/6562914664611",
"variants":["…"],
"options":["…"],
"images":["…"],
"image":{"…"}
}
}
Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.