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

# Product cards

In this section, you can find general settings for the quick shop on Collection pages and sections that include collections.

**Use custom image height**\
Activate the option to display the height settings.

**Height**\
The image height of product cards in collections and images in a product gallery on product pages can be adjusted using a scale from 0% to 170%.

{% hint style="warning" %}
**Note!** On desktop devices, hover over a product card to reveal navigation arrows and browse product images.\
The arrows are hidden when a product variant is selected from the product card options.\
By default, image navigation is not displayed on mobile devices.
{% endhint %}

**Show image controls**\
Activate the option to display the navigation arrows on product cards.

**Control position**\
Determine the position of navigation arrows by using one of the options in the drop-down:

**Center:**

* **"On the sides"**. This option displays overlay arrows on product cards, which are centered on the right and left sides.

**Bottom:**

* **"Right"**. This option allows you to place navigation buttons on the bottom right of product cards.
* **"Center"**. Position buttons at the bottom center of product cards using this option.
* **"Left"**. Sets buttons at the bottom left overlaid on the product cards.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F4sVQC69J2oG7Ag2bQ7tS%2Fproduct%20cards_image%20controls.png?alt=media&amp;token=b1aed84e-ddad-47d6-a510-bea979902eec" alt=""><figcaption></figcaption></figure>

#### **Button layout**

{% hint style="warning" %}
**Note!** The "[<mark style="color:blue;">Add to Cart</mark>](#add-to-cart-button)" button, "[<mark style="color:blue;">Quick View</mark>](#quick-view-button)" button, and "[<mark style="color:blue;">Quantity selector</mark>](#quantity-selector)" should be enabled individually in the current section to appear on product cards throughout the entire store.\
Additionally, enable the "[<mark style="color:blue;">Compare</mark>](/unicorn-shopify-theme/theme-settings/compare.md)" functionality in *Theme settings -> Compare*.
{% endhint %}

Use the current drop-down to set the layout of the buttons displayed for product cards of the entire store that fits your store design:

* **"Icon with text"**. The "Add to Cart", "Quick View", and "Add to Compare" buttons appear as overlays on a product card when you hover over it, with "Quick View", "Add to Compare", and "Add to Favorites" positioned below "Add to Cart" by default. The option displays text for an inactive button and an icon with text when hovering over the "Add to Cart", "Quick View", or "Add to Compare" buttons.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FBR66TbXhm5lKM6sc0zAZ%2Fbuttons_icon%26text.png?alt=media&amp;token=273bf11c-134d-41df-b54b-225ca8bba693" alt=""><figcaption></figcaption></figure>

* **"Icon only"**. This option displays only the icons for "Add to Cart", "Quick View", and "Add to Compare" when hovering over a product card and positions two items in a row. To highlight the selected button, it is scaled on mouse hover.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FjJmUu4Uv4zkfkPTonemv%2Fbuttons_icon.png?alt=media&amp;token=13ceaed6-0487-47a5-8894-a4a12f03602d" alt=""><figcaption></figcaption></figure>

* **"Add to cart below"**.&#x20;

> ***"Add to Cart" button:*** Use the option to move the button below the product card. This option displays text for an inactive button and shows an icon with text on hover in desktop mode.

{% hint style="success" %}
Using the "Add to Cart" button and quantity selector, the design and position of buttons in sections with collections are predefined and can not be changed in the settings. The "Add to Cart" button is located below or next to the quantity selector, depending on the section or screen size.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FOKDx2Ax7teBMflTjewPC%2Fadd%20to%20cart_sections.png?alt=media&amp;token=ea7e52bd-8f40-41c7-82e5-d31ab4e92072" alt=""><figcaption></figcaption></figure>

> ***"Quick View" button:*** On the desktop, the icon appears when hovering over a product card. This button is not displayed on mobile devices.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F9Q0wUXcj8MdyTjab0NOP%2Fbuttons_desktop.png?alt=media&amp;token=6d48b10a-ec71-4a24-8db7-3b83058ec207" alt=""><figcaption></figcaption></figure>

