Product experience
Build product discovery first, then create the smallest useful purchase flow on the product page. Add optional controls only when the product needs them.
Build a product listing
Use a Framer CMS Collection List and connect each item to the Shopiframe Products CMS.
A typical product card includes:
Featured Image from the CMS
Title from the CMS
Price connected to Product Data
Sale / Sold out when status should be visible
A link to the product detail page
You can start with Product Card or build your own card from Framer layers and Shopiframe components.
Build a product page
Start with the smallest useful purchase flow:
CMS Title, Content, and images
Price
Variant Selector or Custom Variant Selector for products with options
Quantity Selector when customers can buy more than one
Add to Cart
Add these only when they support the product:
Image Gallery for multiple images or product media
Sale / Sold out for availability messaging
Stock Count for low-stock messaging
Subscription for products with Shopify selling plans
Shop Pay Button for direct Shop Pay checkout
Connect the same CMS Product Data value to every product component on the page. The components will share the selected variant, quantity, and selling plan.
Variants and options
Use Variant Selector for a direct list of Shopify variants. Use Option Selector when customers should choose option values such as size or color. Use Custom Variant Selector for custom buttons, swatches, or images.
Quantity and Add to Cart
Place Quantity Selector and Add to Cart in the same product context. Add to Cart uses the active variant, quantity, and selling plan selected by the other components.
Images, price, and availability
Use Image Gallery for Shopify product media and variant images. Add Price, Sale / Sold out, and Stock Count where that information helps the purchase decision.
Subscriptions and Shop Pay
Use Subscription only when:
The Shopify product has an active selling plan.
The public Storefront API token can read selling plans.
Selling plans (Subscription) is enabled in Store Configuration.
The component is connected to the CMS Product Data field.
Use Shop Pay Button when you want a direct purchase path that bypasses the cart.