Product Card

In Shopify, a product card is a compact product preview that shows key information such as the product image, title, price, variants (e.g. color), badges, and other highlights. It helps customers quickly scan and compare products without opening the product detail page, improving usability and shopping speed.

Go to Theme settings > Product card to config it.

1. How to enable or disable Quick View on product cards?

Use Show quick view to turn the Quick View pop-up on or off for product cards.

2. How to show a second product image on hover?

Enable Show secondary image on hover to display an alternate product image when hovering over a product card.

3. How to control the number of product title lines?

Use Title maximum lines to limit how many lines the product title displays.
Set to 0 for auto lines. Enabling this option may affect the title hover effect.

4. How to change text alignment on product cards?

Use Text alignment to align product information to Left or Center.

5. How to display swatches and change product images on product cards?

Configure Swatch display mode, Show swatch type, and Swatch shape to control how swatches appear.
Enable Show variant image and choose Change product image on event (Hover or Click) to update product images when selecting swatches.

Note: You must add the option name you want to display as color or image swatches in Edit theme default content for this feature to work correctly.

6. How to limit the number of swatches shown?

Enable Enable swatch limit and set Maximum swatch to show.
Extra swatches will follow the action selected in Action after swatch view more is clicked.

7. How to remove the collection path from product URLs?

Enable Remove collection URL to remove the collection part from product URLs and keep links cleaner for SEO.