Shopify-integrated Framer Website with FramerCommerce
Turn any Framer site into a functioning Shopify store.
Intermediate
Please be aware that this is a third-party integration. To utilize these services, you may need a separate subscription obtained directly from the creators of the integration. Kindly remember, these integrations are not covered by Framer’s Terms of Service. Any required support will be provided by the integration creators.
Setting Up Shopify API Integration
To integrate Shopify into a Framer site, the first step involves setting up Shopify. This process requires utilizing the Shopify API. In the Shopify dashboard, you need to set up an app and obtain an access token. Keep this token and your Shopify domain handy, as you'll need them multiple times throughout the integration process.
Utilizing Magic Import for Product Data
If your store has a large inventory, manually adding products to Framer can be tedious. To simplify this, you can use a tool to export Shopify products into a CSV file, which can then be imported into Framer's CMS. The tool, available at framercommerce.com, requires your Shopify domain and storefront API access token to generate the CSV.
Creating a Shop CMS Collection in Framer
In Framer, create a new CMS collection for your store, naming it as you wish. Ensure the fields in your CMS collection match the necessary product details. Once set up, import your CSV file into this collection. The import process includes tags and product types, which can be customized or removed based on your needs.
Copying & Pasting Design Components
The next step is to add Shopify components to your Framer site. Start by copying the Shopify wrapper component from a base template, such as the Framer Commerce base template. This component, which you need to paste into your Framer site, contains fields for your Shopify domain and access token.
For navigation, you can either integrate Shopify components into your existing navigation or use the navigation component from the base template. This component includes a cart with a live counter and modal overlay for cart management.
Setting Up Product Displays
To display products, copy the product card (along with the CMS collection it's within) from the base file and paste it into your Framer site. You can configure this to display all products, featured products, or products filtered by collections. Adjust the layout and design to match your site's aesthetic.
Finalizing and Testing the Integration
After setting up all components and ensuring they are properly configured with your Shopify data, publish your site. Test the functionality, such as adding products to the cart and viewing the cart. Make any necessary adjustments to the styles and layouts to seamlessly integrate the Shopify store into your Framer site.
This integration allows you to leverage Framer's design capabilities with Shopify's robust e-commerce functionality, creating a seamless and efficient online shopping experience.
