Product Variants in Frameship

This guide will walk you through displaying product variants from your Shopify store within Framer using the Frameship plugin. By following these steps, you'll learn how to set up variant selection buttons and connect them to your Shopify data.

Step 1: Add Variant Buttons

1. Open the Frameship Plugin:

   • Go to Plugins in Framer and open the Frameship plugin.

2. Select and Place Variant Buttons:

   • In the Frameship plugin, go to the Build section.

   • Select Variant Buttons from the available components.

   • Drag and drop the Variant Buttons component to the desired position on your canvas (e.g., below the product price).

Step 2: Connect Variant Buttons to Shopify Data

1. Link to CMS Data:

   • Click the Variant Buttons component to open its settings.

   • Use the plus icon next to each field to set up data connections.

   • For the first field, select Shopify Data.

   • For the second field, choose Variant Options.

     

   
   

2. Verify Data Sync:

   • Once connected, you should see your variant options populate automatically from your Shopify store.

Step 3: Preview and Test

1. Preview the Variant Selection:

   • Use the preview mode in Framer to test the variant selection functionality.

   • Ensure that each variant option displays accurately and that users can select their desired product variant.

This setup allows customers to easily choose between product options, such as sizes, colors, or styles, directly on your Framer site.