# Product cards

![](https://docs-assets.foxecom.app/documentation/08f40c09-f97d-48b1-bb3d-9d3bd18df3d8.png)

**Product cards** appear throughout your storefront, including collection pages, featured collections, search results, and product recommendations.

Use these settings to customize how product cards look and what information and actions they display.

## Card style

Customize the overall appearance of product cards.

<Table widths="30%">
  | Setting          | Description                                                                                                 | Options               |
  | ---------------- | ----------------------------------------------------------------------------------------------------------- | --------------------- |
  | **Style**        | Choose how product cards are displayed.                                                                     | Default / Box         |
  | **Color scheme** | Choose the color scheme used for boxed product cards. This setting is available only when **Style \= Box**. | Select a color scheme |
</Table>

<Tabs>
  <Tab title="Default style">
    Place products directly on the page background

    ![](https://docs-assets.foxecom.app/motrix-theme/9d966152-216f-4b0b-a8da-87f18fa06eb3.png)
  </Tab>

  <Tab title="Box style">
    Displays each product inside a separate container.<br/>![](https://docs-assets.foxecom.app/motrix-theme/e8485830-ff8f-464f-b8d1-1ec8943a8742.png)
  </Tab>
</Tabs>

## Media

Control how product images appear on product cards.

<Table widths="30%">
  | Setting                           | Description                                                                                                                                                                                                                                           | Options             |
  | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
  | **Aspect ratio**                  | Choose whether to preserve each product image's original proportions or crop images to a consistent shape.                                                                                                                                            | Auto / Fixed ratios |
  | **Corner radius**                 | Control how rounded the corners of product images appear.                                                                                                                                                                                             | 0px - 32px          |
  | **Extend image to the card edge** | Extend the image to the card's edge by removing the space around it while keeping the card padding around the text below. <br /><br />This setting applies **only to the vertical layout**; cards with the image beside the content remain unchanged. | On / Off            |
  | **Show second image on hover**    | Show the product's second image when customers hover over the product card on desktop.                                                                                                                                                                | On / Off            |
</Table>

<Tabs>
  <Tab title="Extend image to the card edge - On">
    <img height="0" width="0" src="https://docs-assets.foxecom.app/motrix-theme/0fffb296-9880-4a2c-be16-ca173ac15d64.png" />![](https://docs-assets.foxecom.app/motrix-theme/0fffb296-9880-4a2c-be16-ca173ac15d64.png)
  </Tab>

  <Tab title="Extend image to the card edge - Off">
    ![](https://docs-assets.foxecom.app/motrix-theme/149f8f41-7fb5-4978-8a9b-42ded65bf871.png)
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Show second image on hover - On">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/f90cb116-2223-4c84-8bde-7a308408872f.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Show second image on hover - Off">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/58e9f338-9e07-4e25-b69e-dbc9142be8dc.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>
</Tabs>

## Content

Choose which product information appears on each product card.

<Table widths="30%">
  | Setting                 | Description                                         | Options               |
  | ----------------------- | --------------------------------------------------- | --------------------- |
  | **Alignment**           | Align product information within the card.          | Left / Center / Right |
  | **Show product vendor** | Display the product vendor above the product title. | On / Off              |
  | **Show product type**   | Display the product type on the product card.       | On / Off              |
</Table>

<Tabs>
  <Tab title="Alignment - Left">
    ![](https://docs-assets.foxecom.app/documentation/8380c999-ea69-49b1-8274-8db40fb78c2a.png)
  </Tab>

  <Tab title="Alignment - Center">
    ![](https://docs-assets.foxecom.app/documentation/1e22c2c2-58c5-40e5-960a-718f35905d74.png)
  </Tab>

  <Tab title="Alignment - Right">
    ![](https://docs-assets.foxecom.app/documentation/d1e4a175-9aa4-44f5-870f-25523eadfe7c.png)
  </Tab>
</Tabs>

<Columns>
  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/7d6fc866-baca-4348-b6c4-4f398dd43b57.png" />

      <Figcaption>
        Show product vendor
      </Figcaption>
    </Figure>
  </Column>

  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/f3a82b8e-3f2e-427e-b6e0-56593b14a7f3.png" />

      <Figcaption>
        Show product type
      </Figcaption>
    </Figure>
  </Column>
</Columns>

## Badges

Control how badges appear on product cards.

<Table widths="30%">
  | Setting                  | Description                                                                                                            | Options                                                                                                |
  | ------------------------ | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
  | **Layout**               | Choose how multiple badges are arranged on the product card.                                                           | Vertical / Horizontal                                                                                  |
  | **Show custom badges**   | Display custom badges configured in [<u>**Theme settings > Badges**.</u>](https://docs.foxecom.com/motrix-theme/theme-settings/badges) | On / Off                                                                                               |
  | **Show sold out badge**  | Display a badge when a product is out of stock.                                                                        | On / Off                                                                                               |
  | **Show sale badge**      | Display a badge for discounted products.                                                                               | On / Off                                                                                               |
  | **Sale badge type**      | Choose how the discount is displayed on the sale badge.                                                                | Text / Percentage / Fixed amount                                                                       |
  | **Sale badge placement** | Choose where to display the sale badge.                                                                                | **Media**: Show badges on product image <br /><br />**Content**: Show badges below product information |
</Table>

<Tabs>
  <Tab title="Layout - Vertically ">
    ![](https://docs-assets.foxecom.app/documentation/18151a99-bbd0-4b4e-8084-7e6fa439f2e1.png)
  </Tab>

  <Tab title="Layout - Horizontally">
    ![](https://docs-assets.foxecom.app/documentation/0e3d8a80-bb9b-4f85-addd-a19762419716.png)
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Sale badge type - Text">
    ![](https://docs-assets.foxecom.app/documentation/c8381eba-d2cc-4feb-8f99-923d3bedabed.png)
  </Tab>

  <Tab title="Sale badge type - Percentage">
    ![](https://docs-assets.foxecom.app/documentation/6d0c6036-1053-4c6f-93b2-8f0668ee105d.png)
  </Tab>

  <Tab title="Sale badge type - Fixed amount">
    ![](https://docs-assets.foxecom.app/documentation/3f680f06-9cc6-44fe-ba66-cd64df485be4.png)
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Sale badge placement - Media">
    ![](https://docs-assets.foxecom.app/motrix-theme/d424023a-b774-42e7-bdfa-bf21b185d9d6.png)
  </Tab>

  <Tab title="Sale badge placement - Content">
    ![](https://docs-assets.foxecom.app/motrix-theme/3017127d-5976-4065-a9e4-1dc6f3ff68bb.png)
  </Tab>
</Tabs>

<Hint type="info">
  **Custom badges** such as New, Hot, and Popular are shown **only when the product is in stock**. <br /><br />When a product is sold out, the **Sold out** badge is shown instead, and other custom badges are hidden.<br />

  **Sale** and **Sold out** badges are displayed automatically based on the product's pricing and availability. Control whether these badges appear from **Theme settings →** [**Product cards**](https://docs.foxecom.com/motrix-theme/theme-settings/product-cards).
</Hint>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/badges">
  Learn more: How to set up Badges
</PageLink>

## Swatches

Control how product variant swatches appear on product cards.

<Table widths="30%">
  | Setting               | Description                                                            | Options     |
  | --------------------- | ---------------------------------------------------------------------- | ----------- |
  | Show swatches         | Show or hide color swatches on product cards.                          | On / Off    |
  | Show variant images   | Use variant images instead of colors or patterns for swatches.         | On / Off    |
  | Swatch width          | Set the size of each swatch.                                           | 20px -100px |
  | Maximum items to show | Limit the number of visible swatches before displaying a +N indicator. | 1 - 6       |
</Table>

<Columns>
  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/motrix-theme/1cc3bd8c-6630-487e-880e-1012a7a59998.png" />

      <Figcaption>
        Show swatches
      </Figcaption>
    </Figure>
  </Column>

  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/motrix-theme/6f455cfa-61e6-424a-8835-4c4bbb8d5b6d.png" />

      <Figcaption>
        Show variant images
      </Figcaption>
    </Figure>
  </Column>
</Columns>

## Actions

Configure **quick shopping features** available on product cards.

### Quick add

<Table widths="30%">
  | Setting                      | Description                                                                                                                                             | Options                  |
  | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
  | **Show quick add**           | Show or hide the Quick Add button on desktop devices.                                                                                                   | On / Off                 |
  | **Show quick add on mobile** | Show or hide Quick Add on mobile devices.                                                                                                               | On / Off                 |
  | **Quick add placement**      | Choose where to display the Quick Add button. <br /><br />When placed on the product image, the button appears when customers **hover** over the image. | Below content / On Media |
  | **Quick add style**          | Choose the button style when Quick add placement is set to On product image. This setting applies to desktop only.                                      | Text only / Icon only    |
  | **Quick add color scheme**   | Choose the color scheme used for the Quick Add button.                                                                                                  | Select a color scheme    |
</Table>

<Figure>
  <img src="https://docs-assets.foxecom.app/documentation/173f2285-2a52-432d-a8da-19378a059f9f.png" />

  <Figcaption>
    Quick add buttons
  </Figcaption>
</Figure>

<Tabs>
  <Tab title="Quick add placement - Below content">
    ![](https://docs-assets.foxecom.app/documentation/ed6c99c3-09b9-4b3c-b915-4d67df0257a2.png)
  </Tab>

  <Tab title="Quick add placement - On media">
    ![](https://docs-assets.foxecom.app/documentation/334d3541-1ea3-423d-a420-4ed6f1b125db.png)
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Quick add style - Text only">
    ![](https://docs-assets.foxecom.app/documentation/5b0c7cd2-eb12-4431-a7ed-bdd6d100df24.png)
  </Tab>

  <Tab title="Quick add style - Icon only">
    ![](https://docs-assets.foxecom.app/documentation/e2ea9497-ddb2-4e86-9518-11cdf737f6bc.png)
  </Tab>
</Tabs>

### Quick view

<Table widths="30%">
  | Setting                       | Description                                                                  | Options               |
  | ----------------------------- | ---------------------------------------------------------------------------- | --------------------- |
  | **Show quick view**           | Let customers preview a product in a popup without leaving the current page. | On / Off              |
  | **Show quick view on mobile** | Enable Quick View on mobile devices.                                         | On / Off              |
  | **Quick view color scheme**   | Choose the color scheme used for the Quick View button.                      | Select a color scheme |
</Table>

<Figure>
  <img src="https://docs-assets.foxecom.app/documentation/f3360b7c-f4ca-4f0d-a2fa-19b8d7900e35.png" />

  <Figcaption>
    Quick view icon
  </Figcaption>
</Figure>