Mobile Version of site is Showing second Product Image by default

[BenH40]

Morning Community,

Its been brought to my attention that viewing our price in mobile format that our store is only displaying the second image in our store not that main product image and its been discovered that its the same thing with our sister retail site as well.

any incite into this would be helpful know doubt its JS related but i have not been able to see anything in the help guides for this.

Cheers Guys

https://www.agp.net.au/

password - Burgess

[made4Uo]

@BenH40

I see what you mean. The instruction below should fix the issue

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the theme.css
3. Paste the code below at the very bottom of the file.

@media only screen and (max-width: 750px) {
.aspect-ratio.aspect-ratio--square > img:nth-child(2) {
    opacity: 0;
}
}

Outcome:

[KetanKumar]

@BenH40

oh sorry for this issue, this theme code issue also by default on hover doesn’t change bcz mobile device hover convert to touch if user click go to product page on mobile only
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.

@media screen and (max-width: 999px) {
.product-item__secondary-image {
    opacity: 0 !important;
}
}

Apply this code after view

[BenH40]

thanks for looking into this could it be that’s its affecting iPhone inserted code as you’ve said above but still seems to be not happening. Cheers

[BenH40]

Thanks for looking into this could I’ve applied the code to the theme.css file and it’s still not working so I’m thinking this a much bigger problem.

Cheeres

[KetanKumar]

@BenH40

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[BenH40]

Thanks for looking into this as to the system we have found this issue across all platforms we have tested from mobile to Chrome and Edge the crazy thing is it’s affecting both sites, but we haven’t done any work on that one for over a year. We only noticed it because our wholesale site has products that the retail side doesn’t have, like flower boxes which only have one image. Unlike most other products, it have multiple images. That’s why we discovered that the sites are only using the second image and note the main image.

The biggest clue is when you go into console mode and use the select element tool thats where it shows up.