Product Card
Theme settings: Product Card.
Product Card
At a glance
Control how product cards look in grids — image ratio, vendor, rating, hover image, buttons, and optional campaign ribbons.
Where to find it
- Theme editor path: Online Store → Customize → Theme settings → Product Card
Screenshot needed
Product Card in the theme editor
Screenshot of Theme settings → Product Card. Show the settings panel and the live preview so merchants can match labels to what they see.
Settings
General
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Product card style | Controls “Product card style” on the storefront. Open the theme editor to preview live. | style-1 | Always |
| Show vendor | Turns “Show vendor” on or off on the storefront. | Yes | Always |
| Show product rating | Requires a reviews app (e.g. Judge.me) syncing to Shopify product review metafields. | No | Always |
| Review star color | Controls “Review star color” on the storefront. Open the theme editor to preview live. | #470344 | Always |
| Aspect ratio | Controls “Aspect ratio” on the storefront. Open the theme editor to preview live. | 3/4 | Always |
| Show second image on hover | Turns “Show second image on hover” on or off on the storefront. | Yes | Always |
| Default thumbnail | For products without images | — | Always |
| Excluded product slugs | Enter product slugs or handles separated by commas to hide them from product listings, wishlist, and recently viewed. | — | Always |
Product title font size
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font size - Mobile | Sets font size - mobile in pixels for the matching screen size. | 20 | Always |
| Font size - Tablet | Sets font size - tablet in pixels for the matching screen size. | 24 | Always |
| Font size - Desktop | Sets font size - desktop in pixels for the matching screen size. | 28 | Always |
| Font weight | Sets how bold font weight text appears. | 600 | Always |
Product price font size
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Price display | Controls “Price display” on the storefront. Open the theme editor to preview live. | range | Always |
| Price inline | Show the sale price and compare-at price on one line. | No | Always |
| Font size - Mobile | Sets font size - mobile in pixels for the matching screen size. | 16 | Always |
| Font size - Tablet | Sets font size - tablet in pixels for the matching screen size. | 18 | Always |
| Font size - Desktop | Sets font size - desktop in pixels for the matching screen size. | 20 | Always |
| Font weight | Sets how bold font weight text appears. | 600 | Always |
Saved badge
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Saved badge color source | Used on cart line items and as the default for product price badges. | color_scheme | Always |
| Saved badge background | Controls “Saved badge background” on the storefront. Open the theme editor to preview live. | #D8EDD8 | settings.product saved badge color source == 'custom' |
| Saved badge text color | Controls “Saved badge text color” on the storefront. Open the theme editor to preview live. | #34AA08 | settings.product saved badge color source == 'custom' |
Ribbon
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Enable ribbon on product card | Turns “Enable ribbon on product card” on or off on the storefront. Also shows on the product page image gallery. | No | Always |
| Ribbon color | Background color of the product card ribbon. | #111111 | Enable ribbon on product card is on |
| Ribbon text color | Text color of the product card ribbon. | #FFFFFF | Enable ribbon on product card is on |
| Enable shimmer | Turns a moving highlight on the ribbon on or off. | No | Enable ribbon on product card is on |
| Font size - Mobile | Sets font size - mobile in pixels for the matching screen size. | 10 | Enable ribbon on product card is on |
| Font size - Tablet | Sets font size - tablet in pixels for the matching screen size. | 11 | Enable ribbon on product card is on |
| Font size - Desktop | Sets font size - desktop in pixels for the matching screen size. | 12 | Enable ribbon on product card is on |
Buttons
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Add To Cart button style | Controls “Add To Cart button style” on the storefront. Open the theme editor to preview live. | default | settings.product card style == 'style-1' |
| Show Wishlist button | Turns “Show Wishlist button” on or off on the storefront. | Yes | Always |
| Wishlist icon | Controls “Wishlist icon” on the storefront. Open the theme editor to preview live. | heart | settings.show wishlist button |
| Add to cart icon | Controls “Add to cart icon” on the storefront. Open the theme editor to preview live. | cart-plus | Always |
| Action button style | Controls “Action button style” on the storefront. Open the theme editor to preview live. | default | Always |
Inventory
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Hide variant selector when product has a single variant | When enabled, the variant controls will be hidden for products with exactly one variant. | Yes | Always |
| Show product inventory | Turns “Show product inventory” on or off on the storefront. | No | Always |
| Display Sold Out Format | Controls “Display Sold Out Format” on the storefront. Open the theme editor to preview live. | overlay | Always |
Setting details
Each control from the tables above, explained simply:
Product card style
Controls “Product card style” on the storefront. Open the theme editor to preview live. Default: style-1.
Show vendor
Turns “Show vendor” on or off on the storefront. Default: Yes.
Show product rating
Requires a reviews app (e.g. Judge.me) syncing to Shopify product review metafields. Default: No.
Review star color
Controls “Review star color” on the storefront. Open the theme editor to preview live. Default: #470344.
Aspect ratio
Controls “Aspect ratio” on the storefront. Open the theme editor to preview live. Default: 3/4.
Show second image on hover
Turns “Show second image on hover” on or off on the storefront. Default: Yes.
Default thumbnail
For products without images Default: —.
Excluded product slugs
Enter product slugs or handles separated by commas to hide them from product listings, wishlist, and recently viewed. Default: —.
Font size - Mobile
Sets font size - mobile in pixels for the matching screen size. Default: 20.
Font size - Tablet
Sets font size - tablet in pixels for the matching screen size. Default: 24.
Font size - Desktop
Sets font size - desktop in pixels for the matching screen size. Default: 28.
Font weight
Sets how bold font weight text appears. Default: 600.
Price display
Controls “Price display” on the storefront. Open the theme editor to preview live. Default: range.
Price inline
Show the sale price and compare-at price on one line. When off, the compare-at price sits below the sale price. Quick view follows this setting unless you change Price layout in Theme settings → Quick View. Default: No.
Font size - Mobile
Sets font size - mobile in pixels for the matching screen size. Default: 16.
Font size - Tablet
Sets font size - tablet in pixels for the matching screen size. Default: 18.
Font size - Desktop
Sets font size - desktop in pixels for the matching screen size. Default: 20.
Font weight
Sets how bold font weight text appears. Default: 600.
Saved badge color source
Used on cart line items and as the default for product price badges. Default: color_scheme.
Saved badge background
Controls “Saved badge background” on the storefront. Open the theme editor to preview live. Default: #D8EDD8. This control appears when: settings.product saved badge color source == 'custom'.
Saved badge text color
Controls “Saved badge text color” on the storefront. Open the theme editor to preview live. Default: #34AA08. This control appears when: settings.product saved badge color source == 'custom'.
Enable ribbon on product card
Turns “Enable ribbon on product card” on or off on the storefront. Also shows on the product page image gallery. Default: No. When on, labels come from Product ribbon metaobjects (Content → Metaobjects). The first active ribbon that lists the product or one of its collections is shown. Recently viewed and wishlist match up to 250 products per collection.
Ribbon color
Background color of the product card ribbon. Default: #111111. This control appears when: Enable ribbon on product card is on.
Ribbon text color
Text color of the product card ribbon. Default: #FFFFFF. This control appears when: Enable ribbon on product card is on.
Enable shimmer
Turns a moving highlight on the ribbon on or off. Default: No. This control appears when: Enable ribbon on product card is on.
Font size - Mobile
Sets font size - mobile in pixels for the matching screen size. Default: 10. This control appears when: Enable ribbon on product card is on.
Font size - Tablet
Sets font size - tablet in pixels for the matching screen size. Default: 11. This control appears when: Enable ribbon on product card is on.
Font size - Desktop
Sets font size - desktop in pixels for the matching screen size. Default: 12. This control appears when: Enable ribbon on product card is on.
Add To Cart button style
Controls “Add To Cart button style” on the storefront. Open the theme editor to preview live. Default: default. This control appears when: settings.product card style == 'style-1'.
Show Wishlist button
Turns “Show Wishlist button” on or off on the storefront. Default: Yes.
Wishlist icon
Controls “Wishlist icon” on the storefront. Open the theme editor to preview live. Default: heart. This control appears when: settings.show wishlist button.
Add to cart icon
Controls “Add to cart icon” on the storefront. Open the theme editor to preview live. Default: cart-plus.
Action button style
Controls “Action button style” on the storefront. Open the theme editor to preview live. Default: default.
Hide variant selector when product has a single variant
When enabled, the variant controls will be hidden for products with exactly one variant. Default: Yes.
Show product inventory
Turns “Show product inventory” on or off on the storefront. Default: No.
Display Sold Out Format
Controls “Display Sold Out Format” on the storefront. Open the theme editor to preview live. Default: overlay.
Tips
- Changes apply store-wide — check home, product, and collection pages after saving.
- Pair with section-level color schemes for page-specific overrides.
- Read How theme settings work for how globals connect to sections.