# Product

![](/files/H8NbFA4VReJIRYZyyDPP)

1. **Show Alternative Product Image** field: Yes/No. Show thumbnail image (hover image) when mouse over in the product image area.&#x20;

<div align="left"><img src="/files/OCKEgz5LjvFFHOIfql2A" alt=""> <img src="/files/wqcteYR1GDDSa0dmYD7R" alt=""></div>

**2. Main Image Width** field: Image size used for the main image on detail product pages.

![](/files/AGTBANrPbvP49UPTP2Ow)

**3. Small Image Width** field: Image size used for products in the catalog, home page...

![](/files/kFu4qqYTxwWdyEcKqwjA)

**4. Image Cropping** field: If you select **1:1** Images will be cropped into a square, if you select **Custom** Images will be cropped to a custom aspect ratio.

![](/files/xtAq8LDB8qrxVZzwsF2K)

![](/files/Bv3XqqDnCOEny3wNadbl)

* In the **Label "New"** field: Enable the label "New".
* In the **Label "New" Text** field: Customize the text of label "New".
* In the **Label "Sale"** field: Enable the label "Sale".
* In the **Label "Sale" with Discount Percent** field: Select **Yes** if you want to show Discount Percent.

![](/files/zkritPFdcM6wR9Pdn71X)

**5. Page Layout** field: Select the layout of **Detail Page**.

Kalles included 3 product layouts. You can see how it working in the sub menu of Product

![](/files/Qf34vsWa82YiSrfoHG8E)

Select the product detail layout that you want to use in: Page layout field

![](/files/jEvanw7tIHX1cGyapTsM)

**6. Sticky Add To Cart** field: Select **Enable** to show sticky **Add to cart** at bottom.

![](/files/w4dvIuJrfprgJbkpe7Zz)

**7. Display Thumbnails** field: Select the position thumbnail in **Detail Page**. Left/Right/Bottom/Without thumbnails

You can see how it look in the sub menu of Product

![](/files/2ZKOBSJ1srDWKDDjNgbS)

![](/files/amyAfg7hgv1rU78TCwMz)

**8. Enable Zoom** field: Select **Enable** if you want to zoom when hover over image of product.

You can see how it work in the sub menu of Product

![](/files/tMib5gYcT8mwpWB8CqZq)

**9. Enable PhotoSwipe Popup** field: Select **Enable** to use PhotoSwipe Popup.

![](/files/UX4VEWkjvgxyp8zv9EPw)

**10. Enable Buy Now Button** field: Select **Enable** to enable Buy Now Button.

![](/files/a7URevJnf4NNUDbFhUWS)

**11. Enable Product sticky** field: Select **Enable** to enable Product sticky. (fixed product information in right side)

![](/files/98KGm5Mnhk6YegC2dNuL)

**12.  Display Tabs** field: Select the type of **Tabs** to show.

You can see how it work in the sub menu of Product

![](/files/mZK6fypt590gWS1n83fp)

![](/files/X65mCvOQVBEzNt5hwr8E)

* In the **Custom Tabs** field: Add or modify the Tabs in Detail Page.

![](/files/9S6hNPESs9Hew10tRBVx)

**13. Disable Add To Cart Button on Related: yes/no**

![](/files/QuGrjnZkzsogqYFLWP0X)

**14. Related, Up-Sells, and Cross-Sells Carousel Settings**

Item/per row in Related, Upsell in product detail page, Cross selles in cart page

![](/files/f6ILw6lMVcle3YBVg8yE)

* In the **Big Desktops** field: Specify the column of Related, Up-Sells and Cross-Sells Product in Detail Page on Big Desktops screen.
* In the **Desktops** field: Specify the column of Related, Up-Sells and Cross-Sells Product in Detail Page on Desktops screen.
* In the **Small Desktops** field: Specify the column of Related, Up-Sells and Cross-Sells Product in Detail Page on Small Desktops screen.
* In the **Tablet** field: Specify the column of Related, Up-Sells and Cross-Sells Product in Detail Page on Tablet screen.
* In the **Mobile** field: Specify the column of Related, Up-Sells and Cross-Sells Product in Detail Page on Mobile screen.
* In the **Small Mobile** field: Specify the column of Related, Up-Sells and Cross-Sells Product in Detail Page on Small Mobile screen.


---

# Agent Instructions: 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:

```
GET https://blueskytechcompany.gitbook.io/kalles-documentation/4.theme-customize/theme-settings/product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
