Product card

Product card

About Product card

What's included:

  • 4 commerce states: Default, Sale, Low Stock, Sold Out

  • 4 color variant swatches with image crossfade on click

  • 3D cursor-tracked tilt with spring snap-back

  • Quick Add button slides up on hover, Notify me when sold out

  • Light and dark theme

  • Fully customizable: upload your own images, set colors, labels, and prices directly in Framer

How to use:

  1. Copy the component into your Framer project

  2. Upload your product images via the Image controls (one per variant)

  3. Set your swatch colors and labels

  4. Choose your commerce state and theme from the dropdown

  5. Drop it anywhere on your canvas, it's ready to go

Designed for: e-commerce sites, product showcases, portfolio projects, and SaaS landing pages with product sections.