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

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:

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 📸