Product listing
Product listing controls what appears on product cards across the store, including tags, vendor, image ratio, hover media, swatches, and card buttons.
How to find it
In the Theme Editor, open Theme settings, then select Product listing.
Settings
View the settings guide .
Product information
| Setting | Options | Description |
|---|---|---|
| Show tags | • All screens | Controls whether product tags show on product cards: on all screens, on desktop only, or hidden. A card shows up to two tags. |
| Vendor | • All screens | Controls whether the vendor name shows on product cards: on all screens, on desktop only, or hidden. |
| Show rating | To display a rating, add a product rating app. Learn more ( https://help.shopify.com/en/manual/products/product-reviews/installation ) | |
| Content alignment | • Left | Aligns the text on product cards (tags, vendor, title and price) and the color swatches to the left, center or right. |
Product media
| Setting | Options | Description |
|---|---|---|
| Image ratio | • Adapt to image | Sets the shape of product images on product cards. The same ratio is also used for product images in the cart. |
| Show secondary image | Shows the product's second image when a shopper hovers over the card. It only applies to products that have at least two images. | |
| Play video on hover | Plays the product's uploaded video on hover. External videos are not used. |
Product options
| Setting | Options | Description |
|---|---|---|
| Enable color swatches | Shows color swatches for the color option on product cards and in collection filters. | |
| Maximum swatches to show | Limits how many swatches show on each product card. Extra colors collapse into a +N colors button, and product pages still show every value. | |
| Hide sold out variants | Hides option values that are sold out, such as a color or size, from the swatches and pickers. |
Card interactions
| Setting | Options | Description |
|---|---|---|
| Enable quick shop | Adds a quick shop button to product cards. Products with several variants open a quick view window instead of adding straight to the cart. | |
| Show countdown timer | Shows a countdown timer on product cards for products that have a date in their custom.promotion_countdown metafield. | |
| Show scrolling text | Shows a scrolling text strip on the card image for products that have text in their custom.highlights_scrolling_text metafield. |
Mobile
| Setting | Options | Description |
|---|---|---|
| Show quick add button on mobile | Shows the quick add button on product cards on mobile. When off, the button appears on desktop only. Works together with Enable quick shop. |
Show tags and Vendor set whether each one shows on all screens, on desktop only, or not at all.
Show rating needs a product rating app installed in your store.
Image ratio sets the shape of product images. Adapt to image keeps the shape of each image.
Show secondary image shows a second image when a visitor hovers over a card. Play video on hover plays the product's uploaded video on hover. External videos are not used.
Enable quick shop opens a quick view window from the card.
Show scrolling text and Show countdown timer add these elements to product cards.
Notes
Scrolling text shows the text in the product's custom.highlights_scrolling_text metafield. The countdown reads its end date from the custom.promotion_countdown metafield.
No comments yet