Why aren't all product images displaying correctly on mobile and desktop?

[PickleMonsters]

Hello, I'm going to try and explain this without it being too complicated. I have dawn theme. On my individual product pages, I have about 3-5 color variants per product, which results in 1-2 photos PER variant (e.g. front of hat, back of hat). I also have it ordered in the media section on the product page exactly how I would like it displayed (e.g. front black cap, back black cap, front white cap, back white cap, etc.)

However, when you go to a product on mobile, it's not displaying all the images. For example, it will show a black front hat, then 4 backs of hats images (and no fronts of caps, even though they're on the product page on the backend). And doesn't even show all the images. Same thing on desktop, it doesn't display all the images.  

The images are all be the same size, so it's not a size thing. Anyone know why this is happening?

Also one other thing, if I have a blue cap displayed as my main image, if someone clicks it, it takes them to another color once inside the product page. Do you know why this is also happening? 

Happy to answer more questions if this was confusing. Thank you!!!! 

[Dirk]

Hey, @PickleMonsters 

Happy to look into this for you. Do you have a link to one of your products that you can share so I can take a look for myself? From there we can isolate any potential causes.

If there is anything else I can help you with, please let me know.

[PickleMonsters]

Hi! Yes, here are a few links (with explanations): 

https://birdiedink.com/products/south-carolina-pickleball-hat

Here you'll see it shows the main image of the hat and then all just the backside of each hat. 

0-0-2 Score Hat: 

https://birdiedink.com/products/pickleball-o-o-2-score-trucker-hat

Here you'll see that it shows one color hat and then the alternate is a back of hat and a side view (different colors) 

Keep in mind, in the backend, all my product pages have multiple images (front and back). So not all the images are showing in the order that i've listed the "media" in the backend. 

Thank yo SO much for any help/guidance!!! 

[Dirk]

Okay, and just to confirm so we are on the same page here:

When a customer cycles through the different variants (colors), do you only want to display the relevant photos associated with that variant? For example, if the customer selects the 'Cranberry' variant do you want the photo gallery to only show the two cranberry variant images?

If there is anything else I can help you with, please let me know.

[PickleMonsters]

Hi! Not exactly. My issue is that there are images in my product media (aka the back end of Shopify product page) that are not showing up on desktop or mobile ---  and the images that are being displayed are being displayed in the wrong order (not the that the images are organized on the media section. Even if I adjust the order on the product page itself, it doesn't appear correct to the customer. Does that better explain it? Thank you! 

[PickleMonsters]

Hi Dirk - I think I figured it out!! It was a setting on the product information via each product template. I set it to Show Thumbnails & unchecked the hide variants and I think it is working now. I will let you know if it's not! Appreciate the help so much! 

[Dirk]

Hey, @PickleMonsters 

Happy to hear you were able to find a resolution to the product variant images not displaying to your liking. If for some reason it is still not functioning to how you had hoped for, let me know and we can look into this further.

[NateveAustralia]

Hi @PickleMonsters , jumping onto a previous thread of yours here as i too am having the same issue.  I have say 6 images available and the mobile display is showing from say image 3, instead of image 1 (my hero shot).  And of course people then generally wouldn't scroll back to the left, only the right.  You mention you changed the Thumbnails - could you please advise exactly where i would find this?  Is it under the Theme Settings, or via the product set up itself? Thanks, Charlie