Mini product
The mini product card is displayed in contexts where there may not be enough space for a full product card.
Last updated
The mini product card is displayed in contexts where there may not be enough space for a full product card.
Last updated
Mini cards are a theme bock, reusable across many sections. They also appear in the product templates complementary products and cart upsells, with slightly different settings.
Wherever you use mini products, you can choose between two styles (card or list) and, if card is selected, you can apply a color scheme at the block level.
The product is added to cart on click, unless it has variants in which case the quick add popup opens.
You can also customize the color scheme to make it stand out from the rest of the page.
The mini product simply links to the product
The mini product takes on the parent element's color scheme
The following settings determine the look of each of these styles.
Note that while the following settings are global, some of them may be overriden at a section level in order to give you more flexibility. For example, in the Cart and Cart drawer, mini product cards always inherit the section's product title font, product price font and image width in order to better match cart items.
Minimum card width: allows you to control the width of mini product cards. If your product titles are very long or very short, you can adjust this setting so that they take up the appropriate amount of space. In certain places, e.g. the cart drawer, mini products take up full width.
Title font: Choose a
Price font: Choose a
Card style:
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.
Maximum image width: This setting allows you to finetune how much space the image will take up in your cards.
Quick add button style: Choose between primary, secondary or text
Show borders: Enabling show borders will add an outline around the card and between the image and the text.
Enable blur: If the background of the color scheme (selected at the block level) has transparency, a blur will be applied.
List style:
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.
Maximum image width: This setting allows you to finetune how much space the image will take up in your cards.
