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

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

Last updated

Was this helpful?