How can I code hover over image for mobile devices?

[LucianoFashion]

Hi, I currently have a hover over image to a secondary image on the collection page which works perfectly on Desktop with a mouse cursor. But can anyone help me with the coding for a Mobile Device so that i can hover over the product image on the collection pages.

Click Here For The Website 

Thank You

[Fatima_Murtaza · Accepted solution]

Hi @LucianoFashion 
Fatima here for helping you in this.
Basically there has no hover state for touch devices but "Touch and Hold".
I reveiwed your site and i can confirm theme has disabled the option for second image by default for smaller devices that we can easily fix that.
You just need to add the code i mentioned below by going through Shopify Admin > Online Store > Themes > Edit Code > Assets > Theme-async.css open this file and paste this code at the end.

@media(max-width: 767px){
.product--hover-image[data-item] {
 display: block !important;
}}

It will sort this issue, If you find it difficult to applying this fix you can add me to join store dashboard at this email fatimamurtaza822@gmail.com and i'll do it for you.

Regards
Fatima

[LucianoFashion]

Thank You That's Great, Worked!!

Also, in the Footer of my Home page. We need to add the Logos for Klarna and ClearPay, could you please help. Thank You

[Fatima_Murtaza]

@LucianoFashion  sounds good that solution has worked for you.

For clearpay and klarna payment icon since it has 3rd party payment option shopify doesn't included their logos to showing as a accepted payment method on footer.
However we can still do it through custom coding but it is little tricky and lengthier to answer it here.

[LucianoFashion]

Could you please send email to shop@lucianofashion.co.uk to help thank you

[dndififfjdcgrj]

Hi @Fatima_Murtaza  had the same issue so I wanted to try this solution, but I don't seem to have the same .css files for Dawn theme 11. Can you tell me how to do it for that theme? 

thank you in advance!!

[dndififfjdcgrj]

(this isn't for Ramble & Roam but a new brand running Dawn 11.)

[ThomasPacquee]

Hi, 

I'm new here. It is possible that I don't find this: "Theme-async.css" so I can't change anything... Thanks for the help!