Connect your Hygraph project to BigCommerce

BigCommerce is a SaaS provider for merchants running online businesses. The company's platform includes online store creation, search engine optimization, hosting, and marketing and security for small to enterprise sized businesses.

#What you can do with the Hygraph-BigCommerce integration

With this app you can continue to use BigCommerce as your preferred headless commerce solution for products and eCommerce assets. By installing the BigCommerce app, you can bring your BigCommerce products into Hygraph projects with the rest of your content.

#Prerequisites to use this integration

• You must have a Hygraph account. If you don't have one, you can create one here.

• You must have a Hygraph project.

• You must have a BigCommerce account. If you don't have one yet, you can visit their website and contact their team.

• You must have your BigCommerce Storefront ID and API token:

  • Storefront ID: You can easily find this value in the URL of your BigCommerce dashboard between store- and .mybigcommerce.com/manage/dashboard.

    For example:

    https://store-YOUR_STOREFRONT_ID.mybigcommerce.com/manage/dashboard

  • API Token: The API Token is the Access Token in your BigCommerce dashboard. You can find it by going to Settings > API > Store-level API accounts > Create API account. Make sure you enable full permissions and save.

    After you save, a window will pop up displaying the BigCommerce API credentials, and a .txt file containing your Access token will automatically download.

#Install the BigCommerce app

Click here to install the BigCommerce App on Hygraph, then follow these steps:

BigCommerce installation

1. In the dropdown, select which project you want to install the app in, then click on the Add App button. You should be redirected to the Configure BigCommerce section of your Hygraph project dashboard.
2. Fill in the Storefront ID and the API Token. Click here to learn how to find this information in your BigCommerce dashboard.
3. Click on the Save button. A pop-up notification in the lower right corner of the screen will indicate that the changes have been saved.

#Add the BigCommerce product field to your model

Add the BigCommerce Product field to your model

1. Navigate to the Schema builder.
2. Select the model that you would like to add the BigCommerce Product field to.
3. Select the BigCommerce Product field from the Add fields right sidebar.
4. Complete the Display name field, and the API ID will be auto-filled by the system. Optionally, you can also add a Description. This screen allows you to control different properties of your BigCommerce Product field: you can allow multiple values, or you can localize the field, by selecting the checkboxes under the Field options section of the screen.
5. Click on the Create button.

#Use BigCommerce in your Hygraph project

Use BigCommerce in your Hygraph project

1. Navigate to the Content editor.
2. Select the default that you configured the BigCommerce Product field for.
3. Click on the + Create entry button or, alternatively, edit an existing entry.
4. Locate the BigCommerce product section of the screen and click on Select product from BigCommerce. As a result, a new screen will display, showing the products available in your BigCommerce store.
5. Use the checkboxes next to the pictures to select the product you wish to add to the entry, then click on the Add selected product button.
6. Now that the product has been added to the entry, you can click on Save or Save & Publish, as needed.

#Resources

• Click here to access BigCommerce's documentation.
• Click here for more information on BigCommerce GraphQL Tokens.