How do I Resize Product Thumbnails on Mobile and Show More Images?

Store Design
, , , ,
1

Hi everyone,

I need help adjusting my product thumbnails on mobile. Right now, they appear too big, and I want to make them smaller while also displaying more thumbnails at once.

Here’s an image of how it currently looks:

Screenshot_35.png
Screenshot_35.png452×783 211 KB

For reference, I want it to look more like this: https://hears.com/products/brass-blue

This issue is only on mobile. I have applied some custom code to make the main product image full width on mobile, which might be interfering with the thumbnail layout.

Here’s my product page: https://q0p3zs-fq.myshopify.com/products/test1

Any help on how to resize the thumbnails and display more (only on mobile) at once would be greatly appreciated! Thanks in advance! :blush:

2

Yes please, if that works it would do wonders!

3

Hi @getbodyfuel

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (max-width: 749px) {
    .thumbnail-list__item.slider__slide {
        width: 48px !important;
    }
    .thumbnail-slider button.slider-button {
    display: none;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!