Product card
The product card settings apply to all product cards across the theme.
Last updated
The product card settings apply to all product cards across the theme.
Last updated
Product cards may appear in collections or in sections such as the 'Related products' or 'Featured collection' section.
Image ratio: The Image ratio allows you to choose between adapt, which uses the default aspect ratio of the image, or a square or portrait aspect ratio.
Title font: Select a font style for the title font.
Price font: Select a font style for the price font.
Show zero price as free: Enabling this option will change the price display of free items from '$0' to 'Free'. If you need to change this text, you can do so in the translation settings for your theme.
Enable quick add: this allows customers to quickly add the product to their cart without having to click through to the product page. If the product has variants, a quick add modal will be opened, otherwise, the item will be immediately added to the cart. We don't recommend enabling this option if you have a complex purchase flow and/or need customers to review the full product page before purchasing.
Enable collection-aware product links: when enabled, products within collections or the Featured collection section (when a collection is selected instead of individual products) will link to full collection-aware links, e.g. /collections/new-in/products/dress. This is particularly useful if you plan to add to your product pages.
Be aware that, per Shopify's , because a standard product page and a product page in the context of a collection have the same content on separate URLs, you should consider the SEO implications of using the withinfilter.
Show product subtitle: this will enable the display of product subtitles in the product card. Read our guide on for more information.
Show second image on hover: When this is enabled, hovering over the product will show the second product image if one is available.
Show vendor: This will display the product's vendor in the card. This is useful for stores that might sell products from many different brands.
Show product ratingL Displays a star rating if a value exists for the product.metafields.reviews.rating, which is conventionally used by most third-party review apps to store rating data.
You can choose to display a product's variant options in the product card.
Display style: Options are None, Always visible, which means that the variant options are always displayed below the product title and price or On hover/focus, which places the variant options to the right of the title and only displays them when the product card is hovered. On smaller screens or touch devices, variant options default to Always visible.
Color display style: Allows you to display any variant option that matches the option names Color or Colour (regardless of letter-casing). You can choose between None, Count (e.g. 2 colors available) or List which either displays the option names (Red Green Blue) or, if a swatch is available, it displays the swatch itself. Useful resources: - Check out Shopify's documentation on . - If you wish to change the shape of the swatches globally, this can be edited in . - See for how to translate option names for variant display in different languages.
Size display style: Allows you to choose between None, Count (e.g. 2 sizes available) or List, which displays the option names as a list (Small Medium Large).
Other display style: Accounts for other variant options that you may want to display, for example Metal Color for jewelry. As with color and size above, you choose None, Count or List for display style. If a swatch is set up for the option, just like Color it will display as such when List is selected.
To specify the option names you wish to display, as well as the pluralized text if you choose the Count option (e.g. 2 metal colors available), go to Online Store > Themes > Edit default theme content, search for option_name and under Product variants other, add the variant option to the comma-separated list with the following syntax: option:pluralized option name . Your final field might look like this:
bracelet size:bracelet sizes,metal color:metal colors,option:options
Limit list count: Allows you to limit the number of options that are listed if you select List for any of the variant options. Keep at 0 to disregard setting.
For example, for French you would first translate the variant options. In the app, select Localized content: French > Products and for each product you would edit the Option name and Option values if necessary.
Then, still in the Translate & Adapt app, select Default theme content and update the relevant fields. For example, to make sure your color variant displays, add a translation in the Product variants color field (Couleur) and if you chose the List display style for color, ensure you add a translation for {{ count }} colors available, e.g. {{ count }} tailles.
Product badges can be used to highlight secondary information about a product. Common product badges include things like 'Limited', 'Sale' or 'New'.
Display: The display options for product badges include none, overlay image or below image. Overlay image will place the badges directly over the image. This is not recommended if you have many badges or if your image contains important details near the edge. Below image will place the badges above the title on smaller screens, and to the right of the product title if there is enough space.
Style: You can choose between the primary, secondary or text style for the badges display.
Show sale badge: Enabling the sale badge will automatically display a badge if the product's price is less than the compare-at price.
Show sold out badge: Enabling the sold out badge will automatically display a sold out badge if the product's inventory status is unavailable.
If you wish to display variant options in other languages, you will need to use the app to first translate the option names, then translate the theme strings.
Show custom badges: This will display all custom badges for a product, which can be set using metafields. Read our guide on .