## 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](https://docs.foxecom.com/minimog-theme/theme-settings/product-options-swatches).
* **Color**: as set in Theme settings > [Product options swatches](https://docs.foxecom.com/minimog-theme/theme-settings/product-options-swatches).
* **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](https://docs.foxecom.com/minimog-theme/theme-settings/product-inventory "mention")
* **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](https://docs.foxecom.com/minimog-theme/getting-started/integrate-shopify-review-apps) 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](https://docs.foxecom.com/minimog-theme/faqs/collection-page/add-custom-badges-to-my-product-card).
### 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 ...**'
.png?alt=media&token=9168d917-bd02-4cd6-a7af-eb9896c7a5ef)
