Full design control over every Shopify component

Fonts, colors, borders, spacing, radius, shadows and hover states are property controls in Framer’s right panel. Use your text styles or any font. No widget to restyle, no CSS overrides.

Start building freeRead the docs

What you can build with design control

Fonts, colors, spacing and states on every component.

01

Fonts and text styles on every text

Title, price, labels and buttons each take any font or one of your Framer text styles, so the store follows the design file.

  • Any font in the project
  • Your Framer text styles
  • Per-text control
02

Every state on the canvas

Hover, selected, sold out and loading states are property controls. Style them in Framer instead of waiting to see them live.

  • Hover and selected
  • Sold out and loading
  • Colors, borders, radius
03

Bring your own buttons

Components with a button slot take a button you designed in Framer. The component handles the click; your design handles the look.

  • Button slots
  • Your hover states
  • No overrides

The 4 components

Open the FrameStoreKit plugin, drag one onto the canvas and style it in the right panel. Shopify data flows in.

All components
  • Product CardFreeShopifyProductCardDisplays product media, title, price and an add-to-cart action.
  • Variant SelectorFreeShopifyVariantSelectorSelects product options with swatches, pills or a dropdown.
  • Product GalleryFreeShopifyProductGalleryDisplays a product image gallery with selectable thumbnails.
  • Add To CartFreeShopifyAddToCartAdds the selected variant to the Shopify Storefront cart.

Set up in 4 steps

The onboarding wizard walks you through it. The docs cover every Shopify setting with screenshots.

Design control guide
  1. 1Drag a component inOpen the plugin and drop any component on your page.
  2. 2Set fonts or text stylesTitle, price, labels and buttons each take any font or a Framer text style.
  3. 3Set colors and spacingColors, radius, borders and padding are property controls.
  4. 4Style every stateHover, selected, sold out and loading states are all editable.

Good to know

No CSS overridesEverything is a property control, so designers never touch code.
Breakpoints workComponents size to your layout and Framer breakpoints like any other frame.
Updates won’t break stylingComponent updates keep your settings, so live client sites stay as designed.

Design control questions

Still unsure? Email us and a Framer + Shopify person will reply, usually the same day.

Yes. Pick any font in your Framer project, or one of your text styles, on each text in a component.

Related features

Catalog syncProducts, variants, images and collections in Framer CMS. One click to refresh.Cart & checkoutCart drawer, discount codes, Shopify checkout and Shop Pay.UpsellsAll sales tools in one place, plus the rewards bar. Bundles coming soon.

Say yes to the next Shopify project

Start free with 15 products. Upgrade when the client signs.

Start building free