> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/cards/product-card-compact.md).

# Product card: Compact

A small horizontal product card — thumbnail, title, price, and an add-to-cart button in a single row. Built for shoppable banners, hotspots, and popups where a full product card would be too large.

| Setting                      | Description                                                                                                                                                                     |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Product                      | The product to display. Uses the selected or first available variant for its image and price.                                                                                   |
| Enable boxed layout          | Wraps the card in a container with its own border, corner radius, shadow, and color. Turn off for a bare card that sits directly on the background.                             |
| Image ratio                  | Thumbnail crop: Original, Square, Portrait, or Landscape.                                                                                                                       |
| Desktop width / Mobile width | Thumbnail size per device.                                                                                                                                                      |
| Show price                   | Display the variant price next to the title.                                                                                                                                    |
| Auto position price          | Places the price beside the title instead of below it, matching the title width.                                                                                                |
| Desktop gap / Mobile gap     | Space between the title and the price.                                                                                                                                          |
| Show add to cart button      | Adds a one-tap add-to-cart button at the end of the row.                                                                                                                        |
| Button style                 | Primary, Secondary, Outline, or Subtle.                                                                                                                                         |
| Gap                          | Space between the thumbnail and the content — set separately for desktop and mobile.                                                                                            |
| Device                       | Switches the Size settings below between **Desktop** and **Mobile** values.                                                                                                     |
| Width                        | **Fill** the container or a **Custom** percentage, with an optional **Limit width** / **Max width** cap.                                                                        |
| Appearance                   | Border thickness, corner radius, and shadow. Boxed layout only.                                                                                                                 |
| Color                        | **Inherit** the section's color scheme, or apply a separate **Color scheme**. When inheriting, an **Overlay** with color and **Backdrop blur** is available. Boxed layout only. |
| Animation                    | Entrance effect (Fade, Scale, Slide from left / right / bottom) played on scroll, with an optional **Delay**.                                                                   |
| Padding                      | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**.                                                                                          |

{% hint style="info" %}
The card adds the selected variant straight to the cart — it has no variant picker. For products with several options, point shoppers to the product page instead.
{% endhint %}