Learn how to display and sync Shopify product variants inside Framer using the Frameship plugin, including colors, sizes, dynamic images, and real-time stock updates pulled directly from Shopify.
Perfect for designers, developers, and founders building fully custom Shopify-powered product pages in Framer — with zero code.
⏱️ Timestamps:
0:00 Introduction
0:07 Understanding variant/media ordering in Shopify
0:44 Opening Frameship in Framer
0:52 Adding Variant Selector
1:04 Connecting Shopify Data, Variant Options & Variant Image Mapping
1:31 Filtering variants (size, color, etc.)
1:49 Adding Variant Info Label
2:04 Displaying selected variants dynamically
2:13 Adding Variant Image Switch
2:28 Connecting variant fields
2:36 Filtering variant types
2:44 Color variant switching
2:50 Combining color + size selectors
3:02 Dynamic stock & label updates
3:06 Using the Frameship Gallery for variant images
3:16 Real-time updates on the published site
3:23 Adding variants to cart
3:32 How the data flows to Shopify
đź”— Important Links: