How to Connect Shopify with Framer

What is FramerCommerce?

FramerCommerce is a seamless integration tool created by by Matt Jumper that allows you to turn any Framer site into a Shopify store with native customization and zero code management.

FramerCommerce leverages the Shopify API to sync product data such as images, prices, variants, and availability with your Framer site. Use Shopify to manage core product data, which can be imported into Framer CMS for design and content customization. Components can be copied and pasted into any new or existing Framer project and are highly customizable, allowing for design and personalization within Framer while managing product data in Shopify.

DISCLAIMER - FramerCommerce is not associated with SegmentUI. The contents from this post are from their own website and video tutorials.

Step 1: Set Up Shopify

1. Get Shopify API Credentials:

   • Set up the Shopify app as per the documentation on Framer's site.

   • Obtain the access token from Shopify’s dashboard.

   • Copy the Shopify subdomain (e.g., your-store.myshopify.com).

1. MagicImport Tool (optional):

   • If you have many products, use the MagicImport tool to export Shopify products into a CSV file.

   • This tool can be found at framercommerce.com/magicimport.

   • Input your Shopify domain and API access token, then download the CSV file.

Step 2: Configure Framer CMS

1. Create a New Collection in Framer CMS:

   • Name the collection (e.g., Shop).

   • Edit fields to match the product data structure. Ensure all necessary fields (e.g., product name, price, image, variants) exist.

1. Import CSV Data:

   • Use the import button to upload the CSV file into the Framer CMS.

   • The fields should be automatically populated.

Step 3: Add Global Components

1. Shopify Wrapper Component:

   • Copy the Shopify wrapper component from the Framer Commerce base template.

   • Paste it into your site and replace the placeholder text with your Shopify domain and access token.

1. Navigation Component:

   • Copy the navigation component that includes the cart and live cart counter from the base template.

   • Paste it into your site’s navigation area. This component includes the cart trigger, live cart counter, and checkout button.

Step 4: Create Product Cards and Pages

1. Product Card Component:

   • Copy the product card component along with its CMS collection from the Framer Commerce base template.

   • Paste it into your shop collection page in Framer.

   • Configure the CMS collection to display products dynamically.

1. Configure Related Products (Optional):

   • Add a filter to the related products section to exclude the current product.

   • Configure the related products section to display relevant items.

2. Setup Shop Page (Optional):

   • Create a main shop page and add the product collection without filters.

   • Customize the layout (e.g., grid layout) to fit your design preferences.

Step 5: Style, Test and Publish

1. Style Components
   Customize the product cards, navigation, and other components to match your site’s aesthetic.

2. Test
   Ensure the add-to-cart button triggers the modal with cart details. Verify that the cart counter updates correctly and checkout works smoothly

3. Publish the Site
   Once all components are in place and styled, publish your Framer site and test the live site to ensure all elements are functioning correctly.

Conclusion

By following these steps, you can successfully integrate Shopify into your Framer site, creating a powerful and visually appealing e-commerce platform. Enjoy the design flexibility of Framer while leveraging the robust e-commerce capabilities of Shopify.

Additional Resources

• Support Document

• Pre-built templates