{"id":13314679,"url":"https://github.com/kontent-ai/integration-shopify","last_synced_at":"2025-08-17T07:03:06.605Z","repository":{"id":44632588,"uuid":"174545852","full_name":"kontent-ai/integration-shopify","owner":"kontent-ai","description":"Shopify product selector for Kontent.ai","archived":false,"fork":false,"pushed_at":"2023-08-30T06:35:38.000Z","size":3360,"stargazers_count":1,"open_issues_count":4,"forks_count":5,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-08-04T22:33:49.494Z","etag":null,"topics":["custom-elements","headless-cms","javascript","kontent-ai","kontent-ai-integration","shopify"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kontent-ai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-03-08T13:51:56.000Z","updated_at":"2024-10-17T06:37:52.000Z","dependencies_parsed_at":"2025-05-03T07:44:55.596Z","dependency_job_id":null,"html_url":"https://github.com/kontent-ai/integration-shopify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kontent-ai/integration-shopify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-shopify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-shopify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-shopify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-shopify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kontent-ai","download_url":"https://codeload.github.com/kontent-ai/integration-shopify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kontent-ai%2Fintegration-shopify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270816201,"owners_count":24650755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","headless-cms","javascript","kontent-ai","kontent-ai-integration","shopify"],"created_at":"2024-07-29T18:11:53.376Z","updated_at":"2025-08-17T07:03:06.576Z","avatar_url":"https://github.com/kontent-ai.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Core integration][core-shield]](https://kontent.ai/integrations/shopify)\n\n![Last modified][last-commit]\n[![Issues][issues-shield]][issues-url]\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![MIT License][license-shield]][license-url]\n\n[![Stack Overflow][stack-shield]](https://stackoverflow.com/tags/kontent-ai)\n[![Discord][discord-shield]](https://discord.gg/SKCxwPtevJ)\n\n\u003cp align=\"center\"\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"docs/kai-logo-hor-neg-rgb.svg\"\u003e\n  \u003cimg alt=\"Kontent.ai logo for dark/light scheme.\" src=\"docs/kai-logo-hor-pos-rgb.svg\" width=\"300\"\u003e\n\u003c/picture\u003e\n\u003cimage src=\"docs/shopify-logo.png\" alt=\"shopify logo\" width=\"200\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#demo\"\u003eDemo\u003c/a\u003e •\n  \u003ca href=\"#quick-deploy\"\u003eDeploy\u003c/a\u003e •\n  \u003ca href=\"#configuring-the-custom-element\"\u003eConfiguration\u003c/a\u003e •\n  \u003ca href=\"#what-is-saved\"\u003eSaved value\u003c/a\u003e •\n  \u003ca href=\"#contributors\"\u003eContributors\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e •\n  \u003ca href=\"#additional-resources\"\u003eResources\u003c/a\u003e\n\u003c/p\u003e\n\nThis [custom element](https://kontent.ai/learn/tutorials/develop-apps/integrate/content-editing-extensions) allows the user to search and link products from their [Shopify](https://shopify.com/) store into [Kontent.ai](https://kontent.ai).\n\n## Features\n\n- Editors can\n  - Search for products in Shopify e-commerce platform\n  - Select a single or multiple products (or one of its variants)\n\n## Demo\n\n![Demo Animation][product-demo]\n\n## Getting started\n\n### Quick Deploy\n\nNetlify 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.\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kontent-ai/integration-shopify)\n\n### Running manually\n\nYou will need to [deploy](https://docs.netlify.com/functions/deploy/?fn-language=ts) the [Netlify function](https://docs.netlify.com/functions/overview/) in the `src/functions` directory.\nOr [run it locally](https://docs.netlify.com/functions/build/#test-locally).\n\nThe integration's custom element is created with [Create React App](https://create-react-app.dev/). 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.\n\n## Shopify configuration\n\nIn order to use this extension, you'll need to create a [Custom App](https://help.shopify.com/en/manual/apps/custom-apps) in your Shopify store.\nThis allows the integration to connect into your product catalog through the [Storefront API](https://shopify.dev/docs/storefront-api) to search for products.\nYou can follow the official tutorial to install a custom app [here](https://help.shopify.com/en/manual/apps/custom-apps).\n\nRemember to enable read access to product listings during the [Select API Scopes](https://help.shopify.com/en/manual/apps/custom-apps#select-api-scopes) part.\n\nAfter the installation is complete, [get the Storefront API access token](https://help.shopify.com/en/manual/apps/custom-apps#get-the-api-credentials-for-a-custom-app) as you will need it to configure the custom element in Kontent.ai.\n\n## Configuring the Custom Element\n\nYou will need to provide the following JSON parameters for the custom element to connect to your store.\n\n- **storeFrontAccessToken** - Use the token from the Shopify configuration above.\n- **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.\n\n```json\n{\n  \"storeFrontAccessToken\": \"\u003cYOUR STOREFRONT ACCESS TOKEN\u003e\",\n  \"apiDomain\": \"\u003cYOUR STORE NAME\u003e.myshopify.com\",\n  \"isMultiSelect\": false\n}\n```\n\nNote that **isMultiSelect** is optional, if not provided, it will be considered as the value shown above.\n\n## What is Saved\n\nThe selector stores the following value format in JSON, which it also uses to display the selected product on first load:\n\n```json\n{\n  \"id\": \"Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzE3MzQ0NjA2MzcyMTg=\",\n  \"handle\": \"aeropress\",\n  \"title\": \"AeroPress\",\n  \"previewUrl\": \"https://cdn.shopify.com/s/files/1/0048/8679/0178/products/aeropress.jpg?v=1551277741\",\n  \"sku\": \"BR-01\"\n}\n```\n\nThe fields are:\n\n- **id** – The internal ID of the product in Shopify; can be used for further API calls to get product data.\n- **handle** – A similar value to a URL Slug in Kontent.ai; it's used within the product URL.\n- **title** – The name of the product.\n- **previewUrl** – The primary (featured) image for the product.\n- **sku** – The SKU for the product; taken from the first product variant.\n\nYou 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.\n\n## Contributors\n\n\u003ca href=\"https://github.com/kontent-ai/integration-shopify/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=kontent-ai/integration-shopify\" /\u003e\n\u003c/a\u003e\n\nWe have collected notes on how to contribute to this project in [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\n[MIT](https://tldrlegal.com/license/mit-license)\n\n## Additional Resources\n\n- [Kontent.ai Integration documentation](https://kontent.ai/learn/tutorials/develop-apps/integrate/integrations-overview)\n- [Custom Element documentation](https://kontent.ai/learn/tutorials/develop-apps/integrate/content-editing-extensions)\n- [Custom Element API reference](https://kontent.ai/learn/reference/custom-elements-js-api)\n\n[last-commit]: https://img.shields.io/github/last-commit/kontent-ai/integration-shopify?style=for-the-badge\n[contributors-shield]: https://img.shields.io/github/contributors/kontent-ai/integration-shopify.svg?style=for-the-badge\n[contributors-url]: https://github.com/kontent-ai/integration-shopify/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/kontent-ai/integration-shopify.svg?style=for-the-badge\n[forks-url]: https://github.com/kontent-ai/integration-shopify/network/members\n[stars-shield]: https://img.shields.io/github/stars/kontent-ai/integration-shopify.svg?style=for-the-badge\n[stars-url]: https://github.com/kontent-ai/integration-shopify/stargazers\n[issues-shield]: https://img.shields.io/github/issues/kontent-ai/integration-shopify.svg?style=for-the-badge\n[issues-url]: https://github.com/kontent-ai/integration-shopify/issues\n[license-shield]: https://img.shields.io/github/license/kontent-ai/integration-shopify.svg?style=for-the-badge\n[license-url]: https://github.com/kontent-ai/integration-shopify/blob/main/LICENSE\n[core-shield]: https://img.shields.io/static/v1?label=\u0026message=core%20integration\u0026style=for-the-badge\u0026color=FF5733\n[stack-shield]: https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow\u0026logoColor=white\u0026style=for-the-badge\n[discussion-shield]: https://img.shields.io/badge/GitHub-Discussions-FE7A16.svg?logo=github\u0026style=for-the-badge\n[discord-shield]: https://img.shields.io/discord/821885171984891914?label=Discord\u0026logo=Discord\u0026logoColor=white\u0026style=for-the-badge\n[product-demo]: docs/demo.gif?raw=true\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontent-ai%2Fintegration-shopify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkontent-ai%2Fintegration-shopify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkontent-ai%2Fintegration-shopify/lists"}