Skip to main content
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 and 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

​
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 has copyable Liquid for product cards, and 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:
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.