BigCommerce App Installation Guide

BigCommerce is a leading cloud-based ecommerce platform for businesses of all sizes. Using its powerful online store management features, you can set up an online store, sell your products, and rapidly grow your business.

Contentstack Marketplace allows you to easily install the BigCommerce application and use it within your stack to add products from the BigCommerce store into the entries of your content type.

Prerequisites

• BigCommerce account
• Contentstack account
• Access to the Contentstack Organization/ Stack as the Owner/ Admin

This step-by-step guide explains how to install and configure BigCommerce in your stack.

Steps for Execution

1. Retrieve your API client credentials from BigCommerce
2. Install and Configure BigCommerce in Contentstack Marketplace
3. Use BigCommerce within your Stack

1. Retrieve your API client credentials from BigCommerce

   1. Log in to your BigCommerce account.
   2. Follow BigCommerce’s detailed guide to retrieve the API client credentials of your BigCommerce store.
      The credentials include the API Path URL and access token of your BigCommerce store API client.

   Note: Make a note of the API URL and access token as these will be required while configuring the BigCommerce app in Marketplace.

   While creating the API account in BigCommerce, make sure to select Products read-only as the permission as shown below.

   
   

   Additional Resource: Refer to the Authenticating BigCommerce’s REST APIs page to get the API credentials.

2. Install and Configure BigCommerce in Contentstack Marketplace

   Follow the steps below to install the application in Contentstack.

   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. Click Apps from the left panel.
   4. Within the Marketplace, you will be able to see all the apps available, hover over the BigCommerce app and click Install App.
      
   5. In the popup window, select the stack where you want the BigCommerce app to be installed and click Install.
      
      
   6. Now on the Configuration screen, enter the following details:
      1. Store ID: Enter the BigCommerce API URL we retrieved in step 1.
      2. Auth Token: Enter the BigCommerce Auth token that we retrieved in step 1.
      3. Save in Entry: Choose how you want to save your data in the entry.
         • If you select Whole JSON, the entire object that is being returned from BigCommerce will be saved. Also, with Whole JSON, you can select only limited number of products.
         • For Custom JSON, you need to search and add specific BigCommerce keys you want to fetch. By default, the id and name of the item are selected.
      4. Is Multi-Storefront?: Enabling Multi-Storefront adds a channel filter to your stack to filter the products and categories.
      5. Items Per Page: Add the number of items you want to fetch on each page.
         
   7. On the UI Locations tab, you can see the predefined app locations. You can use the toggle button corresponding to each UI location to enable or disable it based on your requirements.
   8. If the webhook is enabled for your app, you can view the webhook logs under the Webhook tab.

   Additional Resource: For more information on UI location and webhooks, please refer to the Installed Apps guide.

   9. After adding the configuration details, click the Save button.
   10. Click Open Stack to start using the BigCommerce application.
       

3. Use BigCommerce within your Stack

   To use the BigCommerce 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:
   

   Note: With the BigCommerce app, you can fetch products as well as product categories. To fetch both products and categories in an entry, we recommend you create two custom fields: one for products and another one for categories.

   3. In the Content Type Builder page, add a Custom field for product in your content type by clicking the Insert a field link represented by a + sign.
   4. Under Select Extension/App, select BigCommerce - Product Field and click Proceed.
   
   5. Add another Custom field for category in your content type by clicking the Insert a field link represented by a + sign.
   6. Under Select Extension/App, select BigCommerce - Category Field and click Proceed.
   
   7. After adding the app, click Save or Save and Close to save your changes.
   
   8. In the left navigation panel, navigate to the Entries page and click + New Entry to create a new entry for the above content type. And then click Proceed. You will see the BigCommerce custom fields on your entry page as shown below:
   
   9. Click the Add Product(s) button and select the products from your BigCommerce store and add them to your entry.
   
   10. Click the Add Category(s) button and select the categories from your BigCommerce store and add them to your entry.
   
   11. The products and categories you select are referenced within your entry. Finally, Save your entry.
   
   12. You can drag and drop the products to arrange them in required order in both Thumbnail and List views.
       • Thumbnail View: It displays the images, names and prices of the selected product.
       
       • List View: Lists display the names and prices of the selected product.
       
   13. Click the Save button to save your entry.
       You can view more product details in Sidebar Widget.

   Note: You must save your entry to get the product details in the Sidebar Widget.

   14. In the right navigation panel, select Widgets, and then select BigCommerce to view the product details.
   
   15. Enter the product name in the dropdown to search and view the product details.
   
   16. With the latest app update, you can filter products and categories by Channels. To choose product(s) according to the categories or channels:
       1. Select the option from the Select Category dropdown to segregate the products based on the categories.
       
       2. Select the option from the Select Channel dropdown to segregate the products based on the channels.
       
       3. Select the option from the Select Channel dropdown, then choose the preferred category from the Select Category dropdown for extensive filtering.