cs-icon.svg

Shopify App Installation Guide | Old Version

Shopify is a leading commerce platform for businesses of all sizes. It allows you to set up an online store to sell your products.

With the Contentstack Marketplace Shopify app, you can use and refer to the products from your Shopify account within your Contentstack entries.

Prerequisites

This step-by-step guide explains how to install and configure Shopify within your stack.

The steps to be performed are as follows:

  1. Get your Storefront API access token from Shopify
  2. Install and Configure Shopify in Contentstack Marketplace
  3. Use Shopify within your Stack
  1. Get your Storefront API access token from Shopify

    To get your credentials from Shopify, follow the steps given below:

    1. Log in to your Shopify account.
    2. On the Admin portal page, click Apps from the left navigation menu. 
    3. Navigate to the bottom of the Apps page and click the Develop apps for your store link.
      Develop_App_For_Store.png
    4. On the App Development page, click Create an app. Mention your App name and select the App developer of your app, then click the Create app button. 
      Create_App.png
    5. On the next screen, navigate to the Configuration section and configure the Storefront API integration for your app.
    6. Select the access scopes for your Storefront API and Save your configuration.
      Save_Configuration.png
    7. Finally, click the Install app button, confirm your installation, and proceed to get the Storefront API access token.
      Storefront_Api_Access_Token.png
    8. Note: The Storefront API access token is required to connect your store with Contentstack. Make a note of this access token to be used in the next step.

  2. Install and Configure Shopify in Contentstack Marketplace

    To install the application in Contentstack, follow the steps below:

    1. Log in to your Contentstack account.
    2. In the left-hand side primary navigation, click the Marketplace icon to go to the Marketplace. 
    3. Shopify-Marketplace_Icon.png
    4. Within the Marketplace, you can see all the apps available; hover over the Shopify app and click the Install App button. 
    5. Shopify-Install_App.png
    6. Select the stack for which you want to install the Shopify app and click the Install button.
    7. Shopify-Select_Stack.png
    8. Enter the Domain and Storefront API access token on the resulting Configuration page and click the Save button.
    9. Shopify-Configuration.png
    10. Click the Open Stack button to start using the Shopify application.
  3. Use Shopify within your Stack

    To use the Shopify application within an entry of your stack, follow the steps given below:

    1. Go to your stack and click the Content Models icon on the left navigation panel, and click the + New Content Type button.
    2. Create a content type by adding relevant details as displayed below:
    3. Shopify-Content_Type.png
    4. In the Content Type Builder page, add a Custom field in your content type by clicking the Insert a field link represented by a + sign.
    5. Under Select Extension/App, select Shopify and click the Proceed button. 
    6. Shopify-Custom_Field-Select_Extentions_or_App.png
    7. After adding the app, click Save or Save and Close to save your changes.
    8. Shopify-Custom_Field-Save_and_Close.png
    9. To use the Shopify app, create an entry for this content type, and you will see the Shopify custom field on your entry page as shown below: 
    10. Shopify-Add_Collection.png
    11. Click the Add Collection button, to select collections from your Shopify account and add them to your entry.
      Add_Collection.png
    12. The collections you select are referenced within your entry. You can add more collections by clicking the Add Collection button. Finally, Save your entry.
      Referenced_Entry.png

Was this article helpful?
^