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").

FmProductAvailability

Renders its slot when the product's live availability matches this atom's state prop. Stack one instance per state at the same canvas position; exactly one fires at runtime.

FmProductAvailability (state: "available")    → "Ready to ship"
FmProductAvailability (state: "sold-out")     → "All 500 sold"
FmProductAvailability (state: "backorder")    → "Ships in 2 weeks"
FmProductAvailability (state: "coming-soon")  → "Launching March 15"
FmProductAvailability (state: "partner")      → "Buy on Partner Site"
FmProductAvailability (state: "discontinued") → "We've retired this piece"
FmProductAvailability (state: "unavailable")  → "Currently unavailable"

Bind stockModel and launchDate from CMS per product row.

FmProductLowStock

Overlay that fires when tracked inventory is positive and at or below the threshold. Independent of FmProductAvailability: a product can be both available and low-stock.

FmProductLowStock (threshold: 10) → "Only 3 left!"

Configure the 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
  ├── FmProductAvailability (state: "available") → FmDeliveryEstimate
  ├── FmProductAvailability (state: "sold-out") → FmRestockEstimate
  ├── FmProductLowStock → "Only 3 left!"
  └── FmCartAddButton