Skip to main content
Stockful includes two drop-in theme blocks that require no coding. Add them to your product pages through the Shopify theme editor.

​
Prerequisites

  1. Storefront data enabled - In the Stockful app, go to Settings > Storefront and enable storefront data
  2. App embed active - In the theme editor, go to App embeds and enable Stockful

​
Stockful Badge

The badge block displays stock status, urgency, velocity, and restock information for the current variant.

​
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 Badge
  4. Drag the block to position it where you want the badge to appear

​
Settings

​
Shape

Controls the badge border radius:
  • Square - sharp corners
  • Rounded - subtle rounding (default)
  • Pill - fully rounded capsule

​
Colors

All color settings are optional. When left empty, the badge uses sensible defaults that work with most themes.
  • Background color - badge background (default: transparent)
  • Text color - badge text (default: inherits from theme)

​
Status colors

Override the indicator dot color for each status:
  • In stock color - (default: green #16a34a)
  • Low stock color - (default: orange #ea580c)
  • Out of stock color - (default: red #dc2626)
  • Selling fast color - only visible when “Show selling speed” is enabled (default: purple #7c3aed)

​
Display toggles

ToggleDefaultWhat it shows
Show status indicatorOnColored dot reflecting the current stock status
Pulse animationOffAnimates the indicator for low stock, out of stock, and selling fast. Only visible when “Show status indicator” is enabled
Show stock statusOn”In Stock”, “Low Stock”, or “Out of Stock” text label
Show urgency (days left)Off”X days left” based on days of supply
Show selling speedOn”Selling Fast” label when the variant has high velocity
Show units soldOff”X sold in the last 30 days”
Show restock statusOff”Restocking soon” or “Restock on the way”

​
How it works

The badge renders immediately using Liquid metafields - no JavaScript fetch is needed for the initial page load. When a customer selects a different variant, the badge updates dynamically via the window.stockful API. “Selling Fast” logic: When “Show selling speed” is enabled and the variant’s velocity trend is selling_fast (ABC class A with positive velocity), the badge overrides the normal stock status to show a purple “Selling Fast” indicator instead.

​
Stockful Location Availability

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

​
Adding the block

  1. In the theme editor on your product template, click Add block > Apps > Stockful Location Availability
  2. Position the block near the add-to-cart button or product details

​
Settings

SettingDefaultDescription
Button text(uses localized default)Custom button label. When left empty, uses the translated default (e.g. “Check store availability”)
Button styleSecondaryPrimary (filled), Secondary (bordered), or Plain (underlined text link)
Display modeDrawerDrawer (slides in from the right) or Modal (centered overlay, bottom sheet on mobile)
Maximum locations10Limit how many locations appear (1-50)
Show available quantityOnWhen 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. The locations shown are controlled by the storefront settings in the Stockful app:
  • Visible locations - choose which locations customers can see

​
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

​
CSS customization

Both blocks render in the normal DOM (no shadow DOM) and inherit your theme’s fonts and colors. All visual properties can be overridden via CSS custom properties in your theme CSS: 
:root {
  /* Badge */
  --stockful-badge-bg: transparent;
  --stockful-badge-color: currentColor;
  --stockful-badge-radius: 6px;

  /* Status dot colors */
  --stockful-color-in-stock: #16a34a;
  --stockful-color-low-stock: #ea580c;
  --stockful-color-out-of-stock: #dc2626;
  --stockful-color-selling-fast: #7c3aed;

  /* 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-badge, .stockful-badge__dot, .stockful-drawer__panel, etc.) with single-class selectors and no !important - making them easy to override in your theme.