A mini-card is a product card on the catalog page of your store. Cartum allows you to customize the mini-card and display additional elements that make the card more informative for customers.
The above settings are made in Website → Design → Design editor → Product card on category page.
Size and style
Product card style — general appearance of the card in the catalog, available options: borderless, grid, cards.
Product card size — defines the size of the card in the catalog, available values: S, M, L.
Align elements — selects the type of items (name, price, variants, etc.) alignment on the mini-card.
Gift position on image — selects the position of the gift icon on the product photo in the mini-card.
Settings for images
Image proportions — defines the aspect ratio of the photo in the mini-card.
Show next image on hover — if enabled, when you hover over the catalog page, the second photo added to the product will be displayed.
Gray out items that are not available for purchase — if the action Purchase not available is selected for the product status, the photo will be displayed in grayscale.
Stretch images to fill the card — if enabled, the photo will be scaled to the card width.
Product title and price
You can set the font size and weight for the product name and price in the mini-card.
Max number of lines — defines the number of lines in the title. If you select 1-3, only the part of the title that fits on these lines will be displayed. If you select No limit, the entire title of any length is displayed.
Add to cart button and other elements
In this tab, you can configure the display of the Add to cart button on the product mini-card, add a quantity counter to the card, and enable the display of additional elements:
Product SKU, rating and reviews are enabled together;
Product availability status;
Brand.
Mini-card on hover
For displaying the catalog pages on the desktop version of the site, you can configure additional properties of the mini-card when you hover over it.
You can change the color of the border around the card, as well as display certain elements on hover and set their style.
When you hover over a mini-card, you can see the following information on it:
Product variant selector — you can select variants either by only color, or by all variant options;
Product attributes;
Wholesale prices;
Add to favorites icon;
Add to comparison icon.