Heritage Carry On (Green)
Color
Our classic aluminum carry-on luggage, ready for take off.
Notes
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