18 hand-coded CSS product card templates for Shopify, WooCommerce, real-estate listings, SaaS pricing, and food-delivery grids — hover-reveal Add-to-Cart, pure-CSS 3D flip with spec back, contained image zoom, mouse-tracking 3D tilt, slide-up details, glassmorphism, dark-mode gadget, neon glowing border, sale ribbon, sneaker color+size picker, quantity stepper, real-estate listing, and SaaS subscription pricing. 16 pure CSS + 2 vanilla JS with real <button> / <a> controls, schema.org/Product-ready markup for Google Shopping rich results, and :focus-visible mirroring every :hover state. Scoped under .cpc-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Related20 CSS Cards33 CSS Card Hover Effects22 CSS Gradient Buttons18 Tailwind CSS Product Cards15 Tailwind CSS 3D Tilt Hover Cards
Course pickPartner: Zero to Mastery
Affiliate linkWant to build production-ready CSS layouts, animations and UI from scratch?
You just browsed 18 product cards. Learn the Flexbox, Grid and animation thinking behind them, so the next component starts in your head, not in a copy-paste.
Every ZTM course in one membership: $25/month, paid yearly at $299 · 30‑day money-back guarantee
The CSS Bootcamp. We may earn a commission, at no extra cost to you.
.cpc-NN (CSS Product Card, deliberately not .pc-NN which is claimed by css-profile-cards) so multiple product-card patterns coexist on one page without style bleed.schema.org/Product structured data. Wrap the entire product card in an element with itemscope itemtype="https://schema.org/Product", then annotate the semantic parts with itemprop: itemprop="name" on the product name, itemprop="image" on the img tag, itemprop="description" on any description text, and nest an itemprop="offers" block with itemscope itemtype="https://schema.org/Offer" containing itemprop="price", itemprop="priceCurrency" (USD, GBP, CAD, AUD, NZD, EUR), and itemprop="availability" (schema.org/InStock, OutOfStock, LimitedAvailability, PreOrder, BackOrder, Discontinued). For reviews, add nested itemprop="aggregateRating" with itemprop="ratingValue" and itemprop="reviewCount". Test with Google's Rich Results Test at search.google.com/test/rich-results — a valid product card qualifies for the star-rating overlay in Google search results, the product carousel on mobile SERPs, and Google Shopping placement. All 18 demos in this collection use semantic HTML that maps cleanly to schema.org/Product — you don't need to change any markup, just add the itemscope/itemtype/itemprop attributes on top of the existing structure. For JSON-LD format (recommended over microdata), emit a script tag with type application/ld+json alongside the visible card containing the same Product schema; this is what Shopify Dawn, WooCommerce, BigCommerce, and Stripe Checkout all default to. Rich Results eligibility requires at least name, image, and either offers.price + offers.priceCurrency or aggregateRating — everything else is optional but improves the SERP presentation. Missing image is the #1 disqualifier; use itemprop=image on the largest available product image, not a thumbnail.{{ product.title }}, {{ product.price | money }}, {{ product.featured_image | image_url }}, and {{ product.url }} tokens. Shopify's own Dawn default uses Demo 01's hover-reveal Add-to-Cart pattern or Demo 05's slide-up details panel with the primary color from theme settings. For WooCommerce Storefront (PHP), edit content-product.php or use the woocommerce_before_shop_loop_item / woocommerce_shop_loop_item_title / woocommerce_after_shop_loop_item_title hooks to insert the card markup; replace price with <?php woocommerce_template_loop_price(); ?>, image with <?php woocommerce_template_loop_product_thumbnail(); ?>. For BigCommerce Cornerstone (Handlebars via Stencil), edit templates/components/products/card.html and inject the CSS + markup around {{name}}, {{price.without_tax.formatted}}, {{getImage image 'productgallery_size'}}. Common gotchas: (1) Shopify's cart drawer and Ajax add-to-cart expects a form with data-type='product' — the Add-to-Cart CTA in Demo 01 should submit that form, not a static anchor. (2) WooCommerce inserts stock-status classes automatically via body_class() — style your out-of-stock badge against .product.outofstock. (3) BigCommerce's product-card class is applied at the card root; scope your .cpc-NN inside a specificity-safe rule to avoid Cornerstone's default styles winning. All three platforms serve product images via CDN with the WebP/AVIF format negotiated by Accept headers — don't hardcode .jpg, use the platform's image helper. E-commerce product cards carry $3-7 CPM baseline in tier-1 markets but drive $15-25 CPM once combined with add-to-cart or checkout intent (the visitor is measurably closer to purchase). Compliance callout: FTC 16 CFR § 238 (Bait Advertising) requires that any pricing shown in the card be accurate at click-through — hiding a shipping surcharge that appears only at checkout is a real FTC risk. State AG offices (California AG, New York AG, Texas AG) actively investigate deceptive e-commerce pricing.itemscope itemtype="https://schema.org/RealEstateListing" with itemprop="floorSize" (QuantitativeValue with unitCode SQFT), itemprop="numberOfBedrooms", itemprop="numberOfBathroomsTotal", and itemprop="offers" containing price + priceCurrency — this qualifies the listing for Google Search RealEstateListing rich results with the price and beds/baths in the SERP overlay.itemscope itemtype="https://schema.org/Offer" with itemprop="price", itemprop="priceCurrency", and itemprop="priceValidUntil" — this qualifies the pricing page for Google's Offer rich results and can trigger the "Prices from $X" enhancement in the SERP snippet.loading="lazy" on every image EXCEPT the top 4-6 above-the-fold cards, which get loading="eager" + fetchpriority="high". Also use srcset with a small 200-400w variant for mobile so a 3G Android doesn't download the 1200w desktop hero. Target LCP under 2.5s. Second, CLS (Cumulative Layout Shift): late-loading images without reserved dimensions shift the card content the moment they load, and if the shift happens above the fold, CLS jumps above the 0.1 threshold. Fix: set explicit width + height attributes on every img OR use aspect-ratio on the img container (aspect-ratio: 1/1 or 4/5 for e-commerce, 3/2 for real estate). Every demo in this collection uses aspect-ratio on the .cpc-NN__img container. Third, INP (Interaction to Next Paint): hover-reveal effects (Demo 01, Demo 05) that animate box-shadow or filter on hover can trigger repaints during scroll on mid-tier Android, pushing INP above the 200ms Google "Poor" threshold. Fix: animate only transform + opacity, never box-shadow blur radius or filter: blur() (both are paint-heavy). Every demo in this collection follows this rule. For the mouse-tracking tilt (Demo 04), throttle the pointermove handler with requestAnimationFrame — the code sample already does this. Measure with Chrome DevTools Performance Insights, Lighthouse (Mobile profile), PageSpeed Insights, or WebPageTest with a Slow 4G / Moto G4 profile — desktop performance masks all three failures. Google Search Console's Core Web Vitals report groups similar pages, so a single bad product-card template affects your entire /collections/ or /shop/ tree. Fixing one template lifts every product page's ranking simultaneously.
15 mouse-aware 3D tilt hover cards — e-commerce product spotlight, glassmorphism parallax team card, interactive pricing tier, holographic NFT collectible, pop-out mascot, dark tech grid with border glow, media player album art, blog article preview, cyberpunk neon glow, dashboard KPI widget, minimalist real estate, flip-to-back tilt, mobile app showcase, course learning card, and a Pure CSS touch-friendly tilt. Vanilla JS writes --rx/--ry/--mx/--my; all rendering stays in CSS on the GPU.
24 hand-coded CSS animated card patterns organised by what triggers the motion, not by card style. Scroll and entrance triggers: staggered grid reveals, @starting-style mount-in, scroll-driven scale and fade on animation-timeline: view(), View Transitions API card-to-detail morphs, blur-to-sharp lazy image loading, and FLIP re-layout when a filter changes. State-change triggers: add-to-cart success morph, like and save particle burst, expand and collapse to intrinsic height with calc-size(), swipe-to-dismiss on Pointer Events, and skeleton-to-loaded crossfade. Data-driven triggers: count-up KPI metrics, SVG sparkline draw-on-enter, and progress ring fill on load. Ambient idle loops: breathing glow, floating drift, animated gradient mesh backgrounds, conic rotating borders, auto-cycling testimonial decks, and live status pulses. Plus four hover patterns where the effect is the topic itself: cursor spotlight, holographic foil glare, corner ribbon slide, and horizontal accordion expand. Every card is scoped under a .ac-NN prefix for no-collision pasting, guards prefers-reduced-motion, animates compositor-only properties, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
22 hand-coded CSS avatars for chat apps, team dashboards, comment threads, account menus, and social profiles. Covers circular and squircle shapes, gradient and conic story rings, hexagon clip-path crops, online status dots, notification count badges, verified checkmarks, stacked facepiles with plus-N overflow, initials fallbacks for users without photos, broken-image recovery, avatar pickers, and a size scale system where the ring, badge, and status dot all scale from a single custom property.