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

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

1. Add a Product Page Component:

Open the Frameship Plugin.

In the Components tab, select the Product Page Component and drag it onto your canvas.

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.

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.

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

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.

Complete checkout & add to cart functionality is only available with a paid license.

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.