Framer Commerce

Demo A

Demo B

Demo C

Demo D

Demo E

0

FC

A

B

C

D

E

0

Heritage Carry On

Our classic aluminum carry-on luggage, ready for take off.

1

1

1

Max: | Current: 0 | At Max: No
Max: | Current: 0 | At Max: No
Max: | Current: 0 | At Max: No

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.

Instructions

1: CMS

  • In your Framer Commerce CMS collection, enable the "Image Variant IDs" field from Shopify.

2: Variant Selector Component

  • Connect the "Image IDs" variable to the "Image Variant IDs" CMS field.

  • Under the "Images" group, for "Type", select "Gallery".

  • Under the "Images" group, for "Two-Way", toggle on or off to allow clicking on the image to change the selected variant.

3: Gallery component

  • You can copy and paste the Gallery component from this file or insert from the plug in and connect the Image variables to your CMS.

  • You can detach the instance and customize as you please. Note that as you detach instances, you may need to re-establish variant states or variable connections.

  • The FC_ProductImageVariantThumbnail component is where the connection is happening, connecting the tap event to the native carousel tap transitions between states. Make sure the image variable and image number are always accurate on this component within the context of the gallery variant states.

Built by Framer Commerce. © Copyright Buttery Supply Inc. 2025