Square Catalog Sync is a Framer plugin that bridges Square's commerce platform with Framer's managed collections. It enables seamless import of your real Square catalog (products, variations, prices, images) into Framer designs and ships drop-in cart and checkout components so you can accept payments directly from any Framer page using secure OAuth.
This is an independent, unofficial integration. It is not made by, endorsed by, or affiliated with Block, Inc. or Square, Inc.
Transform your Framer workflow with the power of Square. The Square Catalog Sync plugin seamlessly connects your Square catalog to Framer's managed collections and gives you a complete embedded checkout, so you can design with real products, real prices, and accept real payments — all without leaving Framer.
Connect your Square account with one-click OAuth (or paste an access token if you prefer) and instantly browse every category in your catalog. Select any combination of categories — your entire shop or a featured subset — and watch as products flow directly into Framer CMS with intelligent field mapping.
Switch between Square sandbox and production environments to test before going live, and resync as your catalog evolves.
Square Catalog Sync handles every facet of your catalog: product names, rich descriptions, multi-variation pricing in any currency, full image sets from Square's CDN, SKUs, and category links.
Multi-variant items arrive as structured data so you can build size or color pickers in Framer using the variations array. Prices are pre-converted from cents to your storefront currency so number fields render correctly on the canvas without any extra logic.
Beyond sync, the plugin ships a complete commerce UI: Add-to-Cart buttons, a cart drawer, and a checkout form — all configurable from Framer's property panel. Customize every detail (fonts, colors, padding, border radius, animation presets, button text) without writing code, then accept Square's full payment surface: cards, Apple Pay, Google Pay. Your storefront looks like the rest of your Framer site, not a bolted-on third-party widget.
Take control of how Square data lands in your collection. Choose any field as your URL slug for SEO-friendly product paths, and watch as the plugin intelligently converts Square types to their Framer equivalents — image IDs to images, money objects to numbers, timestamps to dates, variations to structured data. Map only the fields you need and ignore the rest.
Real-Time Sync Progress
Stay informed with transparent progress tracking during catalog imports. Watch as each item is processed and synced, with clear feedback on successful imports and helpful error messages if issues arise. After initial setup, keep your designs current with one-click incremental syncing that uses Square's per-item update timestamps to push only new and modified products — entire catalogs of hundreds of items can resync in seconds because anything unchanged is left alone. Deleted items are automatically removed from your Framer collection, and any failed items can be exported as a TSV for offline triage.
Free — Try the plugin on a real Square account at no cost. Includes up to 10 catalog items per sync and full access to the embedded checkout components. Manual sync from the plugin window.
Pro — $49.99 lifetime, one-time payment.
Unlocks unlimited catalog items per sync with the same one-click incremental updates. No subscription, no recurring fees — pay once, use forever, including all future updates. License keys are issued through Polar.sh and bind to your Square merchant account on activation.
Build real storefronts, not just prototypes. Square OAuth tokens are encrypted at rest with AES-256-GCM, the free-tier limit is enforced server-side (no client-side bypass), and the cart and checkout components ship the same battle-tested logic in dev sandbox and live production. Whether you're shipping a one-product landing page or a full multi-category shop, your Framer designs render with the same data — and accept payments through the same flow — that your customers will see at checkout.
Connect your Square store to Framer's design canvas and ship commerce-ready websites without ever leaving the editor.
No more Merchant ID, Location ID, Application ID, or Backend URL fields. The merchant ID is baked into the generated code as the prop's default value at generateCheckoutCode time, so it Just Works™ — drop the component on the canvas, set styling, ship.