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 your custom product pages.

Follow these steps after you have connected your store and synced your products into Framer.

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

     To do this, click the ‘+’ next to Pages > New CMS page > (Your CMS name) > CMS detail page.

2. Clean the Canvas:

   • Remove any default elements on the page to start with a clean canvas.

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

3. Add a Product Page Component:

   • Open the Frameship Plugin.

   • In the Components tab, 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 price, inputs, the add-to-cart button and the buy now button.

     To set up variants, follow this tutorial here

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

   • If it looks incorrect, double check any changes you have made to the Shopify side have been synced in the CMS.

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.