Introduction
In this tutorial, we'll walk you through integrating a Shopify store into a Framer site.
This a blog format of a YouTube video by Fluxacdemy
Checkout the video version here: Watch Video on Youtube
This integration can transform any Framer site into a fully functioning Shopify store. While this walkthrough may seem complex, it's a valuable addition for those looking to bring e-commerce functionality to their Framer projects. Please note that this integration involves some costs. Use the code "Flux" at checkout for a discount.
Step 1: Setting Up Shopify
To integrate Shopify with your Framer site, you'll first need to set up your Shopify store. This entire integration relies on the Shopify API, so there are a few preliminary steps to complete before diving into Framer. Setting up Shopify involves tasks such as creating an app, obtaining an access token, and copying your Shopify domain (subdomain). We won't cover these details in this blog, but you can find detailed documentation on how to set up your app on Shopify here https://shopify.dev/docs/. Once you have your access token and Shopify domain, make sure to save these credentials, as you'll need them later.
Step 2: Export Shopify Products (Optional)
If your Shopify store has many products, you can streamline the integration by exporting your products into a CSV file. Framer Commerce offers a tool called "magic import" for this purpose. By using this tool, you can export your Shopify products into a CSV and then upload it to the Framer CMS. This step is optional, but it significantly simplifies the process, especially if you have a large number of products. You can access the tool at framercommerce.com/magic-import and provide your Shopify domain and Storefront API access token obtained in Step 1.
Step 3: Creating a Shop Collection in Framer CMS In Framer
Create a new collection in the CMS for your store. You can name it "Shop" or something that suits your project. Make sure that all the fields you see on your screen exist in your Framer site. If you're retrofitting an existing site, you'll need to create these fields. If you're using a base file or template like Clara, these fields should be pre-populated. Ensure that the fields match one-to-one. Then, click on the import button, upload your CSV, and the data will be automatically populated.
Step 4: Setting Up Global Components
To establish a connection between Framer and Shopify, add some global components. Start with the Shopify wrapper. This component holds your Storefront domain and access token. Replace the placeholder credentials with your actual domain and access token. Paste this component onto every page of your site. You can also copy the navigation component, which includes features like the cart, live cart counter, and modal overlay. You can integrate this component with your existing navigation or create a new one.
Step 5: Adding Product Cards Next
Add product cards to your pages. You can choose to connect them to your CMS collection or design them separately. Ensure that the product cards are configured to display products from your "Shop" collection.
Step 6: Styling and Customization
At this point, your Shopify store is functioning within Framer. You can further customize the styles to match your project's aesthetics.
Conclusion
Congratulations! You've successfully integrated a Shopify store into your Framer site. This powerful combination opens up endless possibilities for e-commerce experiences.
Use the promo code "Flux" for a discount, and feel free to ask any questions or request more tutorials in the comments. We can't wait to see what you create with this integration. Happy designing.
Credits:
Video tutorial by:https://twitter.com/mattjumper
Youtube Link: https://www.youtube.com/watch?v=IQCUEfhYiVo
Channel Link: https://www.youtube.com/@FluxAcademy
