Prestige Theme Hover Question

Shopify Discussion
,

Topic summary

A Shopify store owner using the Prestige theme encountered image display issues after a theme update.

Primary Issue - Product Hover Images:

  • Previously, hover images on collection pages didn’t need to match the first image’s dimensions
  • After the update, mismatched aspect ratios (square vs. rectangular) create an undesirable appearance
  • The user wanted to avoid manually resizing hundreds of images

Solution Provided:
A support team member (DaisyVo from Avada) provided a CSS fix:

  • Add custom CSS code to the theme.liquid file before the </head> tag
  • The code applies object-fit: cover to secondary product card images
  • This solution successfully resolved the hover image issue

Secondary Issue - Collection/Blog Module Images:
The user reported that images in collection and blog modules no longer auto-resize as they did previously. Images now require manual cropping to specific dimensions (e.g., 300x300) to maintain visual consistency, adding significant time to the workflow. This issue remains unresolved and awaits further guidance.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I recently updated my theme and noticed some glitches. In the previous version, the second image in the product hover state on the collections/gallery didn’t have to match the size of the first image. Now, when users hover over a square product image, a rectangular image appears, which isn’t ideal. I can’t go through the process of cutting, resizing, and uploading hundreds of images again. How can I fix this issue?

For reference: this is the correct version: https://wunderpetscompany.com/collections/dog-bed

I havent published the new version but all these hover state images look ba

2

Hi @Soysauce1

Could you share your store IRL so we can check?

3

Hi @Soysauce1

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
img.product-card__image.product-card__image--secondary {
    object-fit: cover !important;
}
{% endstyle %}

DaisyVo_0-1739344323920.png
DaisyVo_0-1739344323920.png1321×694 331 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

www.wunderpetscompany.com

Prestige

Thank you!

5

It worked! Thank you so much! I have one more question: The images in my collection and blog modules aren’t automatically resizing like they used to. I now have to crop them to a specific size to maintain consistency. For example, in my “Must-Have Items” module, I had to recrop all three images to ensure they looked cohesive. In the past, I could upload any image size, and they would automatically adjust to 300x300. This new template setting is quite time-consuming. Any advice or feedback on how to fix this?