Skip to main content
All CollectionsDesign editor
Product mini-card settings
Product mini-card settings

Customizing product card appearance on catalog pages

Updated this week

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.

Product mini-card settings in the design editor — Cartum

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, modifications, 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.

Mini-card size and style settings — Cartum

Налаштування для фото

  • 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.

Product title and price settings — Cartum

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.

Add to cart button and other elements settings — Cartum

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.

Mini-card on hover settings — Cartum

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 characteristics;

  • Wholesale prices;

  • Add to favorites icon;

  • Add to comparison icon.

Did this answer your question?