> ***"Compare":*** Positioning of the buttons can be specified in the *"Button placement"* picker under the "[<mark style="color:blue;">Compare</mark>](#compare)" subsection of the current global section.

#### **Show buttons on mobile**

Use the option to display the "Add to Cart" and "Add to Compare" icons below a product card on mobile.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FTrgrbbkA4SumHIHB5poZ%2Fproduct%20cards_bttn%20mobile.png?alt=media&amp;token=b9110279-dd1f-4619-b58e-bd544128ff20" alt=""><figcaption></figcaption></figure>

***

### **Quantity selector**

{% hint style="warning" %}
**Note!** Settings from the current subsection will be unavailable until you activate the "[<mark style="color:blue;">Add to Cart</mark>](#add-to-cart-button)" button and select the *"Add to cart below"* option in the "[<mark style="color:blue;">Button layout</mark>](#button-layout)" drop-down.
{% endhint %}

**Show selector**\
Activates the selector in desktop view.

**Show on mobile**\
Allows the display of the quantity selector on mobile devices.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fi78LuoQffzn0qmM8cUVl%2Fproduct%20cards_quantity%20selector.png?alt=media&amp;token=6c2dbe9d-e122-4b75-b300-15babe85d200" alt=""><figcaption></figcaption></figure>

***

### Add to cart button

**Show button**\
Enable or disable the "Add to Cart" / "Pre-order" button for collections and on collection pages using the current option. This option also enables other button-related settings.\ <mark style="color:orange;">**Note!**</mark> The "Pre-Order" button is displayed for out-of-stock items, provided all conditions are met. Read the details [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/theme-settings/products.md).

**Background /** **Icon**\
Set the inactive button's colors using the color pickers.

**Background on hover**\
Change the button color of the active button. Depending on the selected background color, use the "Contrast on light" or "Contrast on dark" color pickers in *Theme settings -> Colors ->* [*<mark style="color:blue;">Primary colors</mark>*](/unicorn-shopify-theme/theme-settings/colors.md#primary-colors) to modify text and icon colors when hovering over the button.

***

### Quick view button

**Show button**\
Use this option to add the "Quick View" button to product cards on collection pages and collections. The button can be shown on hover over the product image, product details, or the full product card. The color settings appear once the option is enabled.

**Background / Icon**\
Set the inactive button colors using the color pickers.

**Background on hover**\
Changes the color of the active button. Depending on the selected background color, use the "Contrast on light" or "Contrast on dark" color pickers in *Theme settings -> Colors ->* [*<mark style="color:blue;">Primary colors</mark>*](/unicorn-shopify-theme/theme-settings/colors.md#primary-colors) to modify text and icon colors when hovering over the button.

***

### Compare

{% hint style="warning" %}
**Note!** The **"Button placement"** picker can be shown only after selecting the **"Add to cart below"** option in the **"**[<mark style="color:blue;">Button layout</mark>](#button-layout)**"** drop-down of the current global section.
{% endhint %}

**Buttons placement**\
Specify the position of the button using the provided picker:

* **"Media"**. Shows the button over the product image on hover.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F43J3Hrd11ey6Do5OyShb%2Fproduct%20cards_compare%20bttn.png?alt=media&amp;token=29a2a333-708f-42bc-ac6d-ab1e630c343b" alt=""><figcaption></figcaption></figure>

* **"Below"**. Displays the button below the product card.

**Background**\
Set the inactive button colors using the color pickers.

Set the inactive background button color using the **"Background"** item.

**Icon**\
Use the color picker to adjust the icon color. Useful when the "Media" option is selected, which overlays the icon on product cards.

**Background on hover**\
Specify the desired background color of an active button.\ <mark style="color:orange;">**Note!**</mark> If a product has already been added to the "Compare" list, the button background will remain the same color as when you hover over it.