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?
1 Like
yes please show me issue images
Hi, try “Liger Lady” https://iamdeadly.com/collections/view-all
1 Like
i have check its working fine doesn’t issue
Having problem with stacked image on mobile only. I manage to make it work on desktop/laptop version but for mobile it has stacked images.
Store url: godzhand.myshopify.com
theme.css:
.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;
}
}
product-card-grid.liquid:
{% unless grid_image_width %}
{%- assign grid_image_width = '600x600' -%}
{% endunless %}
{% if product.images.size > 1 %}
{% endif %}
{{ product.title }}
{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}
{% include 'product-price', variant: product %}
sorry for that issue but on mobile device doesn’t work hover its was convert to hover to touch event
okay, but at the very least can you help me so it does not show 2 stacked images on mobile? So it just go back to the default one.
can you please show me issue so i will check and guide
Hi,
So basically on desktop/laptop version it works fine, but when it’s on mobile, it will look like this.
How can I make it to be able to just be 1 picture without hover/default, but if you can make it to hover too that would be awesome.
@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)
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
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:009900
1 Like
this only singale image
The upper row that I’ve marked, I want to remove it and have only rotatable product images to stay.
1 Like
yes, please add this code
- Go to Online Store->Theme->Edit code
- 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;}
}
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.
yes but what about a single image? at that time show only one
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.
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?
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 !
1 Like