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.

Screenshot of the Integration field in the drag-and-drop editor.

The visual builder

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.

Screenshot of the Integration Field editor.

Add an Integration field to a Custom Type

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.

JSON model

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

Example API response

Below you can see an example of an Integration Field's API response:

Copy

// 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?

Not really

Yes, Thanks

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.