Product card settings change the product cards on collection and search pages, in sections such as Featured collection and Card rail, and in the mega menu. The small cards in the cart, the wishlist and the search panel ignore some of them. In the editor sidebar, click Theme settings, then select Product cards.
The group holds six settings, and the preview shows the cards they change.
Sections that show product cards have their own card settings too, such as Show vendor and Score seal metafield. Product card settings in sections describes them. The two sets work together this way:
Image hover effect is in both places. When a section's Image hover effect is Theme default, the section uses the one set here. Any other choice in the section wins for that section's cards.
Image ratio, Image fit, Product tag label, Show product type and Metric style are set only here, and every section uses them.
Settings
Setting
What it does
Image ratio
The shape of the photo. Portrait (4:5), the default, is a little taller than wide. Tall (3:4) is taller. Square (1:1) is as tall as it is wide. Landscape (4:3) is wider than tall. Pick the one closest to your product photos, so Crop to fill cuts off the least.
Image fit
Crop to fill, the default, fills the shape and cuts off the edges of a photo with a different shape. Show whole image shows the whole photo and fills the space around it with a light shade of the page background. Use it when your photos must not be cut, such as tall bottles on a plain background.
Image hover effect
What the photo does when the pointer is over the card. Gallery with dots, the default, shows up to 4 of the product's images. Moving the pointer from left to right across the photo shows each one in turn, and dots under the photo show which one is on screen. Second image fades to the product's second image. Zoom enlarges the photo slightly. None keeps the photo still. Gallery with dots and Second image need a product with more than one image. Touch screens always show the first image with no effect.
Product tag label
How a label such as Best seller looks on the photo. Scrolling ribbon, the default, is a band across the top of the photo, at a slight angle, with the label repeating and moving sideways. Still label is a small rounded label in the top left corner. Both use the Accent gradient from Color settings. For visitors whose device is set to reduce motion, the ribbon stands still.
Show product type
Shows the product's type in small, lighter text above the title. When the vendor shows too, the type follows it on the same line, with a dot between them. The type is the Type field on the product's page in your Shopify admin. On by default. A product without a type shows nothing there.
Metric style
How a rating looks on cards, from the section's Metrics setting, and in the Product metrics block of the product page. Bars, the default, shows a line filled up to the rating, with the value after it, such as 4/5. Dots shows one dot for each point of the rating's scale, up to 10, filled up to the rating, with no number. With Dots, the product page shows each rating on one line with its label, and every other metric, such as a weight, on one line with its label too.
A card shows a tag label only when the section's Show product tag label is on and the product has a tag that starts with the section's Product tag label prefix, which is badge: by default. The tag badge:Best seller shows Best seller. Add a label such as Best seller to a product explains the steps. There is no Sale label. A product with a compare-at price shows the old price crossed out before the new one.
A metric shows only for a product that has a value in that metafield. Show product ratings as bars or dots explains how to set up a rating metafield.
Small cards in the cart and wishlist
Some places show a small card, with the photo to the left of the title: the cart drawer and cart page suggestions, the wishlist, the search panel, and the Complementary products and Related products blocks on the product page. These small cards always show the product's first image in a 3:4 shape. They show no tag label, score seal or gallery dots, whatever these settings say.
Settings in each style
The Lair style uses Second image and Still label. The Fang style uses Zoom and Dots. The Checkmate style keeps the defaults. Theme styles compares the three looks you can pick when you add the theme.
Product card settings change the product cards on collection and search pages, in sections such as Featured collection and Card rail, and in the mega menu. The small cards in the cart, the wishlist and the search panel ignore some of them. In the editor sidebar, click Theme settings, then select Product cards.
The group holds six settings, and the preview shows the cards they change.
Sections that show product cards have their own card settings too, such as Show vendor and Score seal metafield. Product card settings in sections describes them. The two sets work together this way:
Image hover effect is in both places. When a section's Image hover effect is Theme default, the section uses the one set here. Any other choice in the section wins for that section's cards.
Image ratio, Image fit, Product tag label, Show product type and Metric style are set only here, and every section uses them.
Settings
Setting
What it does
Image ratio
The shape of the photo. Portrait (4:5), the default, is a little taller than wide. Tall (3:4) is taller. Square (1:1) is as tall as it is wide. Landscape (4:3) is wider than tall. Pick the one closest to your product photos, so Crop to fill cuts off the least.
Image fit
Crop to fill, the default, fills the shape and cuts off the edges of a photo with a different shape. Show whole image shows the whole photo and fills the space around it with a light shade of the page background. Use it when your photos must not be cut, such as tall bottles on a plain background.
Image hover effect
What the photo does when the pointer is over the card. Gallery with dots, the default, shows up to 4 of the product's images. Moving the pointer from left to right across the photo shows each one in turn, and dots under the photo show which one is on screen. Second image fades to the product's second image. Zoom enlarges the photo slightly. None keeps the photo still. Gallery with dots and Second image need a product with more than one image. Touch screens always show the first image with no effect.
Product tag label
How a label such as Best seller looks on the photo. Scrolling ribbon, the default, is a band across the top of the photo, at a slight angle, with the label repeating and moving sideways. Still label is a small rounded label in the top left corner. Both use the Accent gradient from Color settings. For visitors whose device is set to reduce motion, the ribbon stands still.
Show product type
Shows the product's type in small, lighter text above the title. When the vendor shows too, the type follows it on the same line, with a dot between them. The type is the Type field on the product's page in your Shopify admin. On by default. A product without a type shows nothing there.
Metric style
How a rating looks on cards, from the section's Metrics setting, and in the Product metrics block of the product page. Bars, the default, shows a line filled up to the rating, with the value after it, such as 4/5. Dots shows one dot for each point of the rating's scale, up to 10, filled up to the rating, with no number. With Dots, the product page shows each rating on one line with its label, and every other metric, such as a weight, on one line with its label too.
A card shows a tag label only when the section's Show product tag label is on and the product has a tag that starts with the section's Product tag label prefix, which is
badge:by default. The tagbadge:Best sellershows Best seller. Add a label such as Best seller to a product explains the steps. There is no Sale label. A product with a compare-at price shows the old price crossed out before the new one.A metric shows only for a product that has a value in that metafield. Show product ratings as bars or dots explains how to set up a rating metafield.
Small cards in the cart and wishlist
Some places show a small card, with the photo to the left of the title: the cart drawer and cart page suggestions, the wishlist, the search panel, and the Complementary products and Related products blocks on the product page. These small cards always show the product's first image in a 3:4 shape. They show no tag label, score seal or gallery dots, whatever these settings say.
Settings in each style
The Lair style uses Second image and Still label. The Fang style uses Zoom and Dots. The Checkmate style keeps the defaults. Theme styles compares the three looks you can pick when you add the theme.