All Collections
Website builder
Online store
Website Builder: How to Change Product Image Proportions
Website Builder: How to Change Product Image Proportions
Learn how to change the product image proportions using Hostinger Website Builder
Updated over a week ago

Learn how to change the proportions of your product images in the following areas of your online store 👇

Recommended product image dimensions:

  • 600×600 PX might result in slightly worse quality on tablets

  • 900×900 PX suitable for all screen sizes

Product List Section

Click on the product list section, and select Edit section. Expand the Layout tab, and change the number of columns. The more columns, the smaller the product images, and vice versa:

Changing the number of columns in the product list section

Displaying Images in Their Original Proportions (Not Square)

By default, product images in the product list section are square. To show them in their original proportions, access the website's integrations settings, and paste the below code in the Custom code field:

<script>
function changeImageAddress(url) {
let parts = url.split("cdn-cgi/");
const sourceStart = parts[0];
const sourceMiddle = 'cdn-cgi/image/format=auto,w=600,h=600,fit=scale-down,q=100/';
parts = url.split('/');
const secondToLastSlashIndex = parts.length - 2;
const sourceEnd = parts[secondToLastSlashIndex] + "/" + parts[parts.length - 1];
return sourceStart + sourceMiddle + sourceEnd;
}
function changeImage(image) {
image.src = changeImageAddress(image.src);
image.srcset = '';
image.classList.add('fullImage');
}
setInterval(() => {
if (document.querySelector('.block-product-list')) {
document.querySelectorAll('.block-product-list').forEach(productList => {
productList.querySelectorAll('.product-list-item__image').forEach(image => {
if (!image.classList.contains('originalAspectRatio'))
changeImage(image);
image.srcset = '';
image.classList.add('originalAspectRatio');
})
})
}
});
</script>
<style>
.originalAspectRatio {
object-fit: contain !important;
}
.originalAspectRatio + .ecommerce-product-ribbon{
margin: 0 8px 8px 0 !important;
}
</style>

Save the changes and update your website.

NOTE

  • As images will be shown in their original resolution, they will take longer to load, thus may slow down the website

Single Product Section and/or Product Page

Click on the product section, and select Edit section; then expand the Layout tab and change the image ratio:

Changing the product image ratio in a product section

There are two main options for image ratio:

  • Square – if you select this option, you can also change the image border-radius (round the image corners) and make the product image round

  • Original – use this option to show images in their original proportions

That's it! Now you know how to manipulate product images in Hostinger Website Builder 📸

Did this answer your question?