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

# Product item

The Product Item settings control how individual products are displayed within product listings and collections. Use these options to customize the product card’s appearance and layout.

To customize the Product item in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Product item**
3. Make necessary changes
4. **Save**
   {% endhint %}

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FIwsFieDx1b1ybylmR1M0%2Fprocduct%20item.png?alt=media&amp;token=fb13f4f4-bcb3-433f-9562-ede8ac06ec57" alt=""><figcaption></figcaption></figure>

#### **General**

* **Product layout:** Choose the preferred product layout style (1, 2, or 3). Each layout defines a different structure for how product details and images are arranged.
* **Style:** Select between **Standard** or **Card** display styles. The Card style adds a bordered container around each product.
* **Color scheme:** Apply a specific color scheme to the product item section to match your site’s overall theme.
* **Border:** Toggle this option to enable or disable borders around product cards.
* **Border radius:** Adjust the roundness of product card corners for a softer or sharper appearance.
* **Content alignment:** Align the product content (text, buttons, etc.) to the **left**, **center**, or **right** of the card.
* **Show button “Quick view”:** Display a Quick View button allowing customers to preview product details without leaving the current page.
* **Show button “Add to cart”:** Add an “Add to Cart” button directly on the product card for quicker shopping.
* **Show button “Add to wishlist”:** Display a Wishlist button so customers can save items they like for later.
* **Show product reviews:** Enable product rating stars and review information (requires a review app).
* **Show second image on hover:** Display a secondary product image when the user hovers over the product card.
* **Show product type:** Display the product’s category or type below the title.
* **Show vendor:** Display the vendor or brand name associated with the product.
*

```
<figure><img src="/files/epI8eL1c2qTahHlwyN2L" alt=""><figcaption></figcaption></figure>
```

#### **Product Image**

* **Image padding:** Adjust the spacing (in pixels) around the product image. Increasing the padding adds more empty space between the image and the card border.
* **Aspect ratio:** Choose the proportion between the image’s width and height (for example, 3:4).
* **Aspect ratio custom:** Enter a custom aspect ratio if you want a specific size (e.g., 2:3).
*

```
<figure><img src="/files/IBx0XHE5QOA0K4TZIaas" alt=""><figcaption></figcaption></figure>
```

***

#### **Badges**

* **Show sale label:** Toggle this option to display a sale badge on products that are discounted.
* **Badges style:** Choose between **Radius** (rounded corners) or **Rectangular** badge shapes to fit your store’s design style.
*

```
<figure><img src="/files/K6B14CfjkX0mb7wNVUtW" alt=""><figcaption></figcaption></figure>
```

***

#### **Product Name**

* **Text transform:** Choose how the product name text appears:
  * *None* – keeps the original text style.
  * *Uppercase* – converts all letters to uppercase.
  * *Capitalize* – makes the first letter of each word uppercase.
  * *Lowercase* – converts all letters to lowercase.
* **Product name line limit:** Set the maximum number of lines for the product name to prevent overflow or uneven spacing. Options: *Unset*, *1*, *2*, or *3* lines.
*

```
<figure><img src="/files/K6VPsi8zdzNPt6Nbgi2r" alt=""><figcaption></figcaption></figure>
```

***

#### **Variant**

* **Show variant:** Enable this option to display available product variants (like color or size) directly under the product name.
* **Variant type:** Choose how variants are displayed — for example, **Show only color**, **Show only image**, or **Show color and image** (depending on theme settings).
* **Variant style:** Select the visual style for variant buttons, such as **Rounded** or **Square**.
*

```
<figure><img src="/files/CdFtdCpfNdhfiv78NbS0" alt=""><figcaption></figcaption></figure>
```