Product Card Theme Settings
Product cards are one of the most important conversion elements in your store.
They control how products appear across:
- collection pages
- search results
- featured product sections
- sliders and product grids
This section lets you control design, layout, images, ratings, swatches, and more.
🖼 Image Options (Force Image Size)
Control how product images are displayed across all cards.
Available ratios:
▸ Natural
Uses the original image size.
Best for stores where product images are consistently prepared.
▸ Landscape (4:3)
Wider than tall — good for lifestyle or horizontal shots.
▸ Square (1:1)
Perfect for fashion, accessories, and clean catalog layouts.
▸ Portrait (4:5)
Slightly taller — great for detailed product shots.
▸ Tall (2:3)
Very tall format — works well for clothing or long items.
🔍 Zoom Image to Fill Space
Some images do not match the selected ratio.
Enable this setting to:
- automatically crop + scale
- ensure images always fill the frame
- avoid empty spaces
Recommended if your catalog contains mixed image dimensions.
🔁 Show Second Image on Hover
When enabled:
Hovering over the product card shows the next image from the gallery.
Great for:
- showing different angles
- displaying color variations
- previewing lifestyle vs studio shots
🎨 Product Card Design
Text Alignment
Choose how text is aligned:
- Left
- Center
- Right
Card Style
▸ Standard
Minimal — no borders, shadows, or extra padding.
▸ Box
Adds:
- padding
- optional accent background
- shadows
- borders
Accent Background (Box style only)
Adds a subtle accent color behind the card.
Helpful for highlighting featured products or improving contrast.
⭐ Product Ratings
Control how ratings appear.
Enable Ratings
Toggle ratings visibility on product cards.
Show Stars With No Reviews
Still shows empty stars even if no reviews exist.
Show Rating As:
1️⃣ Count
Example: ⭐⭐⭐⭐☆ (12)
2️⃣ Average
Example: ⭐⭐⭐⭐☆ — 4.3
3️⃣ Average With Single Star
One star symbol + number.
🎨 Swatches on Product Cards
Customize variant/color swatches.
Enable Color Swatches
Toggle swatch display on cards.
Position
Choose where swatches appear:
- under the image
- at the bottom of the card
Display Limit
Limit number of swatches shown.
- Set to 0 → show all
- Set 1–10 → show only that many
This keeps grids clean while still showing variations.
➕ Extra Settings
Show Vendor
Displays the product vendor/brand above the title.
Useful for multi-brand stores.
✅ Summary
With Product Card Theme Settings, you can control:
- image ratio + zoom
- hover image preview
- card layout + style
- ratings display
- swatches position + limits
- vendor visibility
Optimized product cards = better browsing, higher clicks, and more conversions.