How can we help?

Note: This is only applicable to Frameship 2.0 and its associated components. To find out how to start a new store with Frameship, click here. To migrate from 1.0 → 2.0, click here.

1. To connect product variants in Framer, you must first make sure you have a Shopify store connected. To find out how to do this, click here.

You must have your variants set up correctly in Shopify to work in Frameship. 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.

1. Once your store is set up, 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. You can either drag in the ‘Product Page’ component to create from scratch, or use ‘Variant Selector’.

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).

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

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

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

Note: If you have multiple variant types (e.g. size and colour), you need two copies of this component.