How to change small images width

Shopify Discussion

Topic summary

A Shopify store owner wants to modify product variant image display to show 4.5 images instead of 4 complete images, with the fifth image partially visible to indicate scrollability.

Solution Provided:

  • Add CSS code to adjust thumbnail width to 20% (allowing 5 images to fit)
  • Code targets screens wider than 900px using media query
  • Modifies .thumbnail-list__item.slider__slide width property

Implementation Options:

  1. Add code to Custom CSS section in theme customizer (Product Page settings)
  2. If Custom CSS is full, add to base.css/theme.css/style.css/main.css/custom.css via Edit Code

Outcome:
The CSS solution successfully resolved the issue. The store owner confirmed the problem was fixed after implementing the code in their theme files.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello guys as you can see in the picture there are 4 variant images visible without scrolling. How can I change that and make it like 4,5 images. Basicall 4 complete images and the 5th should be half, so that the people would know that there are more images and they should scroll.

NikosBat_0-1738253754909.png
NikosBat_0-1738253754909.png408×758 287 KB

2

Hello @NikosBat

Can you please share your store URL so I can check this?

1 Like
3

Hi @NikosBat ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

1 Like
4

Hi there

  1. Go to Customize

brisk_code_1-1738255864806.png
brisk_code_1-1738255864806.png1440×789 124 KB

  1. Select Product Page

brisk_code_0-1738255823371.png
brisk_code_0-1738255823371.png2010×959 209 KB

  1. Paste the code in Custom CSS section

brisk_code_2-1738255899958.png
brisk_code_2-1738255899958.png608×890 44.8 KB

code:

@media screen and (min-width: 900px) {
  .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    width: calc(20% - 2rem) !important;
  }
}
1 Like
5

Hello CodingFifty, of course here is the url and password:

https://www.nistore.de/products/3-in-1-dog-hair-brush-cat-hair-brush-electric-pet-cleaning-brush-steam-spray-brush-massage-hair-removal-comb-anti-flying-brush

nikthe

6

Hey Brsik_code and thanks for answering, my Custom CSS code is already full i cant add more codes in there. Can i paste the code somewhere else?

7

Hi @NikosBat ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (min-width: 900px) {
  .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    width: calc(20% - 2rem) !important;
  }
}
1 Like
8

Thank you very much CodingFifty, that solved my problem

9

You’re welcome! @NikosBat

10

He copied my answer :joy: