Sections that show product cards have a Product cards group, which sets what each card shows in that section. The Collection, Search, Featured collection and Card rail sections have it, and so does the Mega menu block in the Header section. Choices that every card shares, such as the shape of the photo, are set once in Product card settings.
The group shows only when the section shows cards:
In the Mega menu block of the Header section, when Menu layout is Product cards and Maximum products is above 0.
In the Featured collection section, with every Product layout except Spotlight. Spotlight shows a list of product names beside one large photo, so only Show vendor and Show short description stay.
Settings
Setting
What it does
Card style
Plain, the default, shows the photo and the text on the section's background. On a panel puts each card on a rounded panel in the page background color, with a narrow border of that color around the photo. Use it when the section has a background color close to the page's, so each card stands apart.
Show vendor
The vendor's name in small text above the product title.
Show quick view button
A round button with an eye icon in the bottom left corner of the photo. It appears when the pointer is over the photo and always shows on touch screens. It opens quick view, a popup where customers choose options and add the product to the cart without leaving the page.
Show add to cart button
A round plus button beside the price, at the bottom right corner of the photo. For a product with several variants, it opens quick view. Turn it off to show the price alone. A sold-out product shows Sold out in place of the price and no button.
One-click add to cart
Shows when Show add to cart button is on. A product with one variant goes straight to the cart when a customer clicks the plus button, and the button turns into a quantity selector. Turn it off to make the plus button open quick view for every product. A product sold only as a subscription always opens quick view.
Show short description
A short line under the title. It comes from the product's subtitle metafield, descriptors.subtitle, or from the first 20 words of its description when it has no subtitle. Show a short description on product cards explains how to fill it.
Image hover effect
What the photo does when the pointer is over the card. Theme default uses Image hover effect in Product card settings. Gallery with dots switches between up to four of the product's images as the pointer moves across the photo, with dots under the photo. Second image shows the product's second image. Zoom enlarges the photo a little. None keeps it still. Touch screens show no effect, and a product with one image shows no gallery or second image.
Show score seal and Score seal metafield
A round seal with a scalloped edge over the top right corner of the card. The value of a product metafield fills its center and a short label runs around its edge. The seal shows only on products with a value in that metafield. Score seal metafield shows when Show score seal is on. Show a score seal on product cards has the steps.
Show product tag label and Product tag label prefix
A label on the photo, with text from a product tag. The card uses the first tag that starts with the prefix, badge: by default, so the tag badge:Best seller shows Best seller. Upper and lower case do not matter. Product tag label prefix shows when Show product tag label is on. Add a label such as Best seller to a product has the steps.
Metrics
Up to two product details under the short description, one metafield per line. A rating metafield shows as bars or dots. A number or text metafield shows its value as text. A product with no value for a line skips it. Show product ratings as bars has the steps.
Score seal metafield and each line of Metrics take a metafield's namespace and key, a vertical bar and a label, such as custom.score | Score. Without a label, a metric shows the key's name, such as Strength for custom.strength.
All the settings that turn something on are on by default, and Score seal metafield and Metrics are empty. A new section therefore shows the vendor, the quick view button, the add to cart button and the short description, and no seal or metrics until you enter a metafield. A tag label shows on any product that has a tag starting with badge:.
There is no Sale badge. A product with a compare-at price shows the old price crossed out before the new one. Product cards do not show color swatches.
How sections and Theme settings combine
Each section's Product cards group holds the settings in the table above, so two sections can show different details on their cards. Image hover effect is the only setting in both places. A section set to Theme default uses the effect chosen in Product card settings. The shape and crop of the photo, the look of the tag label, the product type and the look of ratings are set only there, for every card in the store.
Sections that show product cards have a Product cards group, which sets what each card shows in that section. The Collection, Search, Featured collection and Card rail sections have it, and so does the Mega menu block in the Header section. Choices that every card shares, such as the shape of the photo, are set once in Product card settings.
The group shows only when the section shows cards:
In the Card rail section, when Content source is Products.
In the Mega menu block of the Header section, when Menu layout is Product cards and Maximum products is above 0.
In the Featured collection section, with every Product layout except Spotlight. Spotlight shows a list of product names beside one large photo, so only Show vendor and Show short description stay.
Settings
Setting
What it does
Card style
Plain, the default, shows the photo and the text on the section's background. On a panel puts each card on a rounded panel in the page background color, with a narrow border of that color around the photo. Use it when the section has a background color close to the page's, so each card stands apart.
Show vendor
The vendor's name in small text above the product title.
Show quick view button
A round button with an eye icon in the bottom left corner of the photo. It appears when the pointer is over the photo and always shows on touch screens. It opens quick view, a popup where customers choose options and add the product to the cart without leaving the page.
Show add to cart button
A round plus button beside the price, at the bottom right corner of the photo. For a product with several variants, it opens quick view. Turn it off to show the price alone. A sold-out product shows Sold out in place of the price and no button.
One-click add to cart
Shows when Show add to cart button is on. A product with one variant goes straight to the cart when a customer clicks the plus button, and the button turns into a quantity selector. Turn it off to make the plus button open quick view for every product. A product sold only as a subscription always opens quick view.
Show short description
A short line under the title. It comes from the product's subtitle metafield,
descriptors.subtitle, or from the first 20 words of its description when it has no subtitle. Show a short description on product cards explains how to fill it.Image hover effect
What the photo does when the pointer is over the card. Theme default uses Image hover effect in Product card settings. Gallery with dots switches between up to four of the product's images as the pointer moves across the photo, with dots under the photo. Second image shows the product's second image. Zoom enlarges the photo a little. None keeps it still. Touch screens show no effect, and a product with one image shows no gallery or second image.
Show score seal and Score seal metafield
A round seal with a scalloped edge over the top right corner of the card. The value of a product metafield fills its center and a short label runs around its edge. The seal shows only on products with a value in that metafield. Score seal metafield shows when Show score seal is on. Show a score seal on product cards has the steps.
Show product tag label and Product tag label prefix
A label on the photo, with text from a product tag. The card uses the first tag that starts with the prefix,
badge:by default, so the tagbadge:Best sellershows Best seller. Upper and lower case do not matter. Product tag label prefix shows when Show product tag label is on. Add a label such as Best seller to a product has the steps.Metrics
Up to two product details under the short description, one metafield per line. A rating metafield shows as bars or dots. A number or text metafield shows its value as text. A product with no value for a line skips it. Show product ratings as bars has the steps.
Score seal metafield and each line of Metrics take a metafield's namespace and key, a vertical bar and a label, such as
custom.score | Score. Without a label, a metric shows the key's name, such as Strength forcustom.strength.All the settings that turn something on are on by default, and Score seal metafield and Metrics are empty. A new section therefore shows the vendor, the quick view button, the add to cart button and the short description, and no seal or metrics until you enter a metafield. A tag label shows on any product that has a tag starting with
badge:.There is no Sale badge. A product with a compare-at price shows the old price crossed out before the new one. Product cards do not show color swatches.
How sections and Theme settings combine
Each section's Product cards group holds the settings in the table above, so two sections can show different details on their cards. Image hover effect is the only setting in both places. A section set to Theme default uses the effect chosen in Product card settings. The shape and crop of the photo, the look of the tag label, the product type and the look of ratings are set only there, for every card in the store.
The Product carousel block has Card style only, and no other setting from this group.