Debut theme product pic only showing on hover

Shopify Discussion

Topic summary

A Debut theme website displays product images only on hover instead of on page load, affecting product pages and collection thumbnails. The issue persists across multiple devices and networks.

Initial Solution:

  • Add CSS code to theme.scss.css file:
    .product-single__media img {
  height: 100% !important;
}
  • This fixed the main product image display issue.

Remaining Problems:

  • Product gallery images still appear as empty rectangles until mouse movement or scrolling
  • Collection page thumbnails have the same hover-only visibility issue

Additional Fix Applied:

  • Added CSS for collection thumbnails:
    .grid-view-item__image {
  height: 100% !important;
}
  • Successfully resolved collection page thumbnail visibility

Current Status:
The product gallery empty rectangle issue remains unresolved and awaits further assistance.

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

Hi, I am helping a friend with their Debut theme website. There is some issue with visualising the product picture on the product page - it’s only showing on hover. I welcome any advice! Thank you!

2

hey @vpaskaleva share the URLs of your website plz

3

Here: https://www.northumbriancandleworks.co.uk/

Thanks!

4

hey @vpaskaleva i can’t see the problem in your website but will you plz share the URL of that page

5

It’s on every product page. here is a screenshot:

vpaskaleva_0-1744107042526.png
vpaskaleva_0-1744107042526.png3840×2160 493 KB

6

but i can’t see the issue i think you network issue that’s why it take some time to load

Mustafa_Ali_0-1744107182245.png
Mustafa_Ali_0-1744107182245.png1145×695 634 KB

7

It’s happening on different devices on different networks

8

Mustafa_Ali_0-1744107680236.png
Mustafa_Ali_0-1744107680236.png1119×635 264 KB

then try this one

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

9

Hi @vpaskaleva , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code

Step 2: Find theme.scss.css file

Step 3: Paste this code at the bottom of the file

.product-single__media img {
    height: 100% !important;
}

Result:

B2Bridge_0-1744107771557.png
B2Bridge_0-1744107771557.png1360×778 128 KB

If this helpful, please let us know by giving us a like and marking it as a solution. Thanks

1 Like
10

Hi, thanks, i think it worked. But then the other images from the product gallery still don’t show on load, you have to move around the mouse or scroll on mobile for them to show. On load it shows like an empty rectangle. Also there is the same issue on any collection page - you have to move around the mouse for the thumbnails to show:

vpaskaleva_0-1744108756285.png
vpaskaleva_0-1744108756285.png3840×2160 692 KB

11

You can use this code:

.grid-view-item__image {
height: 100% !important;
}

1 Like
12

where should I put it?

13

You can put it at the bottom of the theme.scss.css file

14

It worked! Thank you! Can you please help me with the empty rectangles of the product gallery too? And how can I give you a like?