> 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.

## 3.0 Browse and discover as a shopper

When building a *Buy Online, Pick up in Store* solution, you can create custom experiences for shoppers that support *Buy Online, Pick up in Store*.

There are two ways to access data on the storefront:

* REST Storefront API
* GraphQL Storefront API

Over time, BigCommerce will be investing more in the GraphQL Storefront API, so all future enhancements to support *Buy Online, Pick up in Store* will be made against the GraphQL Storefront API.

### 3.1 REST Storefront API

#### 3.1.1 Find available pickup options with stock available

To show pickup options to customers on a storefront page (e.g. the product detail page), send a request to the [Find available pickup options](/developer/api-reference/rest/storefront/pickup-options#find-available-pickup-options) endpoint.

#### Request

**`Example request: Find available pickup options`**

```http title="Example request: Find available pickup options"
POST https://{{yourstore.example.com}}/api/storefront/pickup-options
Content-Type: application/json
Accept: application/json

{
  "searchArea": {
    "radius": {
      "value": 25,
      "unit": "MI"
    },
    "coordinates": {
      "latitude": 32.8058616,
      "longitude": -98.0105544
    }
  },
  "items": [
    {
      "variantId": 1,
      "quantity": 1
    },
    {
      "variantId": 2,
      "quantity": 2
    }
  ]
}
```

#### Response

**`Example response: Find available pickup options`**

```json title="Example response: Find available pickup options"
{
  "results": [
    {
      "pickupOptions": [
        {
          "pickupMethod": {
            "id": 1,
            "locationId": 1,
            "displayName": "Office Pickup",
            "collectionInstructions": "Bring your ID",
            "collectionTimeDescription": "Collect during our opening hours of 0900 - 1700"
          },
          "availableItems": [
            {
              "variantId": 1,
              "quantity": 1
            },
            {
              "variantId": 2,
              "quantity": 2
            }
          ]
        }
      ]
    },
    {
      "pickupOptions": [
        {
          "pickupMethod": {
            "id": 2,
            "locationId": 2,
            "displayName": "Pickup method 2",
            "collectionInstructions": "Instructions",
            "collectionTimeDescription": "Desc"
          },
          "availableItems": [
            {
              "variantId": 1,
              "quantity": 1
            },
            {
              "variantId": 2,
              "quantity": 2
            }
          ]
        }
      ]
    }
  ]
}
```

### 3.2 GraphQL Storefront API

You can use the GraphQL Storefront API to query locations and inventory that are available to a storefront.

#### 3.2.1 Get locations

For example queries, see [Query Locations with the GraphQL Storefront API](/developer/docs/storefront/guides/graphql-storefront-api/locations/queries).

For info on getting location data in the storefront using Stencil Utils powered by GraphQL, see [Stencil Utils Reference- Get page by GraphQL](/developer/docs/storefront/stencil/utils/reference#get-page-by-graphql).

#### 3.2.2 Get inventory by location

For example queries, see [Query Inventory with the GraphQL Storefront API](/developer/docs/storefront/guides/graphql-storefront-api/inventory/queries).