Product components

Display product data from Shopify — prices, variants, stock status, and more. Each component handles one concern and reads from a shared product context.

FmProductPrice

Displays the product price, formatted for the visitor's active market currency. Updates when the visitor selects a different variant or switches markets.

FmProductComparePrice

Shows the original price with a strikethrough when a product is on sale. Hides automatically when the product has no compare-at price.

FmProductDiscount

Displays the discount amount or percentage between the current price and compare-at price.

FmProductVariants

Presents variant options (size, color, material) for selection. Disables unavailable combinations automatically. Connect this to FmCartAddButton — when a visitor picks a variant, the add-to-cart button updates to match.

FmProductVariantLabel

Displays the name of the currently selected variant option (e.g., "Large" or "Blue").

FmProductStockState

Toggles child visibility based on inventory status. Use slots to show different content for in-stock, low-stock, and out-of-stock states.

FmProductStockState
  ├── In Stock slot → "Ready to ship"
  ├── Low Stock slot → "Only 3 left"
  └── Out of Stock slot → "Sold out"

Configure the low-stock threshold via property controls.

FmProductInventory

Displays the numeric inventory count for the selected variant.

FmRestockEstimate

Shows the estimated restock date for out-of-stock items. Reads restock metadata from Shopify and hides when the product is in stock.

FmDeliveryEstimate

Displays the estimated delivery date based on the visitor's market and selected variant.

WARNING

All product components must be nested inside a product context. Connect a product handle to the parent frame, or nest them inside a component that provides product context (like FmCatalog).

Composition example

Frame (product page)
  ├── FmProductPrice
  ├── FmProductComparePrice
  ├── FmProductDiscount
  ├── FmProductVariants
  ├── FmProductStockState
  │   ├── In Stock → FmDeliveryEstimate
  │   └── Out of Stock → FmRestockEstimate
  └── FmCartAddButton