Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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;
}
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
Also is it possible to make this hover to the last image rather than the second image?
Many thanks
Jess
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
Also is it possible to make this hover to the last image rather than the second image?
Many thanks
Jess
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
i have check its work please share screenshot if any issue
cam you please send store url
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
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
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;}
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
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
your link doesn't work
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.
Thank you
Hello,
Can not find any CSS.liquid not even styles.css.liquid
Hi @iamcurious nice to know it works on your website.
however, how did you manage to get it work for all the rows?
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
Yes, but it's not working all browser and mobile design
Could you send me a code so I can try?
Would be great!
Thank you!
Thanks for it
can you try and modification this code
https://codepen.io/theadameden/pen/ReypqN
https://codepen.io/Alexee/pen/NXgYmN
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
YES, IS POSSIBLE TO CUSTOM CODE
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
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.
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.
sorry for any issue
please share store url and issue images
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
thanks for detail
do you have like this
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>
yes please modification this code
I know.
I am asking you if you can modify this for me and give me the code, as no matter what I try, it does not seem to work.
To have the second image show on hover.
And what would that custom code be? I've been looking everywhere and trying to sort out which image is revealed rather than it being the last image.
can you please share store url
yes, shopshelovesme.com
Yes, please add this code and let me know
User | RANK |
---|---|
137 | |
97 | |
79 | |
62 | |
61 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023