Product card
Product card image settings
Image aspect ratio and image sizing rule settings work together to give you the full control on how the product card image is shown. If image aspect ratio is set to Natural the sizing rule won't have any effect.
Image aspect ratio forces the product card image container to keep the selected aspect ratio no matter the image size. This helps you to create even grids with various image sizes as your products featured images.
Image sizing rule is used to determine how the product image fills the given space set by the image aspect ratio value. It can either:
- Fill the available space (cropping may occur)
- Fit into available space (no cropping)
Product card visibility settings
Other settings for product card content visibility and text alignment are:
- Text alignment
- Show vendor
- Show second image on hover
- Enable quick buy
- Enable badges
- Color swatches
Product card badges
When badges are enabled the following badges are shown in both product cards and on the product page.
- NEW: Show with the tag "new".
- PRE-ORDER: Shown with the tag "preorder"
- SALE: Shown with the products that are on sale (price is lower than compare price)
Badge texts can be edited from theme translations under Product > Badges. Badge colors can be edited from Theme Settings > Colors > Badges
Preorder
Add to cart button can be replaced with Preorder button when the product has "preorder" tag. The button is automatically changed to Preorder when the inventory level is 0 and continue selling when out of stock option is turned on in the product settings.
Pre-order badge is also shown when the product has a "preorder" tag.
Color swatches
You can enable color swatches in the product card settings panel. When enabled the color variants will be shown as color dots on the product cards, product page and in the filtering drawer.
Color option name trigger can be edited from theme translations and it defaults to "Color". Search for "color swatch identifiers" in online store "Edit Languages" view.
We suggest also adding storefront filter for the color option. Learn how to.
Custom images for color swatches
By default swatch colors are automatically generated based on the color option value. This means that e.g. black generates color black and blue creates blue:
Default color swatch for blue and black variants:
However, these default colors are not always ideal. For that reason you can override these colors by uploading a file to Files section of your store.
If you wish to override the color black, then you should create a file named black.png or black.jpg and upload it to Files. For color names with space, replace all spaces with a dash. For example "Midnight Black" should be midnight-black.png or midnight-black.jpg
Note: Make sure that file name is always written in lowercase.
Blue and black color swatches with custom images:
