Appearance of Collection Page Thumbnails in Impulse Theme

[kingbeanz]

I'm currently using Impulse Theme and the collection thumbnails appear uneven dictated by the product photo.

See: https://emery-london.com/collections/womens-best-sellers

I come across many Impulse Theme website with uniform collection size images.
See: https://stylewithava.com/collections/d-r-e-s-s-e-s



1. Is there a simple setting I'm missing on the backend UI for Impulse that allows uniform images ... ?

... or is it custom coded?

2. IF custom code, could you please advise me?

THANK YOU 🙏

[topnewyork]

Hi @kingbeanz ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.grid-product__image-mask {
    height: 300px !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Huptech-Web]

Hi @kingbeanz , The issue is with the inline CSS applied to the grid. Please review the below screenshot the padding-bottom in the screenshot should be 100%


Try adding the below CSS to your "theme.liquid" in <style> tag.

<style>
.collection-grid__wrapper .image-wrap {
    padding-bottom: 100% !important;
}
</style>

[kingbeanz]

Hey Huptech, that was really helpful thank you so much!

I'm not sure if it's too advanced, but is there a way, instead of cropping the full picture is included in the thumbnail?

Like this example: https://jones-london.com/collections/woman-dresses

So no matter what ratio the picture is, its still included?

And white space fills the other area?

Sorry if that's too much to ask.

Appreciate the help!

[kingbeanz · Accepted solution]

I'VE FIGURED IT OUT.

When editing your Impulse Collection Page go to:

Product Grid > Theme Settings > Force Image Size

Select Square and you're done !!!!!