How can we help?

By following these steps, you’ll connect your Framer CMS with Shopify data to display product details, images, prices, and more on custom product pages.

Step 1: Set Up a New Product Page

1. Create a New Page in Framer:

   • Start by creating a new page in Framer.

   • Set this page as a CMS page linked to the Shopify-connected CMS collection you have set up in Framer (e.g., “My Store”).

     

   
   

2. Clean the Canvas:

   • To start with a clear layout, remove any default elements on the page.

   • Add a header or other design elements you may want on all product pages.

3. Add a Product Page Component:

   • Open the Frameship Plugin.

   • In the Build section, select the Product Page Component and drag it onto your canvas.

Step 2: Link Product Content to Shopify Data

1. Connect Each Field to Shopify:

   • Select each component on the product page (e.g., title, category, image, price).

   • Use the Content settings to link each field to the appropriate Shopify data:

     • For the product title, connect to the Title field.

     • For the product category, set it to Product Type.

     • Repeat this for each field on the page, including variants, inputs, images, and the add-to-cart button.

1. Ensure All Components Are Synced:

   • Each section should pull data directly from Shopify. This step is manual, so check each element individually to ensure it syncs correctly with Shopify data.

Step 3: Preview and Test

1. Publish the Page:

   • Publish your Framer project to preview how the product page will appear live.

   • Review that each product detail (title, price, image) displays correctly.

2. Test Buy Now Functionality:

   • Although the add-to-cart button won’t function until the cart component is set up, the Buy Now button should direct you to checkout on Shopify for a quick purchase.

By following these steps, you’ll have dynamic, Shopify-integrated product pages on your Framer site. Once configured, these pages will automatically display the latest product information from your Shopify store.