Shopify
This integration allows content editors to select Shopify products in Prepr content items.
Introduction
You can connect Prepr to Shopify , a cloud-based commerce platform for creating and managing online stores. This integration allows you to view and search the Shopify catalog from within Prepr and include products, product variants and collections in your web app content.
Activating Shopify integration
Create a Shopify API Client
Before Prepr can interact with your Shopify project, you need to get a Shopify Storefront access token.
Go to your Shopify dashboard and perform the steps as defined in this Shopify guide .
For the API scopes, click the Configure Storefront API scopes button and select the following permissions to retrieve products, variants, and collections.
unauthenticated_read_product_listings
unauthenticated_read_product_tags
Click the Install app button to generate all the access tokens and copy the Storefront API access token to use in the next step.
Connect Prepr to Shopify
Now that you’ve set up your Shopify API client, you can add Shopify as a remote source in Prepr by following the steps below:
-
Go to Settings → Integrations and choose Shopify. Click the Activate button.
If you do not have access to the Shopify integration yet, click Request activation to contact our Sales team.
-
In the Connect to Shopify modal, paste the Shopify Storefront API access token you saved in the previous step, enter your Shopify domain URL, such as
your-store-name.myshopify.com
and click the Save button.
Once the integration is activated, you can see the Shopify remote source in the Schema page.
Allow editors to add Shopify catalog data to content items
Once you’ve connected to Shopify, follow the steps below to allow editors to add Shopify products, variants and collections to content items.
-
First, go to the model or component where editors can add Shopify catalog data and add a Remote content field, or enable the Shopify remote source in a dynamic content field in the model or component.
Once done, editors can add the Shopify data they need to a specific content item.
Retrieve Shopify content using the API
Once you have content items with Shopify products, variants and collections, you can retrieve the corresponding data using the Prepr GraphQL API.
QUERY
query {
Post (id: "d855f994-2e14-411c-82b1-24b656dab853", locale: "en-US")
{
_id
title
_slug
# content is a dynamic content field
content
{
__typename
... on ShopifyCollection
{
items
{
_id
_json
id
}
}
}
}
}
That’s it. Now your web page includes catalog data from Shopify. Prepr will synchronize your remote content automatically to keep it up to date.