Product listings

Product listings are grids or rows of products displayed on collection pages and in theme sections. Each product card displays the product's image, title, and price.

Customize product card style

In your theme editor, go to Theme settings > Product listings. You can change the general appearance of listings, enable Quick view and Quick add buttons, and customize the style of images, prices, and product badges.

Product card elements

You can choose to show vendor names, swatches, and an inventory status message on product cards. You can also show Product subtitlessee instructions below to set up product subtitles using metafields.

Quick view and Quick add

Display buttons to allow customers to view product details and add products directly to their cart.

Appearance

Change the overall appearance, including the color, layout, and alignment of product cards.

Images

Change the shape (aspect ratio) and fit of the product images, and enable a secondary image on hover.

Prices and discounts

Change how the product prices and discounts are displayed.

Product badges

Choose whether to show sale, sold out, and custom badges on the products.

To set up custom product badges, including colors and labels, see our Product badges guide.

Add product subtitles with metafields

You can display a Product subtitle beneath the main title on product cards. This feature uses a standard “Product subtitle” metafield, which you can enable in the Custom data settings of your Shopify admin.

Note Metafields allow you to store extra information about your products. In your Shopify admin, you can create and populate custom fields for specific parts of your store (such as products). In your theme editor, you can use dynamic sources to automatically display the correct content from your metafields.

STEPS

In your Shopify admin:

  1. Go to Settings > Custom data.

  2. Select Products.

  3. Click Add definition.

  4. In the Name field, search and select “Product subtitle”.

    The Product subtitle is a standard metafield, which means it’s automatically configured by Shopify and design to be compatible across all Shopify stores.

  5. (Optional.) You can choose to enable Features to expand how you can use the metafield in your Shopify admin.

    To use this metafield as a filter for searching your products in the Shopify admin, select Use as filter in admin.

    To allow this metafield to be used for creating automated collections, select Use in automated collections.

  6. Click Save.

To populate the Product subtitle metafield:

  1. From your Shopify admin, go to Products and open the products that you want to add subtitles.

  2. Scroll down to the Metafields area, and enter a short subtitle in the Product subtitle field.

  3. Click Save.


Related links

Theme settings Product badges Quick view Swatches

Last updated