How to Connect Framer and Shopify
Connecting Framer and Shopify gives you the best of both platforms: Framer’s pixel-perfect design flexibility for your marketing pages and Shopify’s robust commerce engine for transactions. The integration works through Shopify’s Buy Button channel, custom API connections, or Shopify’s Storefront API. The most common approach — embedding Shopify Buy Buttons into Framer pages — takes about 30 minutes to set up and requires no coding knowledge.
Why Combine Framer and Shopify
Design Freedom Meets Commerce Power
Shopify themes restrict your design to predefined layouts. Even with Shopify’s theme editor, you’re constrained by section types, block limits, and template structures. Framer removes these constraints entirely. Every pixel is yours to control. Typography, spacing, layout, animation — the design canvas is unlimited.
Meanwhile, Shopify handles everything commerce: inventory management, payment processing, shipping calculations, tax compliance, abandoned cart recovery, multi-currency support, and thousands of app integrations. Trying to replicate this functionality through Framer alone would require cobbling together dozens of third-party services.
Speed Advantage
Shopify stores load an average of 3.7 seconds, according to performance benchmarks from web speed testing tools. Shopify themes pull in dozens of JavaScript files for cart functionality, product recommendations, and app scripts. Framer sites, by contrast, consistently score 90+ on Google PageSpeed because they generate static HTML served from edge CDNs.
The hybrid approach puts fast Framer pages in front of customers during browsing and only loads Shopify’s heavier commerce scripts at checkout. This means better Core Web Vitals, higher SEO rankings, and lower bounce rates on your marketing and product showcase pages.
Three Ways to Integrate Framer and Shopify
Method 1: Shopify Buy Button (Easiest)
The Buy Button is Shopify’s official embed solution. It generates a lightweight JavaScript snippet that renders product cards, cart drawers, and checkout flows on any external website — including Framer.
Setup steps:
- In your Shopify admin, go to Sales Channels and add the “Buy Button” channel
- Select the product or collection you want to embed
- Customize the button style, colors, and layout to match your Framer site design
- Copy the generated embed code
- In Framer, add an HTML Embed component to your page
- Paste the Shopify Buy Button code into the embed component
- Publish your Framer site
The Buy Button adds a cart icon to the page. Customers can add products, adjust quantities, and complete checkout — all within a slide-out cart drawer. The checkout itself happens on Shopify’s secure checkout domain.
Method 2: Shopify Storefront API (Most Flexible)
For developers who want full control, Shopify’s Storefront API provides access to products, collections, cart management, and checkout creation. You can build a completely custom shopping experience inside Framer using code overrides and API calls.
This method requires JavaScript knowledge and familiarity with GraphQL queries. The typical implementation involves fetching product data from the Storefront API, rendering it in Framer components, and creating checkout sessions programmatically when customers are ready to buy.
The advantage is total design control. The Buy Button imposes its own styling (which you can customize but not fully override). The Storefront API lets you build everything from scratch — product grids, variant selectors, cart drawers, and pricing displays — all styled natively in Framer.
Method 3: Subdomain Split (Simplest Architecture)
The most straightforward approach uses two separate domains: your Framer site lives on the main domain (yoursite.com) while Shopify runs on a subdomain (shop.yoursite.com). No technical integration needed — just link from your Framer product pages to the corresponding Shopify product pages.
This approach works well when your Framer site serves primarily as a marketing and brand experience, with the actual store being a distinct destination. Many fashion, beauty, and lifestyle brands use this architecture because it keeps both platforms independent and easy to maintain.
Designing Product Pages in Framer for Shopify
Product Showcase Layout
Your Framer product pages should do the heavy lifting on design and storytelling while the Shopify Buy Button handles the transaction. A high-converting product page in Framer typically includes:
- Full-bleed hero image or video of the product in context
- Product title and price displayed prominently
- A concise product description focusing on benefits, not features
- The Shopify Buy Button embedded below the description
- Additional product images in a scroll-triggered gallery
- Social proof section with customer reviews (pulled from Shopify via API or displayed as Framer components)
- Related products section linking to other product pages
Use Framer’s animation capabilities to create engaging product reveals. A subtle parallax effect on hero images, scroll-triggered feature highlights, and hover states on product cards all contribute to a premium shopping experience that standard Shopify themes cannot replicate. For animation techniques, see the Framer animations complete guide.
Collection Pages
For collection pages, use Framer’s CMS to create a product database. Each CMS entry contains the product image, name, price, description, and Shopify product ID. Framer’s CMS pages then dynamically generate collection grids that link to individual product pages. This gives you a fully designed, fast-loading catalog while keeping Shopify as the commerce backend.
Common Challenges and Solutions
Cart Persistence Across Pages
The Shopify Buy Button maintains cart state using browser localStorage. When a customer adds a product on one page and navigates to another, the cart contents persist. However, each page reload re-initializes the Buy Button script, which can cause a brief flash of an empty cart before the stored cart loads.
Fix this by adding a loading state to the cart icon that shows the item count from localStorage immediately, before the Buy Button script fully initializes. A small code override in Framer handles this smoothly.
Styling Consistency
The Buy Button generates its own DOM elements with Shopify-branded styles. Override these with CSS in a Framer code override to match your site’s typography, colors, and button styles. Common overrides include font-family, button border-radius, and color variables.
SEO for Product Pages
When Framer hosts your product pages, you manage SEO through Framer’s built-in meta tag fields. Set unique title tags, meta descriptions, and Open Graph images for each product page. Add product schema (JSON-LD) via a code embed to help search engines understand your product data — name, price, availability, and review ratings.
For a comprehensive look at Framer’s SEO capabilities, the Framer SEO guide covers everything from meta tags to sitemap configuration.
Checkout Domain Trust
When customers click “Checkout,” they leave your Framer domain and land on Shopify’s checkout (yourstore.myshopify.com or a custom domain). This domain transition can reduce trust if customers notice the URL change. Mitigate this by using a custom checkout domain in Shopify (available on Shopify Plus) or by prominently displaying trust badges and SSL indicators on your Framer product pages.
Performance Optimization
The Shopify Buy Button script adds approximately 80-120 KB to your page weight. To minimize the impact on Framer’s fast load times:
- Load the Buy Button script only on product pages, not site-wide
- Use the
asyncattribute on the script tag to prevent render blocking - Defer non-essential Shopify analytics scripts
- Compress product images to WebP format before uploading to Shopify
With these optimizations, your Framer product pages should maintain PageSpeed scores of 85+ even with the Shopify integration. To understand how Framer’s performance compares to other platforms, read the Framer vs. Webflow comparison which includes detailed speed benchmarks.
Frequently Asked Questions
Can I use Framer as a Shopify storefront?
Yes, Framer can serve as the visual storefront for a Shopify store. Use the Shopify Buy Button to embed product cards and checkout on Framer pages, or use the Storefront API for a fully custom integration. Framer handles the design layer while Shopify manages all commerce operations.
Do I need a full Shopify plan for the Buy Button?
You need at least a Shopify Starter plan ($5/month) to access the Buy Button sales channel. This plan does not include a standalone Shopify store — it provides the Buy Button, Shopify admin for product management, and Shopify’s checkout. For most Framer integrations, the Starter plan is sufficient.
Will a Framer-Shopify integration hurt my SEO?
The integration should improve your SEO compared to a standalone Shopify store. Framer pages load faster, score higher on Core Web Vitals, and give you complete control over meta tags and structured data. The main risk is duplicate content if you run both a Shopify store and Framer product pages for the same products. Avoid this by using Framer as the primary storefront and disabling Shopify’s public-facing store. Need help setting up a Framer Shopify integration? Framer Websites builds custom ecommerce experiences that combine both platforms seamlessly.