Product Card Page Design for Website
Product card page is a conversion point. This is where user decides to buy. Design must eliminate all friction between "I'm interested" and "add to cart": provide complete information, show product from all angles, answer questions before they arise.
Page Anatomy
Above the fold (top area)
Maximum attention zone. Must contain everything needed for decision without scrolling:
- Product gallery (main + thumbnails)
- Product name (H1)
- Rating and review count (with anchor to reviews)
- Price (current + strikethrough + savings amount)
- Availability and delivery timeframe
- Variant selection (color, size, volume)
- "Add to Cart" button
- "Buy Now" button (quick checkout)
- Trust icons (secure payment, returns, warranty)
Below fold — information blocks
- Full description (structured, with characteristics)
- Characteristics table
- Reviews with ratings
- Q&A section
- Similar products
- Accessories / bundles
Product Gallery
Gallery is the most important element. Users don't buy what they can't examine.
Desktop: main image 600–800px + vertical thumbnail strip left (or horizontal bottom). Zoom on hover (lens zoom or lightbox). Video support in gallery.
Mobile: horizontal swiper with dot indicators. Pinch-to-zoom on tap. Full-screen view on swipe up.
Content types in gallery:
| Type | Purpose |
|---|---|
| Studio shot (white background) | Details, official view |
| Lifestyle photo | Usage context |
| 360° view | Full examination |
| Video review | Working demonstration |
| Zoom details | Textures, seams, materials |
| Photo with dimensions | Helps with sizes |
Product Variant Selection
Color — visual swatches, not dropdown. Unavailable variants struck through diagonally, not hidden. Hover shows photo preview.
Size — pill buttons. Link to size chart opens modal, not new tab. Unavailable sizes shown gray (don't hide — user should know size exists).
Other variants (volume, configuration) — dropdown or radio buttons per quantity.
On variant selection, update: price, availability, images (show correct color photo), SKU.
Price Block
Was: 15 990 ₽ [−25%]
Now: 11 990 ₽
Savings: 4 000 ₽
Sale ends in: [02:14:38]
With Sber card: 10 790 ₽ (-10%)
Cashback points: up to 590 points
Discount timer appropriate only for real time-limited sales — fake urgency destroys trust and violates advertising laws.
Availability and Delivery Block
Dynamic block changing by geolocation or entered city:
✓ In stock (142 pcs)
Courier delivery: tomorrow, Mar 14
— If ordered by 18:00
— Free from 5 000 ₽, otherwise 299 ₽
Pickup points: 38 locations in Moscow
Russian Post: 3–7 days, from 199 ₽
Enter your city: [Moscow ▾]
Description and Characteristics
Description should be structured, not one block of text:
Tab structure:
- "Description" — marketing text + key features list
- "Characteristics" — parameters table
- "Reviews (48)" — UGC content
- "Questions (12)" — Q&A
Characteristics table:
Manufacturer Apple
Model MacBook Pro 14"
Processor Apple M3 Pro, 11 cores
RAM 18 GB
Storage 512 GB SSD
Display 14.2", 3024×1964, 120 Hz
Battery 70 Wh, up to 18 hours
Weight 1.61 kg
Warranty 1 year
Reviews Block
Critical trust element. Structure:
- Overall rating large + distribution across stars (horizontal bars)
- Filters: by star count, with photo, verified
- Review cards: name, date, rating, text, photo/video, "Helpful?"
- Pagination or "Show more"
Review form: available to logged-in buyers. Fields: rating (stars), title, text, photo upload.
Sticky CTA on Mobile
On mobile, add-to-cart button should be sticky at bottom when scrolled below main product zone:
.product-cta-sticky {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
background: #fff;
box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
z-index: 100;
display: flex;
gap: 8px;
}
/* Hide when main button visible */
.product-cta-sticky.is-hidden {
transform: translateY(100%);
}
Related Products
Three patterns with different mechanics:
- "Similar products" — from same category with close characteristics
- "Often buy together" — collaborative filtering per order data
- "You viewed" — browse history from localStorage
Carousel, not grid — doesn't distract from main product.
Structured Data
{
"@context": "https://schema.org",
"@type": "Product",
"name": "MacBook Pro 14\" M3 Pro",
"image": ["https://example.com/images/mbp-1.jpg"],
"description": "...",
"sku": "MRXU3LL/A",
"brand": { "@type": "Brand", "name": "Apple" },
"offers": {
"@type": "Offer",
"price": "189990",
"priceCurrency": "RUB",
"availability": "https://schema.org/InStock",
"itemCondition": "https://schema.org/NewCondition"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "142"
}
}
Timelines
Product card design (desktop) with basic gallery and description — 3–4 days. Full design: desktop + mobile, all variant states, reviews, sticky CTA, cross-sell blocks — 6–10 days.