The 7 product card variants: Standard, Lookbook, Minimal, Table, Overflow, Ranking, and Showcase. Full customization.
Product Cards
Product cards are the components that display your products in collections, recommendation sections, and grids. Scale Theme offers 7 layout variants with dozens of customization options to create a unique design.
The 7 layout variants
| Variant | Description | Best for |
|---|---|---|
| Standard | Classic card with image, title, and price | General collections, safe choice |
| Lookbook | Dominant image with text overlay | Fashion, lifestyle, visual products |
| Minimal | Clean design, minimum elements | Luxury, minimalist design |
| Table | Card with information structured in columns | Technical products, comparison |
| Overflow | Image that extends beyond the card frame | Visual impact, featured products |
| Ranking | Card with ranking number | Top sellers, bestsellers, curated picks |
| Showcase | Large card with extended content area | Hero products, premium featured items |
Standard
The classic, versatile card. Image on top, information below. The safest choice for any type of catalog.
Lookbook
The image fills the entire card. Title and price are shown as an overlay on the image. Ideal for stores where visuals are paramount.
Minimal
The cleanest design: no borders, no shadows, generous spacing. The product speaks for itself.
Table
Displays product information in a structured format with data columns. Perfect for technical catalogs.
Overflow
The product image extends beyond the card boundaries, creating a dynamic, eye-catching visual effect.
Ranking
Adds a prominently displayed ranking number (1, 2, 3...) to the card. Ideal for "Top sellers" or "Our picks" sections.
Showcase
Large-format card with a bigger-than-usual content area. Perfect for highlighting a hero product.
Per-card settings
Image ratio
The ratio determines the image proportions on the card:
| Ratio | Proportion | Best for |
|---|---|---|
| Adapt | Original image ratio | Images with varying proportions |
| Square | 1:1 | Accessories, jewelry, objects |
| Portrait | 4:5 | Fashion, worn clothing |
| Portrait tall | 2:3 | Fashion, lookbooks |
| Landscape | 3:2 | Furniture, appliances |
Secondary image on hover
| Setting | Description | Options |
|---|---|---|
| Secondary image | Show the 2nd product image on hover | Yes / No |
| Animation | Transition between images | Fade / Flip / Slide / Zoom |
Corners and borders
| Setting | Description | Options |
|---|---|---|
| Border radius | Corner rounding | None / Small / Medium / Large / XL |
| Asymmetric corners | Different rounding per corner | Yes / No |
| Custom corners | Radius per corner (if asymmetric) | Top-left, top-right, bottom-left, bottom-right |
Displayed content
| Setting | Description | Default |
|---|---|---|
| Vendor | Manufacturer/brand name | No |
| Price | Price and compare-at price | Yes |
| Description | Short description | No |
| Swatches | Color swatches | Yes |
| Button | Action button on the card | ATC / Quick View / None |
Title position
| Option | Description |
|---|---|
| Below | Title below the image (standard) |
| Overlay | Title overlaid on the image (lookbook style) |
Hover effects
Scale Theme offers hover effects on the card to enliven the browsing experience:
| Effect | Description |
|---|---|
| Lift | The card lifts slightly (translateY + shadow) |
| Glow | A luminous halo appears around the card |
| Tilt | Subtle 3D perspective effect on hover |
| Reveal | A hidden element is revealed (ATC button, description) |
| None | No effect |
prefers-reduced-motion.Background effects
Decorative effects can be added behind the card:
| Effect | Description |
|---|---|
| Gradient blob | Organic colored shape in the background |
| Glow | Diffuse glow behind the card |
| None | No background effect |
| Setting | Description | Options |
|---|---|---|
| Effect type | Background effect | Gradient blob / Glow / None |
| Color | Effect color | Accent 1 / Accent 2 / Custom |
| Intensity | Effect opacity | Low / Medium / High |
Button on the card
The button built into the card can have two behaviors:
| Type | Behavior |
|---|---|
| ATC (Add to Cart) | Adds the default variant to the cart directly |
| Quick View | Opens the Quick View modal to choose variant/quantity |
Responsive
| Aspect | Desktop | Tablet | Mobile |
|---|---|---|---|
| Columns | 2-5 based on config | 2-3 | 1-2 |
| Hover effects | Active | Active | Disabled |
| Secondary image | On hover | On hover | Disabled |
| Card button | On hover (reveal) | Always visible | Always visible |
Best practices
- Image consistency: Use the same ratio and photography style across your entire catalog
- Secondary image: Enable it for fashion products (front/back). Disable it if your 2nd images are not relevant
- Swatches: Enable them for products with color variants to help browsing
- One style per store: Choose a card variant and keep it consistent across the entire site
- Performance: Hover effects are decorative. If your audience is mostly mobile, they provide no value