Image scroll Error On My Website

Shopify Discussion

Topic summary

Product images on a Shopify store (theme: Fashionopolism) are not scrolling and, on mobile, were not appearing. The store owner added a mobile CSS rule to force #product-photos to display, but seeks confirmation and a fix.

A responder inspected the DOM and found two CSS rules hiding #product-photos on mobile. They suggested the theme likely uses a separate #mobile-product-photos container on small screens (mobile breakpoint), so either make #mobile-product-photos visible (display: block) on mobile or remove the display: none rules hiding #product-photos. Screenshots highlighting the hiding rules were provided and are central to the diagnosis.

They also noted a preview/thumbnail click issue. Proposed fixes: hide main-image-navigation arrows via CSS and add JS to switch the main image when a thumbnail is clicked (using .product-main-image and .product-thumbnail selectors).

Outcome: The store owner implemented the suggested CSS/JS, but it did not resolve the issue. Status: unresolved and still seeking an alternative solution. Key open point: which container (#product-photos vs #mobile-product-photos) should be active on mobile and how to correctly enable it without conflicting CSS.

Summarized with AI on February 3. AI used: gpt-5.
1

Hey! Shopify experts

kickweightwithkeisha.com This is my online store.

I’m facing an issue to scroll product images both on mobile and computer.

Give me the solution… I will really appreciate

Images were not appearing on mobile… Then I added this code. Tell me if this is right or wrong.

@media screen and (max-width: 739px){
#product-photos {display: block;}
}

Theme Name: Fashionopolism

Thanks in Advance

@GemPages

2

Hi @hiteshgolait

  1. When I check the element with id=product-photos, I see that 2 parts of this code hide the display of images on mobile.

view - 2022-12-12T162719.474.png
view - 2022-12-12T162719.474.png1915×976 252 KB

  1. Maybe the theme provider’s intention (on mobile) is that the element with id=product-photos will be hidden, and the element with id=mobile-product-photos will be displayed, then the result will be:

view - 2022-12-12T162856.791.png
view - 2022-12-12T162856.791.png415×907 165 KB

=> If you want to display like above, navigate to id=mobile-product-photos and make it visible on break-point mobile {display: block}
=> If it is displayed like the first image, please remove display none in the 2 red circled parts

  1. I noticed your click preview img is having a problem. You can hide the display of the 2 arrows and show the image by letting the customer click on the thumbnail.

Please add the CSS code to stylesheet.css at the bottom of the file:

#product-photos > main-image-navigation{
  display: none;
}
  • Add the JS code to your JS file (depending on which JS your theme uses)
let listPreview = $(".product-main-image");
let listThumb = $(".product-thumbnail");
listThumb.each((i,item1) => {
        item1.addEventListener("click",() => {
        listThumb.removeClass("selected");
        listPreview.removeClass("selected");
        item1.classList.add("selected")
        listPreview[i].classList.add("selected")
  })
})

I hope that it will work for you.

3

I placed the codes… But it did not work… Looking forward to another solution.