---
title: "Style Shopify Components in Framer, No Code | FrameStoreKit"
canonical_url: "https://framestorekit.com/features/design-control"
last_updated: "2026-10-21T15:06:29.335Z"
meta:
  description: "Shopify components for Framer with full design control: fonts, text styles, colors, spacing and every state as property controls. No code."
  "og:description": "Shopify components for Framer with full design control: fonts, text styles, colors, spacing and every state as property controls. No code."
  "og:title": "Style Shopify Components in Framer, No Code | FrameStoreKit"
---

FrameStoreKit home

# **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 free](https://framestorekit.com/signup) [Read the docs](https://framestorekit.com/docs)

**ShopifyProductCard**

**Title font**Heading / H3

**Button**#141A17

**Radius**12

**Hover border**#4DC67F

INCLUDED**4**components · Free - Product Card - Variant Selector - Product Gallery - Add To Cart ## 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****ShopifyProductCard****Title font**Heading / H3**Button**#141A17**Radius**12**Hover border**#4DC67F02 ### **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**SMLXL03 ### **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****Add To Cart · slot**Connected**Use slot****Yes****Button****Primary / Large****Label**Add to bag ## 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 ](https://framestorekit.com/components) - **Merino Crew****$94****Product Card****Free**ShopifyProductCardDisplays product media, title, price and an add-to-cart action. - SMLXL**Variant Selector****Free**ShopifyVariantSelectorSelects product options with swatches, pills or a dropdown. - **Product Gallery****Free**ShopifyProductGalleryDisplays a product image gallery with selectable thumbnails. - **Linen Overshirt**$68.00 Add to cart**Add To Cart****Free**ShopifyAddToCartAdds 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 ~~**](https://framestorekit.com/docs) 1. **1****Drag a component in**Open the plugin and drop any component on your page. 2. **2****Set fonts or text styles**Title, price, labels and buttons each take any font or a Framer text style. 3. **3****Set colors and spacing**Colors, radius, borders and padding are property controls. 4. **4****Style every state**Hover, selected, sold out and loading states are all editable. ### **Good to know****No CSS overrides**Everything is a property control, so designers never touch code.**Breakpoints work**Components size to your layout and Framer breakpoints like any other frame.**Updates won’t break styling**Component updates keep your settings, so live client sites stay as designed. ## Design control questions Still unsure? [**~~Email us~~**](https://framestorekit.com/contact) 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 sync**Products, variants, images and collections in Framer CMS. One click to refresh.](https://framestorekit.com/features/catalog-sync) [**Cart & checkout**Cart drawer, discount codes, Shopify checkout and Shop Pay.](https://framestorekit.com/features/cart-checkout) [**Upsells**All sales tools in one place, plus the rewards bar. Bundles coming soon.](https://framestorekit.com/features/upsells) ## **Say yes to the next Shopify project** Start free with 15 products. Upgrade when the client signs. [Start building free](https://framestorekit.com/signup)

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.