GraphQL
BigCommerce’s GraphQL Storefront API makes it possible to query storefront data from within a Stencil theme or remote site. This means information previously only available on the backend using Stencil’s template logic can now be accessed with front-end JavaScript. For example, with the GraphQL Storefront API, it is possible to do the following:
- Access product options, variations, and custom fields for any product from any page.
- Request any product’s images at any resolution.
- Ask for customer details such as name, email address, and attributes (if logged in).
- Look up objects, such as categories or brands, by URL, and fetch their details.
- Build front-end applications on top of a BigCommerce Stencil theme or on a remote site.
Additionally, by leveraging the power of GraphQL, data for multiple resources can be returned from a single API call, which simplifies integration and increases performance so that developers can focus on building delightful shopper experiences.
Create Widgets Powered by GraphQL
In the recommended tutorial below, you will go through the process of creating a product widget powered by BigCommerce’s Widgets API and GraphQL Storefront API. This setup allows widgets to dynamically update and display information such as product name, image, and price.
By the end of this tutorial, you should have a functional widget that is configurable via the Page Builder UI in a store’s control panel.
Create Widgets Powered by GraphQL | BigCommerce Dev Center
Widgets are configurable and reusable components of content that merchants can display on their storefront. Widgets consist of a combination of HTML/CSS, JavaScript, and Handlebars, and are rendered as part of the storefront’s HTML.
