Showcase the details
Build the product layout around your photography and information. The Image Gallery displays Shopify media and can follow the selected variant image. Bind titles, descriptions, and editorial content with Framer CMS, while product-aware components receive the CMS Product Data field.
Make every option clear
Present color, size, or material choices with variant selectors styled for your storefront. The price component updates when a shopper selects a variant, so the selection and its price stay together. Choose the labels, spacing, and selected states that suit your design.
Give customers a clear next step
Place quantity, availability, and Add to Cart near the product details. Quantity controls can limit selection to known stock; Add to Cart uses the selected variant and quantity. Keep Shopify responsible for the underlying catalog and inventory rather than maintaining a separate commerce system.
SET UP YOUR WORKFLOW
From setup to storefront
Connect your store
Connect Shopify through the plugin and make the products available to the connected storefront. Use the Demo Store first if you are exploring.
Design the product layout
Create your Framer layout, bind content fields, and connect Product Data to the commerce components. The CMS guide covers the detailed setup.
Check variants and publish
Preview product images, variant choices, prices, and cart behavior across screen sizes. Publish your storefront only when your own store setup is ready.
QUICK ANSWERS
A few things to know
Can I design my own layout?
Yes. Arrange Framer layers and Shopiframe components in your own product layout. Bind CMS content to the design and pass Product Data through any nested components that need it.