Thumbnails on Dawn theme mobile not working

Store Design
,
1

I recently realised my thumbnails on Dawn theme arent working on mobile. While people can see them, when you click on them, they aren’t seeming to display the image. Any idea what’s causing this to go wrong?

2

@greenwichsocial can you please share this page link where you are facing this issue?

3

Hi @greenwichsocial

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Thanks!

5

@greenwichsocial looks like you have stacked product images and not slider, can you please open product page in customize settings to check if you have an option to activate thumbnails

6

I have thumbnails active on mobile only. But they are not populating with main image when I click on them. I don’t want them on desktop view, only mobile.

7

Hi @greenwichsocial

This error is coming from Dawn’s media gallery JavaScript, and it directly explains why thumbnails work visually on mobile but don’t change the main image when tapped.

What the error means

TypeError: Cannot read properties of undefined (reading 'dataset')

In simple terms:

  • The script is trying to read element.dataset

  • But the element does not exist (undefined)

  • So the JS crashes and the gallery stops responding

The key line is:

media-gallery.js:26 → onSlideChanged()

That function expects a slide element with data attributes, but on mobile it isn’t finding one.

Why this happens in Dawn (most common causes)

Gallery HTML structure was modified

If you:

  • Customized thumbnails

  • Added a custom slider (Swiper / Flickity)

  • Changed product-media markup

Then Dawn’s JS can no longer find:

data-media-id
data-media-position

Mobile-only CSS / JS is hiding or removing slides

For example:

@media (max-width: 749px) {
  .product__media-item { display: none; }
}

Or JS that conditionally removes media on mobile.

Desktop works, mobile breaks.

App conflict

Apps like:

  • Image zoom

  • Gallery / variant image switchers

Often overwrite or remove data-* attributes that Dawn depends on.

Missing required data attributes

Every media item must have something like:

<div class="product__media-item"
     data-media-id="123"
     data-media-position="1">

If even one slide is missing this, the gallery can crash.

Quick & safe fix (prevents JS crash)

Add a defensive guard in
assets/media-gallery.js (around line 26):

onSlideChanged(event) {
  const slide = event.target?.selectedSlide || event.detail?.slide;

  if (!slide || !slide.dataset) return;

  const mediaId = slide.dataset.mediaId;
  if (!mediaId) return;

  // existing code continues
}
8

Who has added this code to the bottom of your 'assets/base.css`?:

@media only screen and (max-width: 749px) {
  .slider-dots{display:flex;}
  .product__media-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
/*    flex-direction: column;       <-this line breaks the theme code */
    gap: 12px;
    scroll-snap-type: y mandatory!important;
    -webkit-overflow-scrolling: touch;
    padding: 10px;margin-top:0px!important;
  }

  .product__media-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .product__media-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  media-gallery .slider-buttons{display:none!important;}
  .product-media-container.media-type-image.media-fit-cover.global-media-settings {
    border: none;
  }
      .product__media-list .product__media-item {
        width: 100%!important;
    }
  .slider.slider--mobile .slider__slide{margin-left:0!important;}
}

The problem is because of the line I’ve commented out.

When Slider initializes, it does some calculations which depend on slides to be in one row, next to each other.

This code makes them stacked, calculations break and slider does not work anymore.

I’d seriously consider removing this entire custom code; but at least consider commenting this line out.

9

Thanks, I don’t want to remove the stack, this was built by a Shopify developer. But I do want to get the mobile thumbnails back too. If I remove that line, will it remove my entire stack function?

10

This rule works only on mobile, where you do not want stacked images, but want a slider.

Looks like this developer were not very good if they left you with thumbs which do not work.

12

Hi @greenwichsocial ,

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

img.global-media-settings.global-media-settings--no-shadow.active {
    width: 380px;
}

image
image827×602 37.4 KB

Thanks!