Configure Shopify products for Framerce
Set up your Shopify products so Framerce components display images, variants, pricing, and inventory correctly.
Images
- Upload at least one product image (recommended: 1200x1200px or larger)
- First image is used as the primary display in
FmProductImage - Additional images appear in gallery mode
Variants
Framerce reads Shopify's variant options (Size, Color, Material, etc.) and renders them in FmProductVariantSelect.
- Each option can have multiple values
- Variants can have individual prices, images, and inventory
- Single-variant products work — the variant selector hides automatically
Pricing
| Shopify Field | Framerce Usage |
|---|---|
| Price | Displayed by FmProductPrice |
| Compare at price | Shows strikethrough + sale indicator |
| Currency | Handled by market context |
Inventory
- Enable Track quantity in Shopify for stock-aware components
FmProductStockStateshows in-stock, low-stock, or out-of-stock statesFmCartItemButtondisables when variant is unavailable
Collections
Products assigned to Shopify collections appear in FmCatalog when you connect it to a collection handle.
What's next
- Set up Framerce — Install the plugin and add components
- Product Components — Configure product display components