## Layout and image
### Card style
There are 5 styles to select from:
{% tabs %}
{% tab title="Style 1" %}
{% endtab %}
{% tab title="Style 2" %}
{% endtab %}
{% tab title="Style 3" %}
{% endtab %}
{% tab title="Style 4" %}
{% endtab %}
{% tab title="Style 5" %}
{% endtab %}
{% endtabs %}
### Content alignment
The product card's content can be set as center-aligned, left-aligned, or right-aligned.
### Image
* **Aspect ratio**: Set the suitable **Aspect ratio** for your image card. There are 4 options:
* Adapt to image
* 1:1 (square image)
* 3:4
* 4:3
* 16:9
* **Show video as featured image**: When checked, the product card shows a video (if the video is placed first in Shopify Products > [Product media](https://help.shopify.com/en/manual/products/product-media)).
* **Show second image on hover**: When checked, the second image in Product media is shown when customers hover over the product card.
* **Default thumbnail**: For **products without images**, you can set a **default thumbnail** by uploading an image or selecting one from your Shopify Files.
## Variant options
* **Show variant options**: Enable or disable showing variants in product items and how they display on the front store.
* **Show featured image**:
* When checked, the featured image shown in the product card is the first image as set in [Product media](https://help.shopify.com/en/manual/products/product-media).
* When unchecked, the image of the selected variant will be shown.
When the **Show variant options** setting is checked, you need to configure:
* **Option name**: Insert one product option you want to display on the product cards.
* **Option design**: Select how the variant options are shown:
* **Custom image**: as set in Theme settings > [Product options swatches](/minimog-theme/theme-settings/product-options-swatches.md).
* **Color**: as set in Theme settings > [Product options swatches](/minimog-theme/theme-settings/product-options-swatches.md).
* **Variant image**: as set in Shopify Products > Variants.
* **Button.**
* **Dropdown**.
For example, to show color swatches for the Product option named Color:
{% hint style="warning" %}
Only one product option can be shown on the product card.
{% endhint %}
## Content and Badges
Control what to show on the product card.
### Content
* **Add to cart button**: let customers add items to the cart without leaving the current page.
* **Quickview button**: let customers preview product information without needing to go to the product page.
* **Wishlist button**: let customers add their favorite products to the list.
* **Compare button**: let customers add products to the comparison page to check the differences and similarities among stores' products.
* **Countdown**: display time when there is an event for the product to release/discount.
* **Show product inventory**: display the product inventory as set in Theme settings > [Product inventory](/minimog-theme/theme-settings/product-inventory.md)
* **Actions when clicking Select options button**: It either pops up **Select options** dialogue or goes directly to the product page.
### Badges
* **Sale badge**: hide or show the sale badge in % discount or fixed amount or text.
{% tabs %}
{% tab title="Sale badge as Text" %}
{% endtab %}
{% tab title="Sale badge as %" %}
{% endtab %}
{% tab title="Sale badge as Fixed amount" %}
{% endtab %}
{% endtabs %}
* **Sold-out badge**: display badge to let customers know which products are out of stock.
{% hint style="info" %}
The sale badge and sold-out badge labels can be edited in **Actions** > **Edit default theme content**.
{% endhint %}
* **Reviews badge**: display ratings from the customers ([A review application](/minimog-theme/getting-started/integrate-shopify-review-apps.md) is required).
* **Custom badges**: display/hide other badges rather than sale and sold-out badges. To display custom badges, you need to add tags to your products, see [Product tags](/minimog-theme/faqs/collection-page/add-custom-badges-to-my-product-card.md).
### Product titles
* **Show vendor**: display vendor/brand names under the product title.
* **Capitalize product name**.
* **Product title line limit**: control the maximum line of the product titles as No limit/1 lines/2 lines/3 lines.
### Product prices
**Show lowest prices**: display the lowest prices of each product as '**From ...**'
---
# 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.foxecom.com/minimog-theme/theme-settings/product-card.md?ask=
```
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.