I need to move main product image thumbnails to the left vertical position of the main product image on MOBILE ONLY in Dawn theme

Store Design
, ,
1

I need to move main product image thumbnails to the left vertical position of the main product image on MOBILE ONLY in Dawn theme. They currently site horizontal underneath the main product image. Please could someone help to provide the code?

1 Like
2

You might not like that outcome, as it would make the main image much smaller to accommodate the thumbnails on the side, on an already narrow screen.

3

Hi @144

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

Hello, @144

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.

@media screen and (max-width: 749px) {
  .product--thumbnail .product__media-list {
    display: grid !important;
    grid-template-columns: 80px 1fr !important; Adjust 80px to your preferred thumbnail width
    grid-template-rows: auto !important;
    grid-column-gap: 1.5rem !important;
  }

  .product__thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column !important;
    overflow-y: auto !important; 
    max-height: 500px !important; Adjust the max height as needed
  }

  .product__media-item.grid__item {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  .thumbnail-list.list-unstyled {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .thumbnail-list__item {
    width: 100% !important; 
    margin-bottom: 1rem !important;
  }
}

Thank You!

5

Hi,

Hope this will help

  • Paste a mobile-only CSS block that re-lays out Dawn’s gallery into [thumbnails | main image].

CSS example

/* === Mobile-only: move product thumbnails to a vertical strip on the LEFT === */
@media screen and (max-width: 749px) {
  /* The whole media area becomes a 2-column grid: [thumbnails | main image] */
  .product__media-wrapper,
  .product-media {
    display: grid !important;
    grid-template-columns: 64px 1fr;   /* left strip width | big image */
    column-gap: 12px;
    align-items: start;
  }

  /* Make sure the main image sits in the right column */
  .product__media-wrapper .slider-mobile-gutter,
  .product__media-wrapper .product__media-list,
  .product-media .slider-mobile-gutter,
  .product-media .product__media-list {
    grid-column: 2;
    grid-row: 1;
  }

  /* Put the thumbnails in the left column */
  .product__media-wrapper .thumbnail-slider,
  .product-media .thumbnail-slider {
    grid-column: 1;
    grid-row: 1;
    /* Remove any default margins/paddings that push it under the main image */
    margin: 0 !important;
  }

  /* Stack thumbnails vertically */
  .thumbnail-slider .thumbnail-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 160px);   /* prevent super tall lists */
    overflow-y: auto;
    padding-right: 2px;                 /* tiny space for scrollbar */
  }

  /* Make each thumbnail fit the skinny left strip */
  .thumbnail-slider .thumbnail-list__item,
  .thumbnail-slider .thumbnail {
    width: 100% !important;
    max-width: 64px !important;  /* same as left column */
  }

  /* Hide any horizontal scroller styles Dawn sets on mobile */
  .thumbnail-slider .slider--mobile {
    overflow-x: hidden !important;
    white-space: normal !important;
  }

  /* Optional: make the selected thumbnail a bit clearer */
  .thumbnail[aria-current="true"] {
    outline: 2px solid rgba(0,0,0,.5);
    outline-offset: 0;
    border-radius: 6px;
  }
}

  • Desktop/tablet layouts stay the same.

  • No Liquid/JS changes needed; safe, reversible, and update-friendly.