> ## Documentation Index
> Fetch the complete documentation index at: https://frammerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Components
> The 21 production-ready components Frammerce ships - 7 product blocks and 14 cart blocks.
Every Frammerce component is a published Framer code component. You can:
* **Click** a card in the Components panel to insert at the current canvas position
* **Drag** a card directly onto the artboard
* **Style** it with Framer's regular layer tools (colors, layout, breakpoints)
All components subscribe to the same cart runtime, so they stay in sync across pages automatically.
**All 21 components are available on every plan.** Design and preview your full storefront on the Free tier - upgrade to Pro or Scale only when you're ready to accept real orders.
## Product components (7)
Used on product detail pages and product cards.
Main image + thumbnails for the active product.
Active price, optional compare-at strikethrough.
Size / colour / material option swatches.
Steppers to set the buy quantity.
In-stock / low / sold-out indicator.
Reactive button that adds the variant to the cart.
Skip-the-cart instant Shopify checkout.
## Cart components (14)
Used to build the cart drawer or cart page.
Opens the cart drawer from the navbar.
Live total item count, updates everywhere.
Dismisses the cart drawer.
Renders every line in the cart.
Layout shell for a single cart line.
Product thumbnail for a cart row.
Variant-aware product name.
Selected options summary (Black / Medium).
Inline +/- to change the line quantity.
Per-item formatted price.
Quantity × unit price.
Removes a line from the cart.
Currency-formatted total (pre-tax, pre-shipping).
Hands the cart off to Shopify checkout. **Gated by plan tier.**
## Where the paid tier kicks in
All the components are included in every plan, including the Free plan. In the Free plan the **checkout functionality** is the one piece that's missing - to unlock it and start taking real orders, upgrade to **Pro** or **Scale**.
To know more about our Pro and Scale plans, visit the [pricing page](https://frammerce.dev/pricing).