Framer Commerce

Item: Framer Commerce
Rating: 7.4

Framer plugin for building headless Shopify storefronts visually.

framercommerce.com Save page

7.4/10MABTU rating

DESKTOP · 1440 × 12,394/ ↗

MOBILE · 390

Section outline · Home

01heroSmall headline left, demo store photo with serif marquee
02featureEditor screenshot and four benefit icons
03pricingThree stack rows with prices and links
04featuresCarousel of pastel market cards
05featuresFour maroon UI tiles
06featuresPhoto UI cards and small feature grid
07featuresThree maroon cart UI cards
08featureCyclist photo and integrations list
09showcaseGrid of real store screenshots
10templatesThree template cards
11featureColourful expert portfolio collage
12testimonialsGrey panel with three quote cards
13faqAccordion list
14ctaLilac frame, dark card with portrait

Rating · Home

Visual design7.8

UX & clarity7.2

Originality7.4

Craft & consistency7.6

Motion6.0

Performance & a11y7.7

This page scores 7.4; the site score weights the home page double.

Main colours

Light·off white background·vivid

Typography

Sita Sansheading · sans · google GT Alpinabody · serif · self-hosted

Stack & style

Framer React Google Fonts

Minimal Editorial Corporate / clean Bento Monochrome Photography-led Product-UI-led Bento grid FAQ accordion Live chat Logo cloud

Also: Intercom, Hotjar, Meta Pixel, Cloudflare, Google Analytics

Design DNA

Warm off-white page with a heavy tight grotesk for headlines and a book serif for body, mono uppercase for tiny labels. The hero is a live demo storefront crop: a man in mirrored sport sunglasses under a giant outlined serif 'Peak Optics' marquee, with colour swatches. Below, a Framer editor screenshot, a comparison of Shopify, Framer and Framer Commerce plan rows, market cards, maroon filter UI tiles, product control cards, cart upsell cards, an analytics split with a cyclist photo, a showcase of real stores, template cards, an expert collage on coral and blue, testimonial quote cards, an FAQ and a lilac CTA.

Worth borrowing

Make the hero a live demo store crop so the product is shown rather than described.
Present a plugin's features as a grid of dark maroon real-component screenshots.
Explain your stack cost with a three-row Shopify / Framer / plugin price list.