# Mini product

Mini cards are a [theme bock](https://docs.ultramarinastudios.com/theme-settings/broken-reference), 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.

| Option 1: Card style                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Option 2: List style                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FxYpTq0Ty48oRTJUVDYSh%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%5BTHEME%20BLOCKS%5D%20%C2%B7%20Shopify%202025-04-01%20at%202.54.09%20pm.jpg?alt=media&#x26;token=c4c30150-2518-4a62-baa3-adab125df70e" alt="" data-size="original"><br></p><ul><li>The product is added to cart on click, unless it has variants in which case the quick add popup opens.</li><li>You can also customize the color scheme to make it stand out from the rest of the page.</li></ul> | <p><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FyhQYg6O7NeJqC4VW0LOP%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%5BTHEME%20BLOCKS%5D%20%C2%B7%20Shopify%202025-04-01%20at%202.52.54%20pm.jpg?alt=media&#x26;token=0fc89aa8-4dd6-47d5-8b01-2c80431ebed7" alt="" data-size="original"><br></p><ul><li>The mini product simply links to the product</li><li>The mini product takes on the parent element's color scheme</li></ul> |

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

* **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 [font style](https://docs.ultramarinastudios.com/common-settings#font-style)
* **Price font:** Choose a [font style](https://docs.ultramarinastudios.com/common-settings#font-style)
* **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.&#x20;
  * **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.&#x20;
  * **Maximum image width:** This setting allows you to finetune how much space the image will take up in your cards.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ultramarinastudios.com/theme-settings/mini-product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.