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
37139 3648 12061

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 [email protected] 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)

KetanKumar
Shopify Partner
37139 3648 12061

Hello, 

Welcome to the Shopify community!
and Thanks for your Good question. 

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 [email protected] 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
iamcurious
Excursionist
21 0 12

Hi, thanks for the link - I tried following some of the suggestions there but it didn't work.

Then I used this: https://www.youtube.com/watch?v=9uxSrOxxZpY which did work, but now there are some issues..

Code used for Reveal Module in theme.scss.liquid :

 

/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}

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

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
}

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

 

 

Code used in product-card-grid.liquid :

 

{% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
    {% if product.images.size > 1 %}
     <img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
    {% endif %}
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price', variant: product %}
    </div>
  </a>
</div>

 

 

The issues are: (see www.curiouslah.com home page for reference)

1) No padding/spacing between the product images and product titles, that was with the original code

2) For products with a vendor, the vendor name is shown twice

Any ideas how to fix this? Thank you!

KetanKumar
Shopify Partner
37139 3648 12061

@iamcurious 

Thanks for store details 

sorry but I can see this code do you have added?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
iamcurious
Excursionist
21 0 12

@KetanKumar 

Sorry, I changed it back to the original code again just now.

Have switched the code to the one mentioned above, so you can see the issues with the padding and vendor title.

Thanks!

KetanKumar
Shopify Partner
37139 3648 12061

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 [email protected] 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
iamcurious
Excursionist
21 0 12

Thank you very much! This worked!

KetanKumar
Shopify Partner
37139 3648 12061

@iamcurious 

Thanks for update and your compliment.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
Twooogirlsco
Excursionist
11 0 6

Hi, what do I do if I want to reveal the second image as well but I do not have a theme.scss.liquid?

I can only see theme.css.liquid or theme.scss

Thank you!

KetanKumar
Shopify Partner
37139 3648 12061

@Twooogirlsco 

Thanks 

can you please try 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 [email protected] 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
Twooogirlsco
Excursionist
11 0 6

Sure, thank you!

Twooogirlsco
Excursionist
11 0 6

Hi Ketan Kumar,

I tried the link and the steps do not work for me... is there a reason why

KetanKumar
Shopify Partner
37139 3648 12061

HEllo, @Twooogirlsco 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
Twooogirlsco
Excursionist
11 0 6

noted. how much do you charge for this hover?

KetanKumar
Shopify Partner
37139 3648 12061

i have send PM

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
BeresMedia
Tourist
7 0 3

Hello,

I've just tried so many different ways from YT tutorials and have just done your way and I'm still getting the images stacked on each other...

website link - p/w: couture123

I'm not sure if there is an app blocking the feature?

Please help, thank you

BeresMedia
Tourist
7 0 3

All good I have resolved this issue now. Would love to know how to make my image on my landing page zoom when hovered. It is just a 'Text Columns with Images' image, not a product image. Would love some more interaction with it if possible please.

KetanKumar
Shopify Partner
37139 3648 12061

@BeresMedia 

yes please show me 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 [email protected] 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
BeresMedia
Tourist
7 0 3

I popped my website details above if you want to have a look there or here is a screenshot - they are stagnent photos and I'd like to either have it zoom in when I hover over them (1st preference) or click on them to purchase and I can remove the buttons (that bit I know how to do haha)

 

Screen Shot 2021-11-02 at 9.51.43 am.png

KetanKumar
Shopify Partner
37139 3648 12061

@BeresMedia 

yes please try this code

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

.feature-row__image-wrapper .feature-row__image {
    transition: all 0.9s;
}
.feature-row__image-wrapper:hover .feature-row__image {
    transform: scale(1.1);
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
BeresMedia
Tourist
7 0 3

Thank you so much, you're incredibly helpful.

 

I have one last question and then the site is done! 🙂 😉 I really appreciate your help.

 

My header logo is the same file/image on all pages, however on the product pages it comes up with a blurry background whereas the file is a transparent background. any  suggestions pls?Screen Shot 2021-11-04 at 3.58.49 am.pngScreen Shot 2021-11-04 at 3.58.36 am.png

KetanKumar
Shopify Partner
37139 3648 12061

@BeresMedia 

yes please share 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 [email protected] 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
BeresMedia
Tourist
7 0 3

@KetanKumar Can you please help me? When on my products on mobile, the menu bar is disabled and the logo in the header has a weird box around it - can you please take a look? www.ballooncouture.com.au (from your phone)

cherryangel
Visitor
2 0 1

Hi @KetanKumar Can you please help me with my Debut theme looks like the three dots from the slider are all the way to the right I am not sure why. Also how can I make the slider button background transparent?

cherryangel_1-1635975520062.png

 

In advance thank you so much for your help!

 

KetanKumar
Shopify Partner
37139 3648 12061

@cherryangel 

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 [email protected] 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
masuimimax
Tourist
3 0 2

Hello! I got this working well but is there a way to hide the second image when not hovering? I'm using an image with a transparent background as the first image and this shows what's underneath. Here is an example page https://iamdeadly.com/collections/i-am-sin

masuimimax
Tourist
3 0 2

Got it working on Debut theme but when a product only has one image it shows a white square with No-Image. How do I change that so it just shows the main image when a product only has one image?

KetanKumar
Shopify Partner
37139 3648 12061

@masuimimax 

yes please show me 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 [email protected] 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
masuimimax
Tourist
3 0 2
KetanKumar
Shopify Partner
37139 3648 12061

@masuimimax 

i have check its working fine doesn't 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 [email protected] 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
GMco
Tourist
6 0 3

Hi! I am also using the Debut theme and would like to have the second image revealed on hover. Is it possible to have the full code displayed and exactly where to add it? Thank you so much!

KetanKumar
Shopify Partner
37139 3648 12061

@GMco 

Thanks for post 

yes can you please flow this step

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 [email protected] 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
GMco
Tourist
6 0 3

Thank you for your quick reply. However, I followed the directions step by step and it is not working for me. Not sure what I did wrong. Any other advice?

KetanKumar
Shopify Partner
37139 3648 12061

@GMco 

Thanks for it

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
GMco
Tourist
6 0 3

Thank you so much! I will be in touch soon.

KetanKumar
Shopify Partner
37139 3648 12061

@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 [email protected] 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
37139 3648 12061

@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 [email protected] 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
37139 3648 12061

@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 [email protected] 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
37139 3648 12061

@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 [email protected] 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
37139 3648 12061

@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 [email protected] 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
37139 3648 12061

@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 [email protected] 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
37139 3648 12061

@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 [email protected] 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