Product page: Display thumbnail images on mobile

This article is for merchants who want to display product media thumbnails as images  - and not navigation dots - on the product page, for all screen sizes.

The following instructions will provide you with some custom CSS code that you can add to your store to display your thumbnail images in a continuous single line, using a scroll bar to handle the page overflow. Using this code will display the thumbnail images in a custom slider when there's not enough space on the page to display them normally on a single line.

Warning: Before beginning, we recommend you duplicate your existing theme as a safety precaution. Follow steps 1-3 below but select  Duplicate instead of Edit code at Step 3.

1

Log in your Shopify store admin https://shopify.com/admin/themes

2

First thing you should do is duplicate your theme for safety backup if anything goes wrong. To do this look for the button with the  three dots next to the Customize button and select Duplicate.

3

Now you need to edit your code - again look for the button with the  three dots next to the Customize button and click Edit code.

4

When the code view appears scroll down and find the Assets folder on the left of the window. Inside that is the theme-critical.css file. (for the themes older than version 4.7, the file is named theme-critical.scss.liquid)

5

Scroll right to the bottom of this file and once you can go no further paste in the CSS custom code below.

6

Lastly save your work and then check that all is working as expected.

/*SHOW THUMBNAIL IMAGES ON MOBILE*/

@media screen and (max-width: 767px) {

  .product-single__photos.product-single__photos .slick-dots .product-single__photo-thumbs__item.product-single__photo-thumbs__item {
    background-color: rgba(240, 240, 240, 0.8);
    width: 56px;
    height: 56px;
    border: 2px solid transparent;
    border-radius: 0;
  }

  .product-single__photo-thumbs__img.product-single__photo-thumbs__img, .product-single__photo-thumbs__badge.product-single__photo-thumbs__badge {
    display: inline;
  }  

  .product-single__photo__nav.product-single__photo__nav.product-single__photo__nav {
    padding: 0 0px;
  }

  .product-single__photo__nav__item.product-single__photo__nav__item.product-single__photo__nav__item.product-single__photo__nav__item {
    display: none !important;
  }

  .product-single__bottom.product-single__bottom.product-single__bottom {
    padding-top: 6px;
  }

  .product-single__photo__nav__dots.product-single__photo__nav__dots {
    width: calc(100vw - 36px);
  }

  .product-single__photo__nav__dots .slick-dots {
    white-space: nowrap;
    overflow: auto;
    padding-bottom: 9px;
  }

  .product-single__photo__nav.product-single__photo__nav {
    width: 100%;
  }

  .product-single__photo__nav__dots .slick-dots::-webkit-scrollbar {
    height: 12px;
  }

  .product-single__photo__nav__dots .slick-dots::-webkit-scrollbar-thumb {
    background: #f0f0f0;
    border-radius: 10px;
  }

  .product-single__photo__nav__dots .slick-dots::-webkit-scrollbar-thumb:hover {
    background: #e4e4e4;
  }
}