> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weltpixel.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to set product page Layout and Image Size in Pearl Theme for Magento 2

## 1. Select Product Page Version

The Pearl Theme offers **4 product page layouts**. You can preview them in the [Pearl Theme Demo Store](https://pearl.weltpixel.com).

![Selecting product page version in Pearl Theme](https://storage.crisp.chat/users/helpdesk/website/-/4/5/b/f/45bf929ea1747000/0461ebb7-3785-42b6-8e61-c07465_wzamhc.png)

* **Product Page V1** is built on the default Magento product page structure.  
* **Product Page V2, V3, and V4** use custom layouts, so some admin options may differ compared to V1.  

> **Note:** Always switch product page versions at the **store view level**, not in the default config.  
> Changing the version at the store view level pre-populates product page options with settings specific to that version. This does not happen when using the default config.

---

## 2. Set Product Page Image Size

Control the **image vs. product info area width** via Pearl Theme settings:

**Path:** `Store > Configuration > WeltPixel > Product Page > General Settings`

* **Image area width [%]:** set the width of the image section (e.g., `60%`).  
* **Product info area width [%]:** set the width of the product info area (e.g., `40%`).  

> **Important:** The sum of both values should not exceed 100%.  
> These settings apply only on **desktop**. On mobile, columns automatically adjust responsively.

![Product page image and info area settings](https://storage.crisp.chat/users/helpdesk/website/-/7/9/b/5/79b5884bc6251400/50432e7b-ebc5-4f6f-a84a-b77a81_1fo600n.png)

![Frontend product page layout after width adjustment](https://storage.crisp.chat/users/helpdesk/website/-/6/a/0/c/6a0cbc73f9a97c00/7ab3768d-c31f-46b6-a843-ced77c_gz1x4r.png)

---

## 3. Optimize Product Page Gallery Images

Magento caches product images at specific resolutions. If you increase the **image area width**, you may need higher resolution images to avoid quality loss.

**Path:** `Store > Configuration > WeltPixel > Product Page > Images`

* **Main Image Width [px]:** set the width of the cached product image. Example: `1200`  
* **Main Image Height [px]:** set the height. Example: `1200`  

> **Tip:** Avoid setting an image width smaller than the defined **Image Area Width**.  
> Otherwise, images will stretch and lose quality.

**Examples:**
* If image area width is **60% of 1920px**, the main image should be at least **1152px**.  
* If image area width is **60% of 1400px**, the main image should be at least **840px**.  

---

## 4. Adjust Product Page Width

You can control **overall product page width** (and other page types) from:

**Path:** `WeltPixel > Frontend Options > Section Width > Product Page`

This allows you to center product content and set a fixed width, such as `1200px`, `1400px`, or a percentage like `90%`.

![Setting product page width in Pearl Theme](https://storage.crisp.chat/users/helpdesk/website/-/9/0/c/6/90c6147bb7dbc000/9a0c45fb-ecd6-46ad-aaa3-1f49bf_oe50il.png)

---

## Related Article
For more details, see:  
[How to customize the width for your store sections in Magento 2 Pearl Theme](https://help.weltpixel.com/en/article/how-to-customize-the-width-for-your-store-sections-in-magento-2-pearl-theme-14rwpvn/?bust=1758026636115)