Skip to Content
IntegrationsShopify

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:

  1. 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.

    Shopify integration app

  2. 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.

Shopify remote source

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.

  1. 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.

    example article model with remote content

Once done, editors can add the Shopify data they need to a specific content item.

Example Shopify remote content search

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 {
   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.

Last updated on
SAML 2.0Snitcher