Heritage Carry On (Orange)
Color
Our classic aluminum carry-on luggage, ready for take off.
Notes
The variant display and functions don't work in the Framer canvas. When testing any custom components or data, please do it in your browser.
Make sure all your components are up-to-date in the Assets panel on the left.
1: CMS
This demo is set up as 3 separate products, not variants
On your CMS, group these items together using a namespace key from Shopify or a Framer-editable field, all referencing the same group name.
In this demo, I'm using a namespace key called "product_group" and the value for this product grouping is "Heritage"
Add an image or color field and populate for each item
2: on canvas
Insert a new CMS Collection of the same Collection
Set a visibility condition where it's only visible if the product_group field in the referenced collection = the product_group field on the CMS page
Create a new component that has an Active and Inactive state, with a color or image variable and make the connection to respective field in the CMS
For the "Variant" variable on this component, add a transform to check if the slug in the referenced collection = the Slug on the page. When yes, use the Active variant. When no, use the Inactive variant.
Built by Framer Commerce. © Copyright Buttery Supply Inc. 2025