Product Cards with Image Gallery & Color Swatches
Shoppers love seeing options before clicking. This card shows color variants, available sizes, and alternate product images on hover. Great for fashion, electronics, or any store with product variations.
Advanced Card Builder
Image gallery, color swatches, wishlist, size picker, stock badge & more.
Live Interactive Preview
Gallery thumbnails • Color swatches • Wishlist heart • Size selector • Stock badge
Component Code
Copy the HTML, CSS, Js and CDN separately. All styles are self-contained.
Why Advanced Product Card?
Image gallery + color swatches + wishlist + size options to boost conversions and customer confidence.
Interactive Image Gallery
Multiple product views with clickable thumbnails let customers inspect every angle. Gallery + color sync builds trust and reduces returns by showing exactly what they buy.
Color Swatches & Variants
Visual color pickers let shoppers instantly switch product colors. Each swatch updates the main image — no page reloads, zero friction, higher engagement.
Wishlist + Size Selector
Save-for-later heart icon and real-time size picking with stock status (In Stock / Out of Stock). Gives customers control and urgency, boosting add-to-cart rates.
How to Use This Product Card Component
Copy the CSS Styles
Go to CSS tab → copy all styles. Paste into your styles.css or <style> tag inside <head>. All card-specific animations and gallery styles are included.
Include CDN Dependencies
Add Bootstrap 5 Icons (optional for layout) + Font Awesome 6 for wishlist and cart icons. The card works standalone but icons need Font Awesome.
Insert HTML Structure
Copy the full HTML from the HTML tab. Place it anywhere in your webpage — inside product grids, featured sections, or modals.
Customize Images & Variants
Replace gallery image URLs, update color swatch values, modify size options (S/M/L/XL), and change pricing/ratings. The interactive logic auto-adapts.
Where to Use This Component
Frequently Asked Questions
Can I customize the color swatches?
Yes! The swatches are pre-configured (Obsidian, Silver, Cobalt, Burgundy) but you can easily change hex codes, add more swatches, or link them to different product images directly in the HTML/JS.
How does the gallery + color sync work?
Clicking a color swatch or gallery thumbnail dynamically updates the main product image. Each color variant can have a dedicated image, creating a seamless browsing experience.
Is the wishlist functionality persistent?
The heart icon toggles between outlined and solid states (visual feedback). For persistent wishlist storage, you can extend the JavaScript to save items to localStorage or sync with backend.
How do size options affect stock status?
Each size button shows "In Stock" or "Out of Stock" dynamically. Selecting an out-of-stock size updates the badge, reducing customer frustration and improving inventory transparency.
Does it require heavy JavaScript skills?
Not at all. The card comes with pre-built interactivity. You only need to update image URLs, prices, and variant labels. All gallery, swatch, and wishlist logic is ready to use.
Is the gallery touch-friendly on mobile?
Absolutely. Thumbnails and swatches are sized for touch targets, and the card layout stacks gracefully on smaller screens, keeping all features accessible.