Product card
Controls the global appearance and behavior of product cards throughout your store, including layout, media, buttons, alignment, and colors.
Where to find it
- In your Shopify admin, go to Online Store → Themes → Customize
- Click the Theme settings (gear icon) in the left panel
- Click Product card
Settings
Layout
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Card style | Select | Choose the overall card layout direction | Vertical | Vertical, Horizontal, Overlay |
| Card border radius | Range (0–40 px, step 2) | Rounds the corners of the entire card | 0 px | — |
| Enable border | Checkbox | Adds a visible border around the card | Off | — |
| Enable background | Checkbox | Fills the card with a background color | Off | — |
| Padding scale | Select | Controls how much inner spacing the card has | Regular | Compact, Regular, Spacious |
| Sold out treatment | Select | Visual treatment applied to cards for sold-out products | None | None, Grayscale, Dim |
| Show "from" price | Checkbox | Displays a "from" label before the lowest price when a product has multiple variants at different prices | Off | — |
Horizontal layout
Visible when Card style is set to Horizontal.
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Image position | Select | Places the product image on the left or right side of the card | Left | Left, Right |
| Image ratio | Select | Controls how much horizontal space the image occupies | 50% | 40%, 50%, 60% |
Overlay
Visible when Card style is set to Overlay.
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Overlay opacity | Range (0–100 %, step 5) | Controls the transparency of the overlay that sits on top of the product image | 80 % | — |
| Overlay blur | Range (0–20 px, step 1) | Applies a blur effect behind the overlay content | 4 px | — |
| Overlay gradient (light) | Color | Optional gradient color applied to the overlay in light mode | None | — |
| Overlay gradient (dark) | Color | Optional gradient color applied to the overlay in dark mode | None | — |
| Overlay hover | Select | Animation style when a customer hovers over an overlay card | Slide up | Slide up, Fade in, None |
Vertical
Visible when Card style is set to Vertical.
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Shape | Select | Applies a decorative shape to the card | None | None, Diagonal left, Diagonal right, Wave, Angular |
| Creative angle | Range (5–30, step 1) | Adjusts the angle of the decorative shape. **Visible when** Shape is not set to None. | 15 | — |
Media
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Media mode | Select | Determines how product images are displayed on the card | Hover | Single, Hover, Slider |
| Media height | Select | Sets the aspect ratio or sizing mode for the product image area | Portrait | Square, Portrait, Tall, Landscape, Fixed height, Natural |
| Fixed height (desktop) | Range (100–600 px, step 10) | Sets a specific pixel height for the image area on desktop. **Visible when** Media height is set to Fixed height. | 300 px | — |
| Fixed height (mobile) | Range (100–500 px, step 10) | Sets a specific pixel height for the image area on mobile. **Visible when** Media height is set to Fixed height. | 250 px | — |
| Image fit | Select | Controls how the image fills the available space | Cover | Cover, Contain |
| Image hover | Select | Effect applied to the image when a customer hovers over the card | Fade to second image | None, Zoom, Fade to second image |
| Enable variant image | Checkbox | Shows the matching variant image when a customer selects a swatch | On | — |
| Slider pagination | Select | Style of pagination indicators for the image slider. **Visible when** Media mode is set to Slider. | None | None, Dots, Lines, Fraction |
| Slider arrows | Select | Style of navigation arrows for the image slider. **Visible when** Media mode is set to Slider. | Chevron | None, Chevron, Arrow, Caret |
| Show arrows on hover only | Checkbox | Hides the slider arrows until a customer hovers over the card. **Visible when** Media mode is Slider and Slider arrows is not None. | Off | — |
Media corner radius
Visible when Card style is not set to Overlay.
| Setting | Type | Description | Default |
|---|---|---|---|
| Bottom left | Range (0–40 px, step 2) | Rounds the bottom-left corner of the media area | 0 px |
| Bottom right | Range (0–40 px, step 2) | Rounds the bottom-right corner of the media area | 0 px |
Add button
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Button position | Select | Places the add-to-cart button inside the text content area or over the product image | Inside content | Inside content, Inside media |
| Inside media button style | Select | Choose between a compact icon or a full text button when the button is over the image. **Visible when** Button position is Inside media and Card style is not Overlay or Horizontal. | Icon only | Icon only, Text button |
| Icon position | Select | Corner placement of the icon button over the image. **Visible when** conditions for inside-media icon button are met. | Bottom right | Top left, Top right, Bottom left, Bottom right |
| Button position (mobile) | Select | Mobile-specific placement of the add-to-cart button | Inside content | Inside content, Inside media |
| Inside media button style (mobile) | Select | Mobile-specific style when the button is placed over the image. **Visible when** the mobile button position is Inside media and conditions are met. | Icon only | Icon only, Text button |
| Icon position (mobile) | Select | Mobile-specific corner placement of the icon button. **Visible when** conditions for mobile inside-media icon button are met. | Bottom right | Top left, Top right, Bottom left, Bottom right |
Alignment
| Setting | Type | Description | Default | Options |
|---|---|---|---|---|
| Content alignment | Select | Horizontal alignment of the card text and details on desktop | Start | Start, Center, End |
| Content alignment (mobile) | Select | Horizontal alignment of the card text and details on mobile | Start | Start, Center, End |
Light mode
| Setting | Type | Description | Default |
|---|---|---|---|
| Background color | Color | Card background color in light mode | None |
| Text color | Color | Card text color in light mode | None |
| Overlay background color | Color | Background color of the overlay content area in light mode. **Visible when** Card style is Overlay. | None |
| Icons background | Color | Fill color behind card icons in light mode | #ffffff |
| Icons stroke | Color | Stroke color of card icons in light mode | #000000 |
| Border color | Color | Card border color in light mode | #e5e7eb |
| Price color | Color | Product price text color in light mode | #000000 |
| Sale price color | Color | Discounted price text color in light mode | #dc2626 |
Dark mode
| Setting | Type | Description | Default |
|---|---|---|---|
| Background color | Color | Card background color in dark mode | None |
| Text color | Color | Card text color in dark mode | None |
| Overlay background color | Color | Background color of the overlay content area in dark mode. **Visible when** Card style is Overlay. | None |
| Icons background | Color | Fill color behind card icons in dark mode | #1f2937 |
| Icons stroke | Color | Stroke color of card icons in dark mode | #ffffff |
| Border color | Color | Card border color in dark mode | #374151 |
| Price color | Color | Product price text color in dark mode | #ffffff |
| Sale price color | Color | Discounted price text color in dark mode | #ef4444 |