> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Adding Buy Online, Pick up in Store Features to the Storefront

You can enhance the storefront browsing experience by letting shoppers see and select a Pickup fulfillment method.

The biggest benefit is that shoppers can see product inventory availability by location. This helps inform their shopping decisions.

![storefront browsing.png](/_fern-img/9bd4f873b034a608e9587a0762eef166d585181facf762b14bf0ad53130714d7.webp)

Adding inventory data experiences can be achieved by customizing a store's theme to query the [GraphQL Storefront API](/developer/docs/storefront/guides/graphql-storefront-api) and display the appropriate components for availability.

The [Query Locations with the GraphQL Storefront API](/developer/docs/storefront/guides/graphql-storefront-api/locations/queries) and [Query Inventory with the GraphQL Storefront API](/developer/docs/storefront/guides/graphql-storefront-api/inventory/queries) pages contain info about what has been added to the API to support *Buy Online, Pick up in Store* features.

The following example shows how you can show inventory for the base product and its variants using [Stencil](/developer/docs/storefront/stencil/overview):

1. Add the following [GraphQL attribute](/developer/docs/storefront/stencil/themes/context/frontmatter-reference#graphql-attributes) to the [Stencil Front Matter](/developer/docs/storefront/stencil/themes/context/frontmatter) of the `product.html` page:

```graphql showLineNumbers={false}
gql: "query($productId: Int!) {
  site {
    product(entityId: $productId) {
      name
      inventory {
        aggregated {
          availableToSell
        }
      }
      variants {
        edges {
          node {
            sku
            inventory {
              aggregated {
                availableToSell
              }
              byLocation {
                edges {
                  node {
                    locationEntityCode
                    availableToSell
                    isInStock
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}"
```

2. Add the following handlebars to the `product-view.html` page:

```handlebars showLineNumbers={false}
{{#if gql.data.site.product}}

<b>Available to Sell:</b> {{gql.data.site.product.inventory.aggregated.availableToSell}} <br />

{{#each gql.data.site.product.variants.edges}}
    {{#with node}}

        <b>Variant SKU: </b> {{sku}} <br />
        Total Available to Sell: {{inventory.aggregated.availableToSell}} <br />                     

        {{#each inventory.byLocation.edges}}
        {{#with node}}

        {{#if isInStock}}
        {{locationEntityCode}} has {{availableToSell}} in stock <br />
        {{/if}}   
            
        {{/with}}
        {{/each}}
    {{/with}}
{{/each}}

{{/if}}
```