githubEdit

Product inventory

Overview

This block displays the inventory level of a product and provides visual feedback when the inventory falls below a specified inventory_threshold. It is designed to alert users when stock is low, using customizable settings for appearance and behavior.

Common use cases

  • Use this block to alert customers when product inventory is low, encouraging them to purchase before stock runs out

  • Ensure the product and inventory_threshold settings are configured correctly to provide accurate inventory alerts

  • Display stock availability information on product pages and product cards

Block settings

General

Setting
Description
Options

Show advanced settings

Reveals visibility settings

Checkbox (default: false)

Content

Setting
Description
Options

Product

Select the product to display inventory for

Product picker

Inventory threshold

Minimum stock level before showing inventory alert

Number input (default: 5)

Spacing

Setting
Description
Options

Enable horizontal padding

Adds horizontal padding around the inventory display

Checkbox (default: false)

Enable top padding

Adds top padding around the inventory display

Checkbox (default: false)

Enable bottom padding

Adds bottom padding around the inventory display

Checkbox (default: false)

Color

Setting
Description
Options

Text color

Controls the text color

• Default (default) • Alternative • Primary background • Primary foreground • Secondary background • Secondary foreground • Tertiary background • Tertiary foreground • Neutral background • Neutral foreground • Shade

Style

Setting
Description
Options

Font family

Controls the font family used for the inventory text

• Standard • Heading • Subheading • Accent Visible when font size contains 'type--'

Font size

Controls the font size of the inventory text

• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Layout

Setting
Description
Options

Horizontal alignment

Controls horizontal alignment

• Left (default) • Center • Right

Display

Setting
Description
Options

Visibility

Controls when the block is visible

• All (default) • Mobile only • Desktop only

Visible when Show advanced settings is on

Last updated

Was this helpful?