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

# Theme Blocks

> Set up Stockful's no-code location availability block on your product pages from the Shopify theme editor.

Stockful includes a drop-in theme block that requires no coding. Add it to your product pages through the Shopify theme editor.

## Prerequisites

**App embed active** - In the theme editor, go to **App embeds** and enable **Stockful**. This loads the CSS and JavaScript the block depends on. Without it the block cannot load anything.

You do not need to enable storefront data for the location block. That setting controls whether Stockful writes metafields to your products and variants, which is what the [stock badge](/storefront/guides/stock-badges) and [urgency messaging](/storefront/guides/urgency-messaging) guides use.

## Stockful Location Availability

The location block adds a button that opens a slide-out drawer showing per-location stock.

### Adding the block

1. In your Shopify admin, go to **Online Store > Themes > Customize**
2. Navigate to your **product template**
3. In the product section, click **Add block > Apps > Stockful Location Availability**
4. Position the block near the add-to-cart button or product details

### Settings

| Setting                 | Default                  | Description                                                                                         |
| ----------------------- | ------------------------ | --------------------------------------------------------------------------------------------------- |
| Button text             | (uses localized default) | Custom button label. When left empty, uses the translated default (e.g. "Check store availability") |
| Button style            | Secondary                | **Primary** (filled), **Secondary** (bordered), or **Plain** (underlined text link)                 |
| Display mode            | Drawer                   | **Drawer** (slides in from the right) or **Modal** (centered overlay, bottom sheet on mobile)       |
| Maximum locations       | 10                       | Limit how many locations appear (1-50)                                                              |
| Show available quantity | On                       | When enabled, shows "X available" instead of "In stock" / "Out of stock"                            |

### How it works

When the customer clicks the button, location data is fetched live from Shopify. Depending on the display mode, it either opens a drawer that slides in from the right, or a centered modal (which becomes a bottom sheet on mobile). Each location shows its name, city, and stock status.

A location holding zero stock is listed with "Out of stock" rather than hidden, so customers can see the full picture. If the variant is not stocked at any location at all, the drawer says so instead of appearing empty.

### Accessibility

Both drawer and modal modes include:

* `role="dialog"` and `aria-modal="true"` on the panel
* `aria-hidden` toggled on open/close
* Focus trap within the dialog while open
* Focus returns to the trigger button on close
* Escape key to close
* Backdrop click to close
* Body scroll lock while open

## Adding a stock badge

There is no drop-in badge block. To show stock status on a product or collection page, use the product and variant metafields Stockful writes, which give you full control over the markup and styling. The [stock badges guide](/storefront/guides/stock-badges) has copyable Liquid for product cards, and [urgency messaging](/storefront/guides/urgency-messaging) covers days-of-supply and velocity.

Enable **Settings > Storefront** in the Stockful app first, or those metafields are never written.

## CSS customization

The block renders in the normal DOM (no shadow DOM) and inherits your theme's fonts and colors. All visual properties can be overridden via CSS custom properties in your theme CSS:

```css theme={null}
:root {
  /* Drawer and modal */
  --stockful-drawer-bg: #fff;
  --stockful-drawer-color: #111;

  /* Location button (primary style) */
  --stockful-locations-btn-bg: #000;
  --stockful-locations-btn-color: #fff;
}
```

All CSS classes use BEM naming (`.stockful-drawer__panel`, `.stockful-locations__trigger`, etc.) with single-class selectors and no `!important` - making them easy to override in your theme.