Help with Product Image Thumbnail

[Sheeks]

I’m having an issue with the thumbnail of one of my product images. It appears to shrink and doesn’t display like the others. Could you please assist me in resolving this so the thumbnail appears correctly, like the rest of the product images?

Others

 problem: https://sheeksorority.com/products/halloween-primitive-womens-party-clothes-dance-party-cosplay

 

[BSSCommerce-B2B · Accepted solution]

Dear my friend,

As same as problem like https://community.shopify.com/c/shopify-design/assistance-needed-with-prehistoric-cavewoman-costume-...

I noticed that you have customized the image size in another thread, but the image titled "Prehistoric Cavewoman Costume Image" has an issue. 

You need to add more script in theme.liquid to fix this only on Prehistoric Cavewoman Costume Page : 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file.

3. Find the closing </body> tag, which is usually at the bottom of the file.

Before the closing </body> tag, add the following script:

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (window.location.pathname.includes("products/halloween-primitive-womens-party-clothes-dance-party-cosplay")) {
            var style=document.createElement('style');

            style.innerHTML=` 
            .main-product-thumbnail-img img {
                object-fit: contain !important;
            }

            @media only screen and (max-width: 768px) {
                .main-product-thumbnail-image-slider .slick-track {
                    width: fit-content !important;
                }

                .main-product-thumbnail-image-slider .slick-slide {
                    width: 85px !important;
                }

                .main-product-thumbnail-img img, .main-product-thumbnail-img .svg-placeholder {
                    object-fit: contain !important;
                }
            }

            `;
            document.head.appendChild(style);
        }
    });
</script>

The result will be: 

#Desktop: 

#Mobile: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[PageFly-Richard]

Hi @Sheeks 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% if handle contains 'halloween-primitive-womens-party-clothes-dance-party-cosplay' %}
<style>
@media (max-width:767px){
.main-product-thumbnail-image-slider .slick-track {
width: fit-content;
}
.main-product-thumbnail-image-slider .slick-slide {
    width: 86px !important;
}
.main-product-thumbnail-img img, .main-product-thumbnail-img .svg-placeholder {
    object-fit: contain;
}
}
</style>
{%endif%}

Or another simply way is to change the thumb image like other products ( size, dimension, etc..)

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[Dan-From-Ryviu]

There is an issue with your theme if the product has 3 images. 

[GTLOfficial]

Hello @Sheeks 
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> main-product.css
add this code at the end of the file.

.main-product-thumbnail-img img, .main-product-thumbnail-img .svg-placeholder {
object-fit: contain;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks