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

> Expose real-time inventory intelligence on your storefront

Stockful can write live inventory data to Shopify metafields and expose a JavaScript API for theme developers - giving you stock status badges, urgency messaging, location availability, and more, all without writing backend code.

## 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 badge and location availability blocks - 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 blocks to your product page

Still in the theme editor, navigate to your product template. Click **Add block** and choose:

* **Stockful Badge** - shows stock status, urgency, and social proof
* **Stockful Location Availability** - "Check store availability" button with a drawer

### 4. Customize (optional)

Each block has settings for shape, colors, and display options. For advanced customization, read the [data reference](/storefront/data-reference) and build your own Liquid templates using metafields directly.

## 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
    }
  }
}
```