Hover product pages on collection got crazy - debut theme

Store Design

Topic summary

Issue: Product images on collection pages were changing on hover unpredictably, and editing media position had no effect. Prior custom code seemed to prevent choosing the second image.

Action taken: In Assets > theme.css, the CSS targeting ‘.has-secondary.grid-view-item__link:hover’ was removed (three occurrences), which restored the default behavior.

Clarifications: The “hover image” effect means swapping to a secondary product image when the user hovers the mouse. “Debut” and “Dawn” are Shopify themes; implementation details for hover effects can vary by theme.

Next steps: A community tutorial (link provided) was recommended to add a smooth hover image effect. It should work fine with the Debut theme. For the Dawn theme, some adjustments would be needed.

Outcome: Immediate problem resolved after removing the CSS. The decision to re-implement hover via the tutorial is optional and pending. No disagreements; assistance requested to disable previous code and guidance given for a future hover effect.

Status: Resolved for now; potential enhancement (hover effect) remains open for later implementation.

Summarized with AI on February 12. AI used: gpt-5.
1

Hi everyone,

my website pictures page production on collections got literally crazy.

First of all my site is https://nopineappleonpizza.com/

If I edit media position on product pages nothing happens at the end.

I remembered I found a suitable solution here and added it to my code. everything was smoothly working but now it doesn’t perform as expected.

FYI, I found this solution that I would like to use next, but I am afraid to work on the code (even though I would save a copy) :

https://community.shopify.com/topic/614960

has anyone faced the same problem? thanks in advance for your support

2

Hi @gnaro ,

I checked and product image is being changed on hover, you want to disable it?

Please explain more about it, I will check it.

3

Hi, I would like to disable the previous code that doesn’t let me chose the second image.

then app another code

4

Hi @gnaro ,

Please go to Assets > theme.css file, find ‘.has-secondary.grid-view-item__link:hover’ and remove code here:

Screenshot.png
Screenshot.png1112×567 27.3 KB

Hope it helps!

5

there were three strings instead of two but I delete those and now everything has been restored.

At this stage, to make a smooth hover image product effect, do you recommend I follow the instruction below?

https://community.shopify.com/topic/614960

do you think is worth it?

thanks

6

Hi @gnaro ,

Yes, with this tutorial you can make and add hover to images. But it will depend on each theme, with the Dawn theme you need to change some.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

7

I am using debut theme…

8

Hi @gnaro ,

Yes, with Debut theme, if you want to add it again later, it will work fine.

1 Like