Product Card
Product card can be found in the Theme settings ↗ section. Theme settings control the colors, typography and other common elements of your online store.
⬇️ On this page:
Product card: overview
Product cards allow you to customize the style of product cards which are displayed in sections. You can change the image ratio, enable and disable sr, alignment, image padding, borders, and shadows of these three types of section cards.
Here is an example of product cards showcasing dresses in our online store. There are multiple image ratios available to choose from (Adapt to image, Portrait, and Square). The Portrait one is used in the image below.
Shopify's resources:
Managing product card
To change the image ratio, enable the display of the secondary image on hover, product ratings, vendors, and the info about the product (dropdown or radios):
Steps:
- Navigate to Theme settings > Product Card.
- Image ratio - The image ratio for the product card:
- Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
- Portrait - Crops the images to use a 2:3 ratio.
- Square - Crops the images to use a 1:1 ratio.
- When checked, Show secondary image on hover displays another available product image on hover.
- Check the Show vendor box to show the vendors of your products.
- Check Show price varies to show the price range.
- Max variants displaying (does not apply to dropdowns) field allows you to specify the maximum number of variants displayed.
- Choose your Quick add option between Add to cart button, size swatch, and None.
- Save (3) them to see the changes on your live site.
