---
title: "Integration"
description: "This article explains what the integration field is and how to configure it."
meta_title: "Integration"
category: "fields"
audience: developers
lastUpdated: "2025-11-06T01:07:50.000Z"
---
The integration field allows you to integrate third-party data into your repository, such as from e-commerce catalogs or custom APIs.
The integration field's data can be read from the field's object.
**Next.js example:**
```tsx
Featured product: {slice.primary.featured_product.title}
```
**Nuxt example:**
```vue-html
Featured product: {{ slice.primary.featured_product.title }}
```
**SvelteKit example:**
```svelte
Featured product: {slice.primary.featured_product.title}
```
> **Important**
>
> You can request access to this feature via [the Prismic Support Portal](https://prismic.atlassian.net/servicedesk/customer/portal/1/create/139).
# Add an integration field to a content model
Unlike other field types, integration fields cannot be added through [Slice Machine](https://prismic.io/docs/slice-machine.md). Instead, it must be added by editing your content model's JSON file.
1. **Create a catalog**
See [Create an integration catalog](#create-an-integration-catalog) for instructions.
2. **Open your content model's JSON file**
In your Prismic project, open the slice, page type, or custom type JSON file you want to modify. The file location depends on the content type:
* **Slices**: Typically in `src/slices//model.json`.
* **Page types**: `customtypes//index.json`.
* **Custom types**: `customtypes//index.json`.
3. **Add an integration field**
Add a property to the content model's fields like the following. This example adds a `product` field to a "Featured Product" slice.
The **property name** (its API ID) determines the property name in the Content API. Use a short, snake-cased name.
The **label** property determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name.
The **catalog** property determines the data set connected to the integration field. For example, if your repository is called `lorem` and your catalog is called "my store," the value will be: `"lorem--my_store"`.
```json filename=src/slices/FeaturedProduct/model.json
// prettier-ignore
{
"id": "featured_product",
"type": "SharedSlice",
"name": "FeaturedProduct",
"description": "FeaturedProduct",
"variations": [
{
// ...
"primary": {
"product": { // [!code ++]
"type": "IntegrationFields", // [!code ++]
"config": { // [!code ++]
"catalog": "example-prismic-repository--example_store", // [!code ++]
"label": "Product" // [!code ++]
} // [!code ++]
}, // [!code ++]
},
// ...
}
]
}
```
# Create an integration catalog
There are three ways you can integrate a third-party data source using an integration field:
1. Pull data from an API.
2. Push data to Prismic.
3. Sync products from a [Shopify](https://www.shopify.com/) store.
## Pull data from an API
Prismic can pull data from your API periodically. Your API should return data in a specific format that the Prismic API understands.
> Data is pulled every 30 minutes. This frequency may change in the future.
1. **Create an API endpoint**
Your API endpoint should be accessible via the internet and return JSON in the following format.
```ts
type Payload = {
results_size: number;
results: Array<{
id: string;
title: string;
description: string;
blob: object;
image_url?: string;
last_update?: number;
}>;
};
```
| Property | Type | Description | Default |
| ------------- | --------- | ---------------------------------- | ------- |
| results\_size | number | The total number of items to pull. | None |
| results | object\[] | An array of up to 50 items. | None |
If you have more than 50 items, `results_size` should be the total number of items. Prismic will call your endpoint multiple times, including a `page=` URL parameter. Fill `results` with up to 50 items for each page.
Item objects should follow the following format:
| Property | Type | Description | Default |
| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
| id | string | The item's unique ID. This property is not exposed through the Content API. To expose it, include it in the `blob` property. | None |
| title | string | The item's title shown in the Page Builder. | None |
| description | string | The item's description shown in the Page Builder. | None |
| blob | object | The item's data. This is what appears in the Content API's response. | None |
| image\_url (optional) | string | The URL of the item's image thumbnail shown in the Page Builder. | None |
| last\_update (optional) | number | The item's last updated timestamp in [Unix time](https://en.wikipedia.org/wiki/Unix_time) (e.g. `1509364426938`). Items are sorted from most recently updated to least recently updated in the Page Builder. | None |
> Your API can optionally be secured using Basic HTTP authentication. See [Create a Custom API catalog](#create-a-custom-api-catalog) below.
2. **Open your repository settings**
Navigate to your Prismic repository and go to **Settings** > **Integration Fields**.
You must be the repository owner or have admin rights to access the Integration Fields page.
> **Important**
>
> If you do not see the **Integration Fields** tab, request access via [the Prismic Support Portal](https://prismic.atlassian.net/servicedesk/customer/portal/1/create/139).
3. **Create a Custom API catalog**
Select **Pull data from my endpoint** and fill out the fields.
The **Catalog Name** determines the API ID and the name displayed in your repository settings.
The **Description** is shown in your repository settings. Use a short description that will help organize your catalogs.
The **Endpoint** determines URL used to pull your data. The URL should output JSON in the specific format that the Prismic API understands.
The **Access token** is an optional way to authenticate your API using Basic HTTP authentication. The access token, along with a trailing colon (`:`), are sent encoded in an `Authorization` header when Prismic requests your API endpoint.
Click **Create my integration field** to save your catalog.
4. **Pull your data**
Once the catalog is created, Prismic will begin its initial pull from your API and will periodically re-pull.
> Data is pulled every 30 minutes. This frequency may change in the future.
## Push data to Prismic
You can push data to Prismic using a dedicated API endpoint. The endpoint allows for adding, updating, and deleting data.
1. **Open your repository settings**
Navigate to your Prismic repository and go to **Settings** > **Integration Fields**.
You must be the repository owner or have admin rights to access the Integration Fields page.
> **Important**
>
> If you do not see the **Integration Fields** tab, request access via [the Prismic Support Portal](https://prismic.atlassian.net/servicedesk/customer/portal/1/create/139).
2. **Create a Custom API catalog**
Select **Push data to Prismic** and fill out the fields.
The **Catalog Name** determines the API ID and the name displayed in your repository settings.
The **Description** is shown in your repository settings. Use a short description that will help organize your catalogs.
Click **Create my integration field** to save your catalog.
3. **Get your API endpoint and token**
In your repository's Integration Fields settings, find your catalog. Click the **pencil icon** to view your catalog settings.
Your **API endpoint** is shown under the "Endpoint" field. You will use this endpoint to manage your data.
Your **API token** is shown in the "Tokens" section. You must include a token when sending API requests. You can create and revoke tokens from this section.
Once you have your API endpoint and token, you can push, update, and delete data.
### Authorize requests
All requests to your API endpoint must include an `Authorization` header containing your API token:
```http
Authorization: Bearer
```
### Push items
Send a `POST` request to your API endpoint containing your items. The request body should contain an array of items in JSON format:
```ts
type Payload = Array<{
id: string;
title: string;
description: string;
blob: object;
image_url?: string;
last_update?: number;
}>;
```
| Property | Type | Description | Default |
| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
| id | string | The item's unique ID. This property is not exposed through the Content API. To expose it, include it in the `blob` property. | None |
| title | string | The item's title shown in the Page Builder. | None |
| description | string | The item's description shown in the Page Builder. | None |
| blob | object | The item's data. This is what appears in the Content API's response. | None |
| image\_url (optional) | string | The URL of the item's image thumbnail shown in the Page Builder. | None |
| last\_update (optional) | number | The item's last updated timestamp in [Unix time](https://en.wikipedia.org/wiki/Unix_time) (e.g. `1509364426938`). Items are sorted from most recently updated to least recently updated in the Page Builder. | None |
### Update items
Send a `POST` request to your API endpoint containing your updated items. The request body should follow the same format as [pushing items](#push-items).
### Delete items
Send a `POST` request to the `/deleteItems` path of your API endpoint. For example:
```plaintext
// [!code word:deleteItems:1]
https://if-api.prismic.io/if/write/example-prismic-repo--my_catalog/deleteItems
```
The request body should contain an array of item IDs to delete in JSON format.
### Delete all items
Send a `POST` request to the `/reset` path of your API endpoint. For example:
```plaintext
// [!code word:reset]
https://if-api.prismic.io/if/write/example-prismic-repo--my_catalog/reset
```
The request body should be empty.
> **Important**
>
> This operation cannot be undone. Use extreme caution when using the `/reset` endpoint.
## Sync products from a Shopify store
Prismic can automatically sync products from a [Shopify](https://www.shopify.com/) store.
1. **Get your Shopify API credentials**
Follow the [Create and install a custom app](https://help.shopify.com/en/manual/apps/app-types/custom-apps#create-and-install-a-custom-app) instructions from the Shopify documentation.
> When selecting API scopes for the custom app, pick `read_products`.
Once your app is created and installed, follow the [Get the API credentials for a custom app](https://help.shopify.com/en/manual/apps/app-types/custom-apps#get-the-api-credentials-for-a-custom-app) instructions.
Hold on to your API credentials; you will need them when you register your Shopify store as a catalog.
2. **Open your repository settings**
Navigate to your Prismic repository and go to **Settings** > **Integration Fields**.
You must be the repository owner or have admin rights to access the Integration Fields page.
> **Important**
>
> If you do not see the **Integration Fields** tab, request access via [the Prismic Support Portal](https://prismic.atlassian.net/servicedesk/customer/portal/1/create/139).
3. **Create a Shopify catalog**
Select **Shopify** and fill out the fields.
The **Catalog Name** determines the name displayed in your repository settings.
The **Description** is shown in your repository settings. Use a short description that will help organize your catalogs.
The **Endpoint** should be your Shopify URL. For example: `example-store.myshopify.com`.
The **API key** should be your Shopify API key.
The **Password** should be your Shopify Admin API access token. **This token can only be viewed once on Shopify**.
The **Shared Secret** should be your Shopify secret key.
Click **Save** to save your catalog.
4. **Pull your data**
Once the catalog is created, Prismic will begin its initial sync from your Shopify store and will periodically re-sync.
# Use integration fields
The integration field's data can be read from the field's object.
This example uses an integration field named `featured_product`.
**Next.js example:**
```tsx
Featured product: {slice.primary.featured_product.title}
```
**Nuxt example:**
```vue-html
Featured product: {{ slice.primary.featured_product.title }}
```
**SvelteKit example:**
```svelte
Featured product: {slice.primary.featured_product.title}
```
# Check if an integration field has a value
Use `isFilled.integrationField()` from [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) to check if an integration field has a value.
```ts
import { isFilled } from "@prismicio/client";
if (isFilled.integrationField(slice.primary.my_integration_field)) {
// Do something if `my_integration_field` has a value.
}
```
[Learn more about `isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)
# API response
Here is what an integration field looks like from the Content API:
```json
{
"example_integration": {
"id": 6562914664611,
"handle": "organic-toast-golden",
"title": "Organic coffee blend",
"vendor": "Bare Blends"
}
}
```
The field's content is determined by the item's `blob` property or Shopify product, depending on the type of catalog.