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:
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:
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 📸