# Product card **Steps** 1. In the theme editor (**Customize**), click **Theme settings.** 2. Locate **Product card.** 3. Make necessary changes. 4. **Save.** ## Layout and image ### Card style There are 5 styles to select from: ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-21%20at%2022.11.20_fA83QGMH.png) ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-21%20at%2022.11.47_e5JligD5.png) ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-21%20at%2022.12.05_oqriyqU2.png) ![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-21%20at%2022.13.07_e5eRNygM.png) ![image](https://docs-assets.foxecom.app/minimog-theme/image_XgOjSLC2.png) ### 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. ![image](https://docs-assets.foxecom.app/minimog-theme/image_0h44aX5w.png) ## 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: ![image](https://docs-assets.foxecom.app/minimog-theme/image_ceoeYSun.png) ![image](https://docs-assets.foxecom.app/minimog-theme/image_HNUsZhkP.png) Only one product option can be shown on the product card. ## 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) * **Actions when clicking Select options button**: It either pops up **Select options** dialogue or goes directly to the product page. ![image](https://docs-assets.foxecom.app/minimog-theme/image_rp1Nfvjc.png) ### Badges * **Sale badge**: hide or show the sale badge in % discount or fixed amount or text. ![image](https://docs-assets.foxecom.app/minimog-theme/image_VsAXasaI.png) ![image](https://docs-assets.foxecom.app/minimog-theme/image_98wikgDl.png) ![image](https://docs-assets.foxecom.app/minimog-theme/image_WprcRjqD.png) * **Sold-out badge**: display badge to let customers know which products are out of stock. ![image](https://docs-assets.foxecom.app/minimog-theme/image_NbSlwaYg.png) The sale badge and sold-out badge labels can be edited in **Actions** > **Edit default theme content**. ![](https://docs-assets.foxecom.app/minimog-theme/image_iFITHglC.png) * **Reviews badge**: display ratings from the customers ([A review application](https://docs.foxecom.com/minimog-theme/faqs/generic/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). ![image](https://docs-assets.foxecom.app/minimog-theme/image_J8Qy0Lm5.png) ### 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. ![image](https://docs-assets.foxecom.app/minimog-theme/image_6huc0DQy.png) ### Product prices **Show lowest prices**: display the lowest prices of each product as '**From ...**' ![image](https://docs-assets.foxecom.app/minimog-theme/image_SIGqXvMC.png)