Articles on: Magento 2 Pearl Theme User Guide

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.


Selecting product page version in Pearl Theme


  • 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


Frontend product page layout after width adjustment



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



Related Article

For more details, see:

How to customize the width for your store sections in Magento 2 Pearl Theme

Updated on: 16/09/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!