# Set up for product card

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings -> Product card**

<table><thead><tr><th width="359"></th><th width="408">Description</th></tr></thead><tbody><tr><td>Image ratio</td><td><p>Select the image ratio type for the product card:</p><p> <br><mark style="color:orange;"><strong>Adapt to image:</strong></mark> the image size on product card will scale according to the image actual size. <br><mark style="color:orange;"><strong>Portrait:</strong></mark> The image of the product card will have a height more than its width. The ratio of the width and height can be adjusted with the "Image height (%)" setting below. <br><mark style="color:orange;"><strong>Square:</strong></mark> The image of the product card will be a square. </p></td></tr><tr><td>Portrait aspect ratio</td><td>Fill in the desired ratio of the height of the product card media in %.<br><br><em><mark style="color:orange;">Note: Use for portrait ratio.</mark></em></td></tr><tr><td>Image fit</td><td><p>Select the image fit type for the product card:</p><p><br><mark style="color:orange;"><strong>Original:</strong></mark> The image will keep its current scale ratio to adapt. <br><mark style="color:orange;"><strong>Fit conten</strong>t<strong>:</strong></mark> The image will scale to cover up the full area of set product card image with retained ratio. <br><mark style="color:orange;"><strong>Fill:</strong></mark> The image will scale to scale up until the width or height reached the width or height of the set product card image with retained ratio.</p></td></tr><tr><td>Enable image swap</td><td>Toggle the functionality when the product card image is hovered, it will swap to the second image. </td></tr><tr><td><p>Play video on hover</p><p>Only works with MP4 video.</p></td><td>The same as Product Image Swap but for video if there is any mp4 video attached to the product. </td></tr><tr><td>Enable product image loading effect</td><td>Toggle the display of placeholder when the image is being loaded due to lazy load.</td></tr><tr><td>Show vendor</td><td>Toggle to show or hide product vendor.</td></tr><tr><td>Show price</td><td>Toggle to show or hide product price.</td></tr><tr><td>Show price percentage</td><td>Toggle to show or hide the percentage by which the product price has been discounted.</td></tr><tr><td>Show size variants</td><td>Toggle to show or hide product size variant.</td></tr><tr><td>Size variant style</td><td><p>Select the style for the product card size variant:</p><p><br><mark style="color:orange;"><strong>Style 01</strong></mark><br><mark style="color:orange;"><strong>Style 02</strong></mark></p></td></tr><tr><td>Show text 'more sizes available'</td><td>Toggle to show or hide text "more sizes available".</td></tr><tr><td>'More sizes available' text size</td><td>Determine the font size for the text 'more sizes available'.</td></tr><tr><td>Show the color name in the product name</td><td>Toggle to show or hide the color variant name after the product name.</td></tr><tr><td>Color name style</td><td>Select the style for the color variant name after the product name on the product card:<br><br><mark style="color:orange;"><strong>Style 01</strong></mark><br><mark style="color:orange;"><strong>Style 02</strong></mark></td></tr><tr><td>Color name size</td><td>Determine the font size for the color variant name after the product name on the product card.<br><br><em><mark style="color:orange;">Note: Only for color name style 2.</mark></em></td></tr><tr><td>Show compare</td><td>Toggle the display of compare checkbox on product card.</td></tr><tr><td>Hide compare on home page</td><td>Toggle the display of compare checkbox on product card for homepage.</td></tr><tr><td>Compare style</td><td><p>Select the display type of product compare on product card:</p><p><br><mark style="color:orange;"><strong>Default</strong></mark><br><mark style="color:orange;"><strong>Icon</strong></mark></p></td></tr><tr><td>Show wishlist</td><td>Toggle to show or hide product wishlist on tablet and desktop.</td></tr><tr><td>Show wishlist on mobile</td><td>Toggle to show or hide product wishlist on mobile.</td></tr><tr><td>Show background for icon</td><td>Toggle to show or hide background for wishlist icon.</td></tr><tr><td>Show quick view</td><td>Toggle to show or hide product quick view on tablet and desktop.</td></tr><tr><td>Show quick view on mobile</td><td>Toggle to show or hide product quick view on mobile.</td></tr><tr><td>Quick view style</td><td><p>Select the display type of quick view button on product card:</p><p><br><mark style="color:orange;"><strong>Default:</strong></mark> The quick view button is shown in the center of the product card when hovered.<br><mark style="color:orange;"><strong>Icon:</strong></mark> The quick view eye icon button is grouped with the wishlist button to the right of left side. </p></td></tr><tr><td>Quick view &#x26; wishlist position</td><td>Select the desired position of the quick view and wishlist buttons cluster either on the right or left side of product card.</td></tr><tr><td>Content alignment</td><td>Select the desired position of content on the right or left side or center of product card.</td></tr></tbody></table>

## Product image swap

**Product image swap** is a feature which allows adding a product image hover effect. In other words, it flips or changes a product image on hover.

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FPfcstBeTVALjBndF66Qz%2F12.gif?alt=media\&token=3840510e-11ab-437f-886f-2bcdc2318eda)

## Product video swap

**Product video swap** is a feature which allows adding a product video hover effect. In other words, it plays a product image on hover.

{% hint style="info" %}
This feature works with products having MP4 video only.
{% endhint %}

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F0EvZFnzic2PgYFXPvTgS%2F13.gif?alt=media\&token=b0a0d345-5e87-4f4d-9982-b1072070e83a)

## Product image loading effect

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FWh29hedaN6ePm9YGJJVt%2F14.gif?alt=media\&token=3d4b31bb-3338-468d-a291-096342e1d7ac)