Reveal second image on hover - Debut theme

Solved
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
36688 3633 11879

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 133 (133)
KetanKumar
Shopify Partner
36688 3633 11879

@GMco 

Thanks for your responose 

 

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
Effyl01
Excursionist
18 0 7

hi @KetanKumar 

My debudt theme is 17.7 how come i cant find any css.liquid file?

I also want to try this hover effect.

Effy.

KetanKumar
Shopify Partner
36688 3633 11879

@Effyl01 

it can be done some 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
Effyl01
Excursionist
18 0 7

Hi,

Actually what I was look for and came across this article is to stop the behavior in the shopping cart page, when a user 1 product with the quantity button showing 1, if he will change it to zero it will automatically delete the item from the cart, no warrning.

Any idea how this case be changed?

Thanks!

KetanKumar
Shopify Partner
36688 3633 11879

@Effyl01 

if possible to share video further issue

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

Hey Ketan, I somehow managed to make it work with the previous mentioned steps from this post however I have one little problem. My images are literally doubled. 
Can you give it a look and tell me how can I remove non-rotatable pictures of my products? 

Here's the photo to better understand what I am asking for.

https://hustlebabe-shop.myshopify.com/    - password:009900mas.png

KetanKumar
Shopify Partner
36688 3633 11879

@nicky11 

this only singale image 

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

The upper row that I've marked, I want to remove it and have only rotatable product images to stay.

KetanKumar
Shopify Partner
36688 3633 11879

@nicky11 

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.

@media screen and (min-width: 767px) {
.has-secondary.grid-view-item__link:hover img.secondary {display: none;}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image {display: block;}
}

 

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

This didn't help at all. I assume you didn't understand what I'm trying to achieve. There are duplicated pictures at the moment, right? One is static and the other is rotatable (hover over display second image), right? I want to remove all static product images and have ONLY rotatable ones displayed.

KetanKumar
Shopify Partner
36688 3633 11879

@nicky11 

yes but what about a single image? at that time show only one

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

None of the products are single image, they are just displayed like that on site therefore I want to remove them and leave only double images.

 

nicky11
Excursionist
19 0 9

https://hustlebabe-shop.myshopify.com/collections/woman - 009900

Go to this link. The images I have crossed, I want to remove because they DON'T rotate. The others that rotate, I want to keep them. Can I achieve that somehow?


12345.png

nicky11
Excursionist
19 0 9

I will create separate post and try to explain as best as I can what I am looking for. Thank you once again for your willingness to help !

KetanKumar
Shopify Partner
36688 3633 11879

@nicky11 

can you try this code

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

#shopify-section-collection-template .grid-view-item.product-card {
    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
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
36688 3633 11879

@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
36688 3633 11879

@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
36688 3633 11879

@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
36688 3633 11879

@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
36688 3633 11879

@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
36688 3633 11879

@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
36688 3633 11879

@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
36688 3633 11879

@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