You must have your variants set up correctly in Shopify first to work your Framer project.

Setting up Variants in Shopify

In your Shopify product details, ensure your image order matches your variant order exactly, as well as connecting each one by clicking the box next to each variant and selecting the correct image.

Connect the data in Framer

1. Once your store is connected, open your project and go to your product CMS detail page.

2. Open the Frameship plugin, log in and navigate to the Components tab.

3. Drag in the ‘Variant Selector’ component.

4. Click on the component, on the right you will see the Properties panel. Navigate down to the component settings.

5. Connect ‘Shopify Data’, ‘Variant Image Mapping’ and ‘Variant Options’ variables to the matching field from the CMS.

Set the filter type to either ‘Contains’ (to pick a specific variant) or ‘Doesn’t Contain’ (to exclude a certain variant).

1. Type in the filter name exactly as it is in the CMS/Shopify.

2. Use the component settings to tweak the design, layout and look as you wish!

There you go! You have successfully set up your Shopify product variants in Framer with Frameship.