Skip navigation

Integrating with e-commerce (Shopify)

In this tutorial, you will learn how you can easily integrate Kentico Kontent with an e-commerce solution to build a content-rich e-shop by providing content editors a custom product selector for the e-commerce platform of your choice.

Premium feature

Custom elements require a Professional plan or higher.

Table of contents

    This tutorial shows a specific example tailored to the Shopify platform, but the same principles can be applied to integration with many more e-commerce solutions which provide an API to get a list of products.

    A gif of the Shopify product selector in action.

    The Shopify product selector in action.

    What is Shopify?

    Shopify is a complete and powerful e-commerce platform you can use to easily manage your e-shop. You can manage all necessary product data and orders in Shopify. For more details, see the Shopify documentationOpens in a new window.

    Shopify logo

    In this tutorial, we will cover a simple yet powerful case where the combination of a content management system and e-commerce provides the perfect blend of content marketing and a traditional e-shop.

    Our scenario:

    • You own an e-shop powered by Shopify.
    • You want to extend its reach using content marketing.
    • The plan is to write a series of articles to promote some of the key products in your e-shop.

    Shopify has a basic blog capability, but using a headless CMS such as Kentico Kontent for your content gives you more control over content collaboration and greater ability to manage content for multiple channels.

    To keep things simple, let's assume that both the Shopify powered e-shop and your Kentico Kontent blogging platform with articles already exist and you just need to connect the two to achieve your goal.

    Step 1: Register a private app within Shopify

    Within this integration, you will:

    • Register a private app within Shopify.
    • Add a custom element with a Shopify product selector to your content type.
    • Link articles to specific products.
    • Add a call to action (CTA) for the product purchase to the article page.

    If you don't have a Shopify account, register for a new Shopify accountOpens in a new window. Add some sample products to the catalog.

    Navigate to your Shopify admin and select Apps from the main menu. Our custom product selector will run outside of Shopify, so you need to register it as a private app (an external app).

    Click Manage private apps.

    A screenshot of Shopify Apps showing where to mange private apps.

    On the next screen, click Create a new private app.

    A screenshot of Shopify Private apps.

    Enter the following information:

    • Private app name – Kentico Cloud Product selector
    • Emergency developer email – Your e-mail
    • Admin API permissions – No access for all options (as the selector will leverage the public Storefront API)
    • Storefront API – Select Allow this app to access your storefront data using the Storefront API
    • Storefront API permissions – Select only Read products, variants, and collections as you only need to read products in the product selector
    A screenshot of private app settings in Shopify.

    How your settings might look for your private app.

    Submit the form and notice two things that you will need to configure the Product selector to access the Shopify API:

    • Your e-shop's domain – This is shown in your browser's address bar, in our case it is https://dancing-goat-sample.myshopify.com, with dancing-goat-sample being the name of the store.
    • The Storefront access token – This is at the very bottom of the form so that you can authenticate requests against the Storefront APIOpens in a new window.

    Step 2: Add a Shopify product selector to a Kentico Kontent content type

    In this step, we'll extend the Article content type in our Sample App to include a product selector.

    1. In Kentico Kontent, choose Content models  from the app menu.
    2. Open the Article content type.
    3. Add a Custom element.
      1. Name it Promo for product.
      2. For the Hosted code URL, enter https://kentico.github.io/kontent-custom-element-samples/Shopify/product-selector.htmlOpens in a new window.
      3. For Parameters, you need to enter two values, either those for your store or those for our demo store.
        Because the sample Shopify product selector is general (it can be used for any Shopify store), you need to connect it to a store by providing additional configuration. The selector uses the Storefront API and needs the specific GraphQL endpoint URL and access token.
        To connect your store, add the following JSON configuration to Parameters and just replace <YOUR ACCESS TOKEN> and <YOUR STORE NAME> with the values for your store.
    • JSON
    { "storeFrontAccessToken": "<YOUR ACCESS TOKEN>", "apiEndpoint": "https://<YOUR STORE NAME>.myshopify.com/api/graphql" }
    { "storeFrontAccessToken": "<YOUR ACCESS TOKEN>", "apiEndpoint": "https://<YOUR STORE NAME>.myshopify.com/api/graphql" }

    If you would like to just try it out using our demo store, feel free to use the following:

    • JSON
    { "storeFrontAccessToken": "062a5bc9ab9d114b8ee509665ad3e7a5", "apiEndpoint": "https://dancing-goat-sample.myshopify.com/api/graphql" }
    { "storeFrontAccessToken": "062a5bc9ab9d114b8ee509665ad3e7a5", "apiEndpoint": "https://dancing-goat-sample.myshopify.com/api/graphql" }

    4. Save the content type.

    A screenshot of an Article content type with a Custom element for Shopify.

    How the Article content type might look when you've added a product selector.

    Step 3: Link articles to specific products

    With the content type set up, you can try out how the selector works and assign individual articles to promoted products from Shopify.

    1. In Kentico Kontent, choose Content & Assets  from the app menu.
    2. Filter the list by content type to see only items of the Article type.
    3. Open a content item for editing.
    4. Use the product selector to find and select the promoted product.
    5. Publish the content item to make sure the data is available on your live website.
    6. Repeat steps 3–5 for other Article items.
    A gif of the Shopify product selector in action.

    The Shopify product selector in action in a content item.

    Selector value format and customization

    Note that the product selector used in the previous steps is a demo to demonstrate the possibilities. Feel free to adjust it to your needs and visual requirements or build your own.

    You can find the product selector source code in its GitHub repositoryOpens in a new window.

    The compiled version used in the above example is in the Custom Element Samples repositoryOpens in a new window.

    The selector stores the following value format in JSON, which it also uses to display the selected product on first load:

    • JSON
    { "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" }
    { "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 Kentico Kontent; 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 site. Should you need to make more fields available, you can do so by customizing the custom element code.

    The selector also currently supports only a single selection. If you need to link multiple products, you can update the code, wrap the output value in an array and adjust the rendering code accordingly.

    Step 4: Present the content on the live site

    With new values in our data model and an understanding of their structure, you can start actually display a CTA below the article to navigate to the actual product.

    This step varies based on the technology you're using to display your content, so let's just briefly summarize what needs to be done.

    First, update your front-end model for the Article content type to include the new custom element.

    Because the value from the selector is provided as a structured object serialized to JSON, you need to parse the value from JSON at some point. You might most typically do that within the conversion of the source data model to the view model that you pass to your rendering code.

    In your rendering code, generate the URL using the handle field from the element value and your shop name. The URL to the product's Storefront has the following pattern:

    https://<YOUR STORE NAME>.myshopify.com/products/<PRODUCT HANDLE>

    In the demo case, that would be:

    https://dancing-goat-sample.myshopify.com/products/aeropressOpens in a new window

    After generating the URL, provide the user with a link to the product as part of the product promotion in the article.

    A screenshot of an article with the selected product displayed.

    How the link to the product might look within an article.

    The See more details button is simply a link to the Storefront URL of the given product.

    In our GitHub sample project, you can find the complete sample codeOpens in a new window for displaying a selected Shopify product on your website.

    You would take similar steps for a mobile app or other publishing channels.

    Other e-commerce integration options

    As mentioned earlier, Shopify was only an example of how you could integrate one specific scenario with a product selector. Depending on the e-commerce system you use and its capabilities, many more scenarios may make sense.

    Here are some more notable scenarios which we identified as a good fit for a combination of headless CMS and E-commerce and their typical setups.

    Product data synchronization

    You may have a powerful and complete e-commerce engine (such as Magento) to go with Kentico Kontent as your content hub, but you still need to synchronize data between the two systems in both directions. In that case, you can leverage Webhooks and notifications and the Management API.

    Magento logo

    Enriching product data

    If your chosen e-commerce solution doesn't provide rich enough capabilities for presenting the product across various channels but otherwise is fully fledged (such as CommerceTools), you can manage your rich product content (such as product descriptions, images, and media) in Kentico Kontent. In this case, you link it similarly as in the previous example and display part of the product page from your e-commerce system and part from Kentico Kontent.

    commercetools logo

    Shopping cart integration

    If your chosen e-commerce solution only provides order management and a shopping cart but no content management capabilities (such as SnipcartOpens in a new window), you can keep your product catalog together with all your rich marketing information in Kentico Kontent while letting the external e-commerce system handle just the order management heavy lifting.

    Snipcart logo

    What's next?

    You learned how to easily link products to content in order to boost your content marketing outcomes.

    The custom product selector sample provides a baseline you can use and further adjust to fit your needs. Other e-commerce solutions may have different endpoints and contracts, but the selector code is easy enough to update for other systems.

    There are countless e-commerce integration options you can achieve with all of the mentioned features Kentico Kontent offers, so go ahead and start your e-commerce integration now.