Re: Reveal second image on hover - Debut theme

Solved

Reveal second image on hover - Debut theme

iamcurious
Excursionist
21 0 12

Hi, would really appreciate some help with this – been trying to follow some threads on this topic but to no avail.

I would like to have the second image of each product revealed on hover. Am using Debut theme.

Thanks very much!

My site is www.curiouslah.com

Accepted Solution (1)
KetanKumar
Shopify Partner
37093 3645 12053

This is an accepted solution.

@iamcurious 

Thanks for update code 

also, please add the below code.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.grid-view-item__title {
margin-top: 20px;
}
.grid-view-item__vendor, .price__vendor {
    display: none;
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 134 (134)
nicky11
Excursionist
19 0 9

Well done and big thank you! Solved my problem.

One more thing, how do I center the next now? I will attach the photo below so you can see what I a referringtext.png to.

nicky11
Excursionist
19 0 9

Also, referring to the issue you already helped me fix, how do I do the same for the photos on the Home Page, it's a featured collection and I want only rotating photos to show. Thanks in advance man !

Screenshot_1.png

KetanKumar
Shopify Partner
37093 3645 12053

@nicky11 

oh sorry but i can't see your store now password protect and passwords page i can't see button 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nicky11
Excursionist
19 0 9

Oh sorry, I got it back for you 🙂   Check it out

nicky11
Excursionist
19 0 9

Can I expect any answer for this issue? Hopefully yes, I thank you in advance.

Also, new password for the site is messaged to you, check it out.

KetanKumar
Shopify Partner
37093 3645 12053

@nicky11 

yes i have checked its work 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EllaFS
Excursionist
23 0 6

Hi Ketan, 

 

Tried adding this code but the hover didn't work.

 

We'd like it so that if you hover on the first image, it shows the second image please. Can we have it on the homepage products but also on each product page itself too?

 

Thanks,

Ella

camilaorozcom
Tourist
4 0 2

Hello, 

 

I can not find theme.scss.liquid, just theme.css how can I do it?

KetanKumar
Shopify Partner
37093 3645 12053

@camilaorozcom 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
camilaorozcom
Tourist
4 0 2

Hello, 

 

My website is www.susolesw.com 

JessBo
Excursionist
18 0 6

Hi There, I have the Debut Theme, where do I add this code to please I dont seem to have theme.scss.liquid or the alternatives mentioned on the other thread. Thanks 

KetanKumar
Shopify Partner
37093 3645 12053

@JessBo 

can you please send store url 

@camilaorozcom 

i have check this customization On product hover or let me know DM

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JessBo
Excursionist
18 0 6
Hi there

Yes it’s studiobhomeware.com
KetanKumar
Shopify Partner
37093 3645 12053

@JessBo Thanks, If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by or Send DM

Product hover 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JessBo
Excursionist
18 0 6

Hi There 

 

My website is www.studiobhomeware.com

 

I have also tried to use the coding in the embedded link above and this just ended up with two images been shown one over another rather than a hoover

 

Thanks 

KetanKumar
Shopify Partner
37093 3645 12053

@JessBo 

if you are able to code try above code and let me know it done customization codde

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JessBo
Excursionist
18 0 6

Thanks you.

 

Which coding should I be following there’s a few linked above and I am not entirely sure I follow which one you are referring to? Some links say to update the theme and product coding and some just suggest the Theme. 

Please note my store does not have theme.scss.liquid so do I use theme.css or theme.liquid 

 

thank you 

KetanKumar
Shopify Partner
37093 3645 12053

@JessBo 

https://www.huratips.com/tech-tips/how-to-make-product-image-change-when-mouse-over-in-shopify.html

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JessBo
Excursionist
18 0 6

Thank you - when I do this it results in the two images being shown, please see a preview of my duplicate theme where I have added the code below

 

https://gsho2r052aj8c5bf-53377695903.shopifypreview.com

 

KetanKumar
Shopify Partner
37093 3645 12053

@JessBo 

can you please update this code product-card-grid 

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  <div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img data-swift-lazy="1" loading="lazy" id="{{ img_id }}"
              class="grid-view-item__image lazyload on-normal"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>        
        
               <img class="grid-view-item__image lazyload on-hover" src="{{ product.images[1] | img_url: 'master' }}" alt="{{ product.images[1] | escape }}" />            
      </div>
    </div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img data-swift-lazy="1" loading="lazy" class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

</div>
<style>
.on-hover {
    opacity: 0;
}
.product-card:hover .on-hover {
    opacity: 1;
}
</style>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JessBo
Excursionist
18 0 6

Thanks so much, that has worked however there seems to be an added scroll tab on the first section of the website which you will be able to see on 

 

https://studiobhomeware.com/

 

Also is it possible to make this hover to the last image rather than the second image?

 

Many thanks 

 

Jess 

JessBo
Excursionist
18 0 6

Hi There

 

Thanks so much.

 

I just wanted to check in to see if you saw my response on this (copied below) the website is live and has this additional scroll bar now showing on some pages which I would love to get fixed as soon as I could. 

 

Thanks 

 

Thanks so much, that has worked however there seems to be an added scroll tab on the first section of the website which you will be able to see on 

 

https://studiobhomeware.com/

 

Also is it possible to make this hover to the last image rather than the second image?

 

Many thanks 

 

Jess 

camilaorozcom
Tourist
4 0 2

Hello,

 

I tried this code and worked but now I have 2 product rows. One not working and the second one with the hover, as you can see

 

Captura de Pantalla 2022-08-10 a la(s) 11.55.10 a. m..png

KetanKumar
Shopify Partner
37093 3645 12053

@JessBo 

i have check its work please share screenshot if any issue 

@camilaorozcom 

cam you please send store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JessBo
Excursionist
18 0 6

Hi There

 

See below - The hover works however there are 2 cursor arrows now showing on some pages.

 

I would also like to shoe the last image on hover if you can advise how to do this.

 

Thank you 

 

JessBo_0-1660212246409.png

JessBo_1-1660212315573.png

 

JessBo
Excursionist
18 0 6

Hi There 

 

Have you had a chance to look at my reply below - you will see the extra cursor on the right side.

 

This only happens with the desktop view. Can you advise how to fix this please

 

Many thanks 

 

Jess 

KetanKumar
Shopify Partner
37093 3645 12053

@JessBo 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.grid--view-items {overflow: visible;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JessBo
Excursionist
18 0 6

Unfortunately that doesnt seem to work - see link below

 

https://0w0dgxefelzvoi6y-53377695903.shopifypreview.com

 

I am also looking to change the hover image to the last image instead of the second image if possible please.

 

Thank you 

 

Jess 

JessBo
Excursionist
18 0 6

Unfortunately that doesnt seem to work - see link below

 

https://0w0dgxefelzvoi6y-53377695903.shopifypreview.com

 

I am also looking to change the hover image to the last image instead of the second image if possible please.

 

Thank you 

 

Jess 

KetanKumar
Shopify Partner
37093 3645 12053

@JessBo 

KetanKumar_0-1661774436593.png

 

your link doesn't work

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JessBo
Excursionist
18 0 6

You can see it here 

 

https://studiobhomeware.com/

JessBo
Excursionist
18 0 6

Hi There

 

Have you had a chance to look at this. I would really apprecaite if you could assist me with 

 

1 - removing the extra cursor arrows pictured above

 

2 - showing the last image on hover rather than the second.

 

You can view here - I believe the cursor issue may only present on windows rather than a mac laptop. 

 

www.studiobhomeware.com 

 

Thank you 

 

 

JessBo
Excursionist
18 0 6
Hi There

Sorry for another message but I would really like to fix this issue of the extra side bar. You can see this on the homepage on www.studiobhomeware.com<> screen shot below.

Please also let me know how I can change to reveal the last image on hover instead of the second

Thank you in advance 😊

[cid:image004.png@01D8C696.8E657F00]


camilaorozcom
Tourist
4 0 2

Hello, 

 

Can not find any CSS.liquid not even styles.css.liquid

ealkawasmi
Tourist
7 0 0

I do not have a file named theme.scss.liquid

Chero
Tourist
7 0 3

Hi @iamcurious  nice to know it works on your website.

however, how did you manage to get it work for all the rows?

 

Chero
Tourist
7 0 3

hi, @iamcurious,

how did you manage to avoid double images on phone screen?

brave-tribe.de

ps: waskow

 

NicolasMaverde
Explorer
74 1 33

Hi KetanKumar,

is it also possible to put a hover effect on normal images?

I Think about the section image-bar.

Here you can find an example of what I am thinking about: https://dribbble.com/shots/5551370-Portfolio-concept 

Thank You

Nicolas

KetanKumar
Shopify Partner
37093 3645 12053

@NicolasMaverde 

Yes, but it's not working all browser and mobile design 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NicolasMaverde
Explorer
74 1 33

Could you send me a code so I can try?

Would be great!

 

Thank you!

KetanKumar
Shopify Partner
37093 3645 12053

@NicolasMaverde 

Thanks for it 

can you try and modification this  code

https://codepen.io/theadameden/pen/ReypqN

https://codepen.io/Alexee/pen/NXgYmN

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bram1987
Excursionist
33 0 64

@iamcurious @KetanKumar 

Thanks a lot, this finally worked for me after trying many times before with different solutions and failing. 

However, the only problem I have is that the hover seems to always show the LAST picture in the gallery whereas I would prefer it to be the second picture. Is there any solution for this?

Thanks a lot, again

Website: www.umacantik.com 

KetanKumar
Shopify Partner
37093 3645 12053

@Bram1987 

YES, IS POSSIBLE TO CUSTOM CODE

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jordae
Excursionist
22 0 3

Hello all,

Is this still working ?

I'm on Debut theme (v 17.12.0) the image change works on mouse hover but when I paste the code from this post in my product-card-grid.liquid it displays this "no image" instead of my products first photo

no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_600x600_gif.png

KetanKumar
Shopify Partner
37093 3645 12053

@jordae 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Daniel134
Excursionist
10 0 6

Hi can you help with where this specifcially goes into the product.liquid.grid file for debut theme. 

 

I have added the css, but after a few tries in that product grid template, I cannot get anything to appear. 

KetanKumar
Shopify Partner
37093 3645 12053

@Daniel134 

sorry for any issue 

please share store url and issue images 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Daniel134
Excursionist
10 0 6

The store url is shopshelovesme.com 

 

There is no longer any code in the product-grid file as I could not get it working. Only the css remains in the css file 

KetanKumar
Shopify Partner
37093 3645 12053

@Daniel134 

thanks for detail 

do you have like this

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo...

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Daniel134
Excursionist
10 0 6

Yes, I have been following the instructions, but product-grid file is not exactly as it is stated above. Please see product grid file for SRC spot. How would I place this code here to show second image on hover. I believe I have CSS correct, but we can check after this step if it still does not show. 

 

I was trying to place it here in the file named: product-card-grid.liquid 

 

 

<div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
alt="{{ preview_image.alt }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</div>
</div>
</div>