Product Cards

Product cards are the individual product tiles shown in search results and collection pages. You can configure their appearance in the app dashboard under Settings > Appearance > Product Cards.

Card Display Modes

Choose how products are laid out on the results page.

Grid Mode (Default)

Products display in a responsive grid. You can configure the number of columns:

Screen Size	Default Columns	Configurable Range
Desktop (1024px+)	4	2-6
Tablet (768-1023px)	3	2-4
Mobile (< 768px)	2	1-2

List Mode

Products display in a single-column list with the image on the left and details on the right. List mode shows more product information per card (description excerpt, variant options) but displays fewer products per screen.

To switch between modes:

1. Go to Settings > Appearance > Product Cards
2. Under Layout, select Grid or List
3. Click Save

You can also let shoppers toggle between grid and list view by enabling Show layout toggle in the same section.

Image Settings

Image Position

Control where the product image appears on the card:

• Top (default) -- Image above the product details
• Left -- Image to the left of details (list mode only)
• Background -- Image fills the entire card with text overlaid

Aspect Ratio

Set the aspect ratio for product images:

Option	Ratio	Best For
Square	1:1	Consistent grid appearance
Portrait	2:3	Fashion, apparel
Landscape	3:2	Home goods, furniture
Natural	Original	Mixed catalogs (preserves each image's native ratio)

Second Image on Hover

When enabled, hovering over a product card reveals the second image from the product's image gallery. This is commonly used to show a back view or lifestyle shot.

1. Go to Settings > Appearance > Product Cards > Images
2. Toggle Show second image on hover on
3. Click Save

The hover transition uses a smooth crossfade. If a product has only one image, the hover effect is skipped.

Card Information

Choose which product details appear on each card. Toggle each field on or off in Settings > Appearance > Product Cards > Information.

Field	Default	Notes
Product title	Always shown	Cannot be hidden
Price	On	Shows sale price with compare-at price strikethrough
Vendor	Off	Useful for multi-brand stores
Product rating	Off	Requires Shopify Product Reviews or a compatible reviews app
Color swatches	Off	Shows available colors as clickable swatches below the image
Variant count	Off	Shows "+3 more options" text

Color Swatches

When enabled, color swatches appear on the product card based on the product's Color option values. Clicking a swatch updates the product image to show that color variant.

Swatch colors are determined automatically from the option value name (e.g., "Red" maps to #FF0000). For custom colors, configure the swatch color map in Filters > Color Swatches.

Badges

Badges are small labels overlaid on the product card image. Configure them in Settings > Appearance > Product Cards > Badges.

Sale Badge

Appears when the product has a compare-at price higher than its current price.

• Label: Customizable (default: "Sale")
• Show percentage: Toggle to display the discount percentage (e.g., "-30%")
• Color: Background and text color

New Badge

Appears on recently added products.

• Label: Customizable (default: "New")
• Duration: How long after creation the badge appears (default: 30 days)
• Color: Background and text color

Sold Out Badge

Appears when total inventory is zero.

• Label: Customizable (default: "Sold Out")
• Color: Background and text color
• Dim card: Optionally reduce the card's opacity when sold out

Badge Position

Control where badges appear on the card image:

• Top-left (default)
• Top-right
• Bottom-left
• Bottom-right

When multiple badges apply to the same product, they stack vertically in the selected corner.

Quick Add Button

The Quick Add button lets shoppers add a product to their cart directly from the search results page, without visiting the product page.

1. Go to Settings > Appearance > Product Cards > Quick Add
2. Toggle Enable Quick Add on
3. Configure the button appearance:
   • Label: Button text (default: "Add to Cart")
   • Position: Below the card details or overlaid on hover
   • Style: Filled, outlined, or text-only

When a product has multiple variants, clicking Quick Add opens a variant selector popup instead of adding directly to cart.

CSS Customization

All product card elements use the ssf- prefix. Here are the key classes:

/* Product card container */
.ssf-product-card { }

/* Product image wrapper */
.ssf-product-image-wrapper { }

/* Primary product image */
.ssf-product-image { }

/* Hover (second) image */
.ssf-product-image--hover { }

/* Product details area */
.ssf-product-details { }

/* Product title */
.ssf-product-title { }

/* Price container */
.ssf-product-price { }

/* Compare-at (original) price */
.ssf-product-compare-price { }

/* Badge elements */
.ssf-badge { }
.ssf-badge--sale { }
.ssf-badge--new { }
.ssf-badge--sold-out { }

/* Color swatches on card */
.ssf-card-swatches { }
.ssf-card-swatch { }

/* Quick Add button */
.ssf-quick-add { }

/* Variant selector popup */
.ssf-quick-add-variants { }

For example, to make the Quick Add button match your theme's primary button:

.ssf-quick-add {
  background: var(--color-button);
  color: var(--color-button-text);
  font-family: var(--font-body-family);
  border-radius: var(--buttons-radius);
}

For more CSS customization options, see the CSS Customization guide.