Product page: Display thumbnail images on mobile

Important: This article is intended as a workaround solution only. Should this workaround not meet your stores needs, we would recommend speaking to Enhancify who carry out a variety of tasks on fixed price basis. Shopify also have their own Small Tasks service. For larger tasks or ongoing design work it would be a good idea to form a relationship with one of the Shopify Experts.

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 Actions dropdown button next to the Customize button and select Duplicate.
3
Now you need to edit your code - again look for the Actions dropdown button 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;
  }
}