Framer + Shopify Integration Guide

Framer + Shopify Integration Guide

Framer and Shopify are a strong combination. Framer handles storytelling, design and the speed of change. Shopify handles products, carts, payments and orders. Together, they let you avoid the "template store" look without building your own commerce backend.

But "connect Framer to Shopify" can mean very different things, from a single buy button to a fully synced catalog. This guide walks through the integration options, the decisions you need to make before you build, and a practical build plan. If you're still deciding whether Framer is right for selling at all, start with our overview of ecommerce in Framer.

Why combine Framer and Shopify?

• Framer's speed and design flexibility for brand pages, product stories, campaigns and landing pages.

• Shopify's proven checkout, inventory and payments, including local payment methods and international selling through Shopify's own features.

• A hybrid stack that can evolve as you scale. Start with a buy button, move to a synced catalog later, without rebuilding the brand site.

The 4 integration patterns

1. Link out. Framer pages tell the story, and "Buy" buttons link to product pages on your Shopify store. This is the fastest setup and the least integrated. It's fine for a launch, but the jump between 2 different-looking sites can cost trust.

2. Shopify Buy Button. Shopify's Buy Button channel generates embed code for a product or collection, with a cart, that you place in a Framer embed. Checkout happens on Shopify. Good for a handful of products, with limited design control.

3. Catalog sync via plugin. Plugins such as Framer Commerce and Sync Shopify connect to your store (Sync Shopify, for example, uses a Storefront API access token), sync products into the Framer CMS and provide add-to-cart and cart components. You design product and collection pages as CMS templates. Checkout stays on Shopify. This is the pattern we'd consider for most design-led stores with a real catalog.

4. Custom build on the Storefront API. Your developers write Framer code components that call Shopify's Storefront API directly for things a plugin doesn't cover: custom bundles, configurators, B2B logic. Most control, most maintenance.

Key decisions before you build

Where does product data live? Shopify should be the source of truth for prices, variants and stock. Framer's CMS can hold a synced copy plus the storytelling content Shopify doesn't have: long-form copy, custom imagery, comparison data. Decide which fields come from Shopify and which are edited in Framer, and make sure nobody edits a synced field by hand.

Which routes belong to Framer and which to Shopify? A common split: the homepage, product pages, collections, campaigns and content on Framer; cart, checkout, customer accounts and order status on Shopify. Write the full list of URLs and assign each one before design starts.

How closely should the 2 systems match? Checkout is styled within Shopify's options. Decide how much effort goes into matching logos, colors and fonts, and design the handover moment so it feels deliberate.

Who owns the plugin? In patterns 3 and 4, a third-party plugin or custom code sits in your checkout path. Know who maintains it, what it costs (check current pricing) and what happens if it breaks.

A practical build plan

1. Audit the catalog. Count products, variants, options and collections. Note anything unusual: subscriptions, bundles, pre-orders, B2B pricing.

2. Map the data. List every Shopify field you need on the site and the Framer CMS field it maps to. Add Framer-only fields for storytelling content.

3. Set up access. Create the API access the plugin requires in Shopify, with only the permissions it needs.

4. Run a test sync. Sync a few products into Framer and check images, variants, prices and special characters before designing the templates.

5. Design templates with real data. Build product and collection pages against the synced content, including long names, missing images and sold-out states.

6. Build the cart experience. Place add-to-cart and cart components, then test every variant combination on mobile.

7. Test checkout end to end. Place test orders across currencies, shipping zones and discount codes.

8. Connect analytics. Make sure you can follow a visitor from a Framer page into Shopify checkout and attribute the order.

9. Plan SEO. Decide which domain serves product pages so you don't publish duplicate pages on both systems. Set canonicals and redirects accordingly.

10. Document the workflow. Write down who adds products, how often sync runs and who checks that the site matches Shopify.

What takes the most time

The integration itself is rarely the long part of the project. Time usually goes into 3 things:

• Cleaning the catalog. Inconsistent product names, missing images and messy variants show up the moment you design real templates. Fix them in Shopify before you sync.

• Edge cases in the cart. Sold-out variants, quantity limits, discount codes and different currencies each need a designed state and a test.

• Content that Shopify doesn't hold. Product stories, comparison tables and lifestyle imagery need to be written and produced. Budget for it like any other content work.

Plan the timeline around these, not around connecting the plugin.

Common pitfalls

• Duplicate product pages. If both Shopify's online store and Framer publish the same product pages, search engines see 2 versions. Pick one.

• Stale data. Prices or stock that lag behind Shopify erode trust. Know how and when your sync runs.

• Heavy pages. Large product images and several embeds can slow the site. Optimize images and keep scripts to a minimum.

• Tracking gaps. Without cross-domain tracking, you'll see visits on Framer and orders in Shopify, with nothing connecting them.

• Over-customization. Building custom code for something a maintained plugin already does adds risk for little gain.

Our point of view

Framer and Shopify together help you avoid the template-store look while relying on a proven commerce backend. The integration itself is rarely the hard part. The decisions are: where data lives, which system owns which page and who maintains the connection. Make those early, and customers never notice the split. They just experience a fast, well-designed journey from discovery to purchase.

Allsite builds brands and Framer websites for venture-backed tech companies — designed to perform, and built for the teams that have to run them.