The component is split into two parts

1. Products

2. Customization

Both parts are key to understand — if you want to sell in Framer, you’ll need to know how to set this up step by step.

1. Products

The component manages your products so you don’t have to duplicate any product entries due to different color, size, or extra options. You can edit, change, or remove any attribute without duplicating the entry.

Depending on the plan you choose, you’ll have more or less control (and features). Basic or Pro. Let’s break it down:

Add Products

To add your products and their sizes and/or colors, follow these steps:

When adding the colors of our product, we must also indicate the sizes in which each color is available. The sizes must be written exactly the same. If I add an 'XL' size to the sizes panel, I should also type 'XL' in the available panel.

Note: If you do not want the edges of your product image to be visible, you must upload an image with the same background color as your card or without a background.

Add Extras

If you want to add an extra (Pro version only), follow these steps:

Note: ''extra'' means the quantity above the base price that we will charge to the customers who choose this option

Cart Pop-up

The cart popup will allow our users to preview what they’ve added to their cart, with the option to proceed to the checkout page.

You can edit this pop-up (Pro only) by following these steps:

Currency

With Framer Configurator you can sell globally, in any currency and country.

To display prices in your preferred currency, follow:

Taxes

Don’t worry about tax compliance — Framer Configurator helps you set this up. You’ll be able to choose the percentage (%) of the total price that should be taxed.

Shipping

Pro users can offer different shipping types, with any prices they want.

To set this up:

Once that’s ready, your component will be configured — now you just need to customize it to match your store.

2. Customization

Plug the component into your store like it’s always been there. In this section we’ll cover:

1. Intro to customization

2. Customizable elements

Intro to Customization

Our component is built to be as customizable as possible.

Keep in mind:

1. The component might not always render or work properly inside the Framer canvas or preview. Test everything in a real browser.

2. Keep your components up to date. Go to the Assets panel, click the purple “Update” link next to the component — done.

Customization

Customization is 100% native. It works exactly like editing any other Framer element — no new systems to learn.

Customizable Elements

Explore the component and see which elements you can customize.

Elements:

1. Main card

2. Cart

3. Buttons

4. Fonts & sizes

5. Label

6. Color icon

7. Cart Overlay

Depending on whether you have the Basic or Pro version, you’ll have more or fewer options:

Basic Version

You can adjust the size of the main product card. You can also choose the border color and whether to show the default shadows.

Cart

In this version, you can’t edit the cart appearance — only in the Pro version.

Buttons

Pick the button color and its hover color. This applies to the card button and the cart button.

Fonts & Sizes

You can choose the font family but not the size — size editing is Pro only.

Keep in mind: The font you want to use will need to be written manually in the corresponding field, just as shown in the image above.

Label

Edit the label text shown at the top right of your card. Leave it empty if you don’t want it shown. More control? That’s possible with the Pro version.

Color Icon

The product icon colors come from the settings you define. There are two ways to set this:

1. Use a HEX code

   

   
   

2. Write the color name

   

Note: If you need a specific shade of a color, we recommend using the HEX number, since we don’t support specific color names.

With this version, you won’t be able to customize the icon to show your product image instead of a color. That’s only available in the Pro version.

Let’s see what range and variety of modifications we can make with the Pro component.

Pro Version

You’ll be able to edit the color, shadows, icons, buttons, fonts of your product, and more. Basically, every element of the card.

Cart

You’ll be able to edit all the elements of the cart pop-up… colors, background, buttons, texts…

Buttons

You’ll be able to choose the color of the primary and secondary buttons.

Fonts & Sizes

Choose independent font types and sizes for each text and/or title in your card and cart. Within each customizable element, you’ll find the option to edit the font, size, and color.

Label

Edit the text on your label. Choose the position, shape, text size, and colors so everything fits perfectly with your store.

Color Icon

The colors of your product’s icons will be the ones you’ve defined in the settings.

You’ll also be able to add a unique image for the added color.

With this version, you can customize the icon so your product image shows up instead of just a color.

That’s it — your Framer Configurator, fully under your control!