For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Dev Portal
DocsAPI ReferenceLearnCommunityChangelog
DocsAPI ReferenceLearnCommunityChangelog
    • Overview
  • Learning Plans
    • Developer Foundations
    • Composable Developer
    • Stencil Developer
    • B2B Developer
  • Courses
        • Course Overview and Prerequisites
        • What is GraphQL?
        • What is the GraphQL Storefront API?
        • Lab - See it in Action!
        • BigCommerce GraphQL Tools
      • Conclusion
    • Learning Changelog
Dev Portal
LogoLogo
On this page
  • In this lab, you will:
  • View the Example with Sample Data
  • Resources
CoursesGraphQL Storefront APIModule 1: Overview

Lab - See it in Action!

Was this page helpful?
Previous

What is the GraphQL Storefront API?

Next

BigCommerce GraphQL Tools

Built with

Plan: Developer Foundations

 Lesson 4 of 28 · 5 min

To see the GraphQL Storefront API in action, check out the Bootstrap + Vanilla JS Storefront API Example hosted on GitHub. This example shows how a static HTML site can be used to render dynamic product information via the GraphQL Storefront API.

In this lab, you will:

  • View the GraphQL Storefront API Example with sample data

View the Example with Sample Data

  1. Go to https://bigcommerce.github.io/storefront-api-examples/html-bootstrap-vanillajs/
  2. Click the “Submit” button
  3. View web page (view page source to view comments in the HTML and queries)

Image

Resources

  • Vanilla JS Storefront API Example Source Code