What is ShopiFrame?

ShopiFrame is a powerful plugin that makes connecting Shopify with Framer smoother than ever. With its recent update, it now boasts over 10 native e-commerce components. Best of all? It operates on a lifetime access model [01:35] starting at $72, meaning you get everything without worrying about monthly subscriptions. You can even test the plugin for $0 before you purchase!

Step 1: Set Up Your Shopify Headless Storefront

Gone are the days of manual, complicated setups. Now, Shopify has streamlined the process:

1. Head to the Shopify App Store and install the Headless app [03:01].

2. Once installed, click Add Storefront and name it (e.g., your store's name).

3. Click Manage to access your Storefront API, and copy your Public Access Token [03:24].

4. Important: Make sure you go to your products in Shopify and ensure they are published to the specific headless sales channel you just created, otherwise they won't show up in your CMS [04:00]!

Step 2: Connect Framer to Shopify

Now, head over to your Framer project and fire up the ShopiFrame plugin [04:22].

1. Navigate to the Store Configuration section.

2. Enter your Shopify domain (found in your Shopify settings).

3. Paste the Public Access Token you copied earlier [04:41].

4. Hit Connect to Shopify. Boom! You’re connected.

Step 3: Sync Your Products to the Framer CMS

Let’s bring your live Shopify products right into Framer's CMS [05:28].

1. Open the Framer CMS and run the ShopiFrame plugin.

2. Create a new collection and name it "Products".

3. A configuration menu will appear. Here, you can customize how many product images you want to import, add custom fields, or bring in product metafields.

4. Click Sync Products. After a quick sync, all your products, images, titles, tags, and product types will instantly populate your Framer CMS [06:16].

Step 4: Customize Your Product Cards and Detail Pages

With your products now in Framer, it’s time to sync them to your design.

• Product Cards: Drag your synced CMS collection onto your canvas. Replace the template's generic content with your actual variables. Link the Title and Featured Image to your CMS data. To display dynamic prices, use the ShopiFrame Price component [08:28] and sync it to the Product Data variable.

• Detail Pages: Create a dynamic detail page in your CMS [10:20]. Open the ShopiFrame plugin and drag in essential components like the Custom Variant Selector (which allows users to pick size and color), Image Gallery, Quantity Selector, and the Add to Cart button [11:14]. Sync each component with the Product Data variable. You have full control over the styling, so you can adjust sizes, gaps, borders, and colors to match your brand!

Step 5: Set Up the Cart and Global Markets

The final piece of the puzzle is the checkout experience [14:40].

1. Open your Cart overlay and run the ShopiFrame plugin.

2. Drop in the Cart List component so users can see their items.

3. Add the Cart Subtotal and Checkout Button components to make the cart fully functional [15:18].

4. Selling Worldwide? ShopiFrame has you covered. Drop in the Active Market and Market Dropdown global components [16:26]. This allows your users to switch their region and seamlessly updates the currency and pricing directly in Framer.

Conclusion

And just like that, your Framer template is a fully functional e-commerce store backed by Shopify [16:59]. ShopiFrame handles all the complex logic, leaving you with complete creative freedom to design a beautiful storefront.

If you found this guide helpful, be sure to check out the full video on YouTube, and let us know what you're building with Framer and Shopify in the comments!