Show Secondary Image on Hover (MOBILE)

Shopify Discussion
1

Hi, I use BLOCKSHOP Theme 10.0.1

MY WEBSITE IS HERE

The Desktop version shows the secondary image upon hover. But on Mobile Version the secondary image Does Not Show. Can anyone help me so my mobile shows the secondary image upon hover also.

Thanks

2

Hi @lucianofashion1

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag
  1. Save the changes.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Thanks!

3

@lucianofashion1 :waving_hand: for any given CSS band-aid solutions try to use a custom-css setting before modifying files code directly.

This can avoid inadvertently breaking your theme or complicating future version. upgrades

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

The custom-css setting does not need the surrounding opening and closing style tags: …

If you must modify files directly always make a back up duplicate of the theme first.

And learn how to rollback eligible files

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-back

4

Hello @lucianofashion1 ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code at the bottom:

@media only screen and (max-width: 767px) {
    .product--hover-image {
         display: block !important;
    }
}

Thanks