Skip to content
Shopify product selector for Kentico Cloud
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
CODE_OF_CONDUCT.md DCN-103 - Prepare for Kentico repository Jun 19, 2019
CONTRIBUTING.md DCN-103 - Prepare for Kentico repository Jun 19, 2019
LICENSE DCN-103 - Prepare for Kentico repository Jun 19, 2019
README.md Merge branch 'master' of github.com:kenticomartinh/kc-shopify Jun 19, 2019
config.json
index.pug
initialValue.json DCN-103 - Polish based on review feedback Mar 12, 2019
product-selector.js DCN-103 - Polish based on review feedback Mar 12, 2019
product-selector.less
shopify_logo_whitebg.svg

README.md

Shopify product selector for Kentico Cloud

Stack Overflow

This repository contains source code of Shopify product selector custom element for Kentico Cloud

Use

If you want to use Shopify product selector in your project in Kentico Cloud, follow these steps:

  • In Kentico Cloud open Content models tab
  • Open / create a content model to which you want to add Shopify selector
  • Add Custom element content element
  • Open configuration of the content element
  • Use following URL as Hosted code URL (HTTPS): https://kentico.github.io/custom-element-samples/Shopify/product-selector.html
  • Provide the following JSON parameters for the custom element to connect it to your store, replace the macros with the actual values from Shopify admin UI
{
  "storeFrontAccessToken": "<YOUR ACCESS TOKEN>",
  "apiEndpoint": "https://<YOUR STORE NAME>.myshopify.com/api/graphql"
}

Installation

If you want to adjust the implementation, first download Kentico Cloud Custom Elements Devkit. This repository should be positioned within /client/custom-elements folder. For further instructions on devkit implementation, please refer to Custom Element Devkit README.

Get started

Prerequisites:

  • Node.js
  • git
git clone https://github.com/Kentico/custom-element-devkit.git
cd custom-element-devkit
git clone https://github.com/Kentico/cloud-custom-element-sample-shopify.git ./client/custom-elements/cloud-custom-element-sample-shopify
npm install --save jquery@^3.4.0
npm start -- -hw

Browse: https://localhost:3000/custom-elements/cloud-custom-element-sample-shopify/wrap

Live site implementation sample

If you want to see live site example of Shopify product displayed on the live site, browse to a deployed sample site.

See source code of the sample site implementation here.

Analytics

You can’t perform that action at this time.