Prerequisites

A connected store or Demo Store, a synced Shopiframe Products CMS, and a product CMS detail page in Framer.

1. Prepare product content

In Products Configuration, enable the fields the page needs. Use Title for the heading, Content for a rich description, and Featured Image for a static lead image. Keep Product Data: product-aware components require the serialized payload.

2. Design the CMS detail layout

Build the layout on the product collection’s detail page so each product uses the same structure. Bind the heading and description with standard Framer CMS bindings. Start with a readable single-column layout before adding desktop columns.

3. Insert product components

Open Shopiframe → Components and insert Price, Image Gallery, Variant Selector, Quantity Selector, and Add to Cart as needed. Bind Product Data on every product component to the current product’s CMS field.

4. Pass data through nested designs

If a component is nested inside your own Framer component, expose Product Data and pass it through each layer. A visual product title alone does not connect the commerce controls to that product.

5. Style and preview the purchase flow

Customize the available typography, colors, borders, radii, spacing, and states. Preview different CMS products. Select a variant and confirm the price updates before checking Add to Cart with the chosen quantity.

Check your work

Use at least two products, including one with variants. Confirm the H1, description, images, price, and cart line all refer to the same product. Review the phone layout and long product titles.

Troubleshooting

A built-in sample on the canvas can mean Product Data is missing. Check every product component individually. For absent inventory data, review the documented inventory permission. Re-sync products after changing field configuration.

Resources

Product Components Reference