> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/theme-settings/product-card/set-up-for-product-card.md).

# 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.

![](/files/ugZf8WJHjKaMpEAgGCmN)

## 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 %}

![](/files/qhU6srE236qAooSR3sFN)

## Product image loading effect

![](/files/8plk3IqOYgZBTaGo6bqV)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/theme-settings/product-card/set-up-for-product-card.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.