Reduce thumbnail size on desktop on product page (Taste theme)

Store Design
, , ,

Topic summary

Goal: shrink variant thumbnails on the product page (Taste theme) by ~50% on desktop only to reduce crowding with many variants.

Solutions proposed:

  • Insert custom code in theme.liquid (added above the closing body tag). A result screenshot was shared showing smaller thumbnails, but the exact code content wasn’t detailed.
  • Add CSS in base.css/style.css/theme.css: a desktop-only media query sets .thumbnail-list to grid-template-columns: repeat(6, 1fr), increasing columns to make each thumbnail smaller. A before/after screenshot confirmed the effect.

Outcome: The CSS-in-assets approach was implemented and worked well. The requester preferred having it in base.css and thanked both contributors.

Follow-up/Status: A clarifying question remains open—what exactly determines each thumbnail’s box size beyond the column count (6 defines tiles per row, but what sets the actual dimensions)? No technical explanation was provided yet.

Key terms: A media query applies styles only above a certain screen width (desktop). grid-template-columns: repeat(6, 1fr) creates six equal-width columns, so thumbnail size is constrained by the grid’s column width within the container.

Summarized with AI on December 13. AI used: gpt-5.
1

Hi there,
I am busy building our webshop and I know my way around code a bit, even if Shopify’s liquid structure is new to me. I am getting the hang of the liquid coding, but I can’t seem to solve the thumbnail issue, so far.
I am trying to reduce the thumbnail size on the product page by about 50%, because some products have quite a number of variants and the page therefore becomes crowded quick.
Website is still not fully published, so password = medicus.
URL to specific product page: https://medicusserpens.de/products/dienstgrad-schlaufe-sanoa-diverse
Website language is German, so don’t be afraid. :wink:
You’re looking for the “SanOA - diverse” product.

Screenshot shows the thumbnails I would like to shrink by about 50%. It might look even more crowded, when you’re viewing this because I am still busy adding variant pics.
I would like to change this setting globally (all products), but only on Desktop view (certain screen size as limitation?), because on mobile there are no screenshots anyways.

Any help is much appreciated!

Screenshot 2024-12-04 at 14.12.48.jpg
Screenshot 2024-12-04 at 14.12.48.jpg2542×1432 233 KB

2 Likes
2

Hey @medicus-serpens

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1733318773070.png
Moeed_0-1733318773070.png1360×748 90.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @medicus-serpens

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 (min-width: 990px) {
    .thumbnail-list {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
4

Thanks a bunch! This would have also worked, but I wanted to incorporate it into the base.css file.
in any case: thanks for the super fast help, reply and working solution.

1 Like
5

Thanks a bunch! This worked a treat and it looks much neater now. Could you explain the specific css a bit more?
What determines the size of the individual thumbnail boxes? 6 determines to number of tiles per row, I guess, but what determines the size?
Cheers!

6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like