Setting Up the BigCommerce Plugin

You can use your BigCommerce products and categories within Builder with the BigCommerce e-commerce plugin.

The plugin provides custom types that you can use to:

Provide products and categories as inputs for your custom code components.
Target content based on products or categories instead of URL paths with hard-coded resource handles or IDs.
Preview products and categories on product detail pages and inside of other content while editing.

For a general overview of what you can do with e-commerce plugins and where they fit into your site, visit Overview of Built-in Plugins.

Prerequisites

To set up the Builder plugin to communicate with BigCommerce, you must have a store API account.

For more information, visit BigCommerce's API authentication documentation.

In Builder

To install the BigCommerce plugin in Builder:

Go to Plugins.
On the BigCommerce tile, click the toggle to enable the BigCommerce plugin.
When the page updates (refresh if needed), click the Settings button which now displays on the BigCommere tile.
In the dialogue that opens, enter your store hash and access token from BigCommerce.
Click Connect to Your BigCommerce Store.

The video below shows this process:

For more information, check out Setting Up Built-in Plugins.

Builder's BigCommerce plugin also includes custom types, which streamline the integration of e-commerce data, so you can leverage dynamic content targeting and efficient data handling. They can significantly simplify the process of creating personalized and dynamic content within Builder, making it easier to design and visualize e-commerce elements.

The BigCommerce plugin provides six custom types:

BigCommerce Product, referred to as BigCommerceProduct in code
BigCommerce Product Preview (BigCommerceProductPreview)
BigCommerce Products List (BigCommerceProductsList)
BigCommerce Category (BigCommerceCategory)
BigCommerce Category Preview (BigCommerceCategoryPreview)
BigCommerce Categories List (BigCommerceCategoriesList)

Visit E-commerce Custom Types for details on the shape of each type's values.

Field types for fine-tuned control

The BigCommerce plugin adds three new field types, applicable in various contexts such as model fields, symbol inputs, custom components fields, and for custom targeting attributes. These fields allow for targeted content based on BigCommerce products and categories, facilitating the creation of dynamic and personalized content.

Custom targeting

Custom targeting allows you to deliver content specific to different BigCommerce products by utilizing product IDs or handles (slugs). You can set up custom targeting attributes on your site in the following ways:

Client-side rendering. Use builder.setUserAttributes to set the target attributes, including the current product ID, like the example below.

builder.setUserAttributes({
  product: currentProduct.id,
});

Server-side rendering. Pass the product ID or handle as a query parameter in your Content API call or in your GraphQL query, allowing for targeted content delivery based on specific products.

Component model fields

To streamline the process of creating product or collection page templates, use the BigCommerce Product Preview field in your component models.

This helps streamline template previewing for any product or collection by dynamically adding the product handle to the template's preview URL.

Make sure to set a default value for the BigCommerce Product Preview field to help ensure a smooth template development process.

Symbol inputs and fields

When using the BigCommerce product and BigCommerce collection fields as inputs within Builder, these fields are designed to enhance the content creation process by facilitating direct searches for and selections of products and collections.

Once a selection is made, the value is resolved in the form of a Builder Request object, simplifying the integration with your BigCommerce catalog.

This means that when you use these fields in APIs, SDKs, or directly within the Builder UI, the data structure is as follows:

{
  "yourFieldName": {
    "@type": "@builder.io/core:Request",
    "request": {
      "url": "..."
    },
    "data": {
      // Response data from the API request, for example:
      "product": {
        /* ... */
      }
    }
  }
}

This structure allows for dynamic content targeting and retrieval based on specific BigCommerce products or collections. The @type attribute signifies that the field is treated as a special request object within Builder.io, facilitating dynamic data fetching and rendering based on the provided URL and the associated response data.