Customize how your products appear on collection pages and throughout your store.
Image Display
Image aspect ratio: Choose between Square (1:1), Portrait (2:3), Portrait (3:4), Landscape (4:3) or Natural aspect ratios. The Natural option maintains the original proportions of your product images.
Media fit: Select how images fill the card space - choose Fill to cover the entire area or Original to maintain the image's natural dimensions.
Image padding: Adjust the spacing around product images.
Layout Options
Text position: Position product information either inside the card or outside the card for better readability.
Text alignment: Align product titles and details to the Left, Center, or Right to match your store's design aesthetic.
Additional Information
Show vendor: Toggle to display or hide the product vendor name on product cards.
Show second image on hover: Enable this to show the second product image when customers hover over the card, giving them a better preview.
Show rating stars: Display product ratings directly on cards. Note: This only works with ratings via standard metafield definitions - ensure your product rating/reviews app provider follows Shopify guidelines.
Show badges: Toggle to show product badges on product cards. With the Badges position setting you can control the position of the badges. See also more detailed information about Product Badges.
Title and Price Typography
You can select the font type used for product card titles and define sizes for mobile and desktop views. Uppercase can also be enabled for titles.
For prices, you can select the font weight and define sizes for mobile and desktop views. The font weight options are Regular, Bold sale price and Bold. Bold sale price only makes the price bold on products with a compare-at price. The font weight also applies to upsell cards, gallery product links and the quick buy modal.
Quick View
Enable quick view button: Add a quick view feature that lets customers preview product details and add the product to the cart without leaving the page.
Quick view button mode: Select between "Add to cart" and "Quick view". Add to cart enables direct add to cart for products that have only one variant. When a product has multiple variants, the quick view modal is shown for variant selection.
Quick buy visibility: Select between "Show on hover" and "Always visible".
Button style: Primary or Secondary.
Show sibling products in quick view: Shows the product's sibling products in the quick view, so customers can switch to another color or style without leaving the page. It also applies to products with several variants in Add to cart mode, since they open the quick view for choosing a variant.
-
Sibling products display style: Images or Labels. To set the label text, add a
custom.sibling_labelproduct metafield. Without it, the product title is used. - Sibling products position: Before the variant options or after the add to cart button.
- Sibling products title: For example "Also available in". Leave empty to hide the title.
The variant picker in the quick view follows Theme settings → Variant picker. See Variant picker.
Color Swatches
You can enable color swatches in the product card settings panel. When enabled the color variants will be shown as color dots on the product cards, product page and in the filtering drawer.
Color option name trigger can be edited from theme translations and it defaults to "Color". Search for "color swatch identifiers" in online store "Edit Languages" view.
We suggest also adding storefront filter for the color option. Learn how to.
Custom images for color swatches
By default swatch colors are automatically generated based on the color option value. This means that e.g. black generates color black and blue creates blue:
Default color swatch for blue and black variants:
However, these default colors are not always ideal. For that reason you can override these colors by uploading a file to Files section of your store.
If you wish to override the color black, then you should create a file named black.png or black.jpg and upload it to Files. For color names with space, replace all spaces with a dash. For example "Midnight Black" should be midnight-black.png or midnight-black.jpg
Note: Make sure that file name is always written in lowercase.
Blue and black color swatches with custom images:
Variant Availability
Show variant availability: Display stock status for a single variant option. By default, this shows "Size" availability, but you can customize it through theme translations: Products > Card availability option trigger.
Advanced Settings
Metafields to show: Display additional product information from custom metafields (Add a comma separated list of "namespace.key" values).
