Features • Demo • Deploy • Configuration • Saved value • Contributors • License • Resources
This custom element allows the user to search and link products from their Shopify store into Kontent.ai.
- Editors can
- Search for products in Shopify e-commerce platform
- Select a single or multiple products (or one of its variants)
Netlify has made this easy. If you click the deploy button below, it will guide you through the process of deploying it to Netlify and leave you with a copy of the repository in your account as well.
You will need to deploy the Netlify function in the src/functions directory.
Or run it locally.
The integration's custom element is created with Create React App. First you will need to install npm dependencies with npm install. Then use npm run build to build the integration or npm run start to start a local development server. See https://create-react-app.dev/docs/available-scripts for more scripts.
In order to use this extension, you'll need to create a Custom App in your Shopify store. This allows the integration to connect into your product catalog through the Storefront API to search for products. You can follow the official tutorial to install a custom app here.
Remember to enable read access to product listings during the Select API Scopes part.
After the installation is complete, get the Storefront API access token as you will need it to configure the custom element in Kontent.ai.
You will need to provide the following JSON parameters for the custom element to connect to your store.
- storeFrontAccessToken - Use the token from the Shopify configuration above.
- apiDomain - This is shown in your browser's address bar when configuring Shopify, in our case it is https://dancing-goat-sample.myshopify.com, with dancing-goat-sample being the name of the store.
{
"storeFrontAccessToken": "<YOUR STOREFRONT ACCESS TOKEN>",
"apiDomain": "<YOUR STORE NAME>.myshopify.com",
"isMultiSelect": false
}Note that isMultiSelect is optional, if not provided, it will be considered as the value shown above.
The selector stores the following value format in JSON, which it also uses to display the selected product on first load:
{
"id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzE3MzQ0NjA2MzcyMTg=",
"handle": "aeropress",
"title": "AeroPress",
"previewUrl": "https://cdn.shopify.com/s/files/1/0048/8679/0178/products/aeropress.jpg?v=1551277741",
"sku": "BR-01"
}The fields are:
- id – The internal ID of the product in Shopify; can be used for further API calls to get product data.
- handle – A similar value to a URL Slug in Kontent.ai; it's used within the product URL.
- title – The name of the product.
- previewUrl – The primary (featured) image for the product.
- sku – The SKU for the product; taken from the first product variant.
You can use any of those values for both admin UI or in your project. Should you need to make more fields available, you can do so by customizing the code of the custom element.
We have collected notes on how to contribute to this project in CONTRIBUTING.md.