---
title: "Product card — Framer component · Best of Framer"
description: "$8.00 · Framer component · by OlhaKit · Cards. Product card with 3D tilt and 4 states"
canonical: "https://framer.elliotli.dev/component/commerce-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Product card

# Product card

Product card with 3D tilt and 4 states

[View on Framer](https://framer.com/marketplace/components/commerce-card/?via=elliot-li)

![Product card preview image 1](https://framer.elliotli.dev/og/component/commerce-card/0a3c19808b21b085/1600x1200.jpg)

## Summary

Product card with 3D tilt and 4 states

## Description

**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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8420

## Details

- **Author**: OlhaKit
- **Price**: $8.00
- **Published**: 2026-05-21
- **Updated**: 2026-05-22
- **Added**: 2026-05-10
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator