A problem showing images on products with multipul images

Store Design
,

Topic summary

Mobile product page malfunction: on phones, the image slider (carousel) on products with multiple images briefly shows the next image when swiped, then it disappears. Selecting a variant (product option) also fails to display its corresponding image on mobile.

Works as expected on PC/desktop; issue appears limited to mobile behavior.

Details provided:

Status and outcomes:

  • No fixes, workarounds, or diagnostics reported yet.
  • No code snippets or screenshots provided; the linked product page is central for understanding and reproducing the issue.
  • Discussion remains open with unresolved questions about the cause and solution.
Summarized with AI on December 23. AI used: gpt-5.
1

When I enter my site through the phone and get into a product page that has more then 1 image the slider doenst work, when I silde i just shows one image for a second and then it disapears, also the varients also doesnt work when i select one it doenst show its image. On pc everything works just fine.
look at this product for example: מראת ספורט בעיצוב אישי | מראה עיצוב אישי מתנות רומנטיות | פינת הזוגות – Couples Corner

2 Likes
2

Hi @Bendax

Okay. For this, I’ll need to check the theme files—specifically the slider JavaScript—to identify why the issue is happening on mobile.

3

Seems like the theme does not support RTL properly.

I’d try this – In Online store, make a copy of your theme, then click ... select “Edit theme code”. Open assets/theme.js and find this code (around line 2705?):

  _initThumbnailSlider: function() {
      var options = {
        slidesToShow: 4,
        slidesToScroll: 3,

Make it this:

  _initThumbnailSlider: function() {
      var options = {
        rtl: true,
        slidesToShow: 4,
        slidesToScroll: 3,

Ideally, also open layouts/theme.liquid, find

<html class="no-js"

and make it

<html dir=rtl class="no-js"
1 Like
4

Hello @Bendax

I have solve you problem,

first you remove
<html dir=rtl class="no-js"

this

dir=rtl

and add this CSS

.grid__item.product-single__photos .slick-track {
  position: absolute;
}
5

Hello,

Go to Online Store → Theme → Edit code.
Open your theme.css / based.css file and paste the code in the bottom of the file.

@media only screen and (max-width: 768px) {
  .product__media-list,
  .product__media-item,
  .slider {
    height: auto !important;
    min-height: 300px;
  }

  .product__media img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

Thanks!

6

Hi,

Hope this will help

Please check the follwing

  • Check your theme’s JS errors on mobile.
  • Disable any custom slider apps or scripts.
  • Try switching to an unedited version of your theme.
  • Clear Shopify’s built-in media settings.
  • Look at variant image linking.
7

Thank you! this worked perfectly, I worked on the solution for like 3 hours and you just straight up solved it in 2 line of code!