> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stockful.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Storefront Data

> Write live inventory data to Shopify metafields and expose a JavaScript API to your theme: location availability, stock badges and urgency messaging.

Stockful can write live inventory data to Shopify metafields and expose a JavaScript API for theme developers - giving you location availability, stock status badges, urgency messaging, and more. The location availability block is drop-in; badges and urgency are built from the metafields with a few lines of Liquid.

## What you get

<CardGroup cols={2}>
  <Card title="11 metafields" icon="database" href="/storefront/data-reference">
    7 variant-level + 4 product-level metafields written daily and updated in real time
  </Card>

  <Card title="Theme blocks" icon="palette" href="/storefront/guides/theme-blocks">
    Drop-in location availability block - no code required
  </Card>

  <Card title="Developer API" icon="code" href="/storefront/developer-api">
    `window.stockful` JavaScript API for custom integrations
  </Card>

  <Card title="Code examples" icon="clipboard" href="/storefront/examples">
    Copy-paste Liquid and JavaScript snippets for common patterns
  </Card>
</CardGroup>

## Quick start

### 1. Enable storefront data

Go to **Settings > Storefront** in the Stockful app and toggle **Enable storefront data**. Choose which metafields to sync.

### 2. Activate the app embed

In your Shopify admin, go to **Online Store > Themes > Customize**. Open the **App embeds** panel and enable **Stockful**.

### 3. Add the block to your product page

Still in the theme editor, navigate to your product template. Click **Add block** and choose **Stockful Location Availability** - a "Check store availability" button that opens a drawer of per-location stock.

### 4. Add badges and urgency (optional)

Stock badges and urgency messaging are built from the metafields rather than a block, which gives you full control over the markup. Both have copyable Liquid: [stock badges](/storefront/guides/stock-badges) and [urgency messaging](/storefront/guides/urgency-messaging). The [data reference](/storefront/data-reference) lists every available field.

## How data flows

```
Inventory change
  → Stockful processes change
  → Metafields written to Shopify (real-time for status, daily for analytics)
  → Available via Liquid, Storefront API, and window.stockful
```

**Real-time updates:** `stock_status` metafields update within seconds of an inventory change.

**Daily sync:** Analytics metafields (days of supply, velocity, sold count, etc.) sync once per day as part of the daily analytics run.

## Accessing metafields

Stockful's metafield namespace is `app--326028230657--stockful`. Use this in your Liquid templates and Storefront API queries.

### In Liquid

```liquid theme={null}
{{ product.metafields.app--326028230657--stockful.stock_status.value }}
```

### In the Storefront API (headless)

```graphql theme={null}
query ProductWithStock($handle: String!) {
  product(handle: $handle) {
    stockStatus: metafield(namespace: "app--326028230657--stockful", key: "stock_status") {
      value
    }
    totalSold: metafield(namespace: "app--326028230657--stockful", key: "total_sold_30d") {
      value
    }
  }
}
```