Hi all! I have the debut theme and I’m trying to find where in the theme code I can change the size (dimensions) of thumbnails of products on collection pages. I’d like to increase the size of the thumbnails but still keep 4 thumbnails on a row.
My goal is to find where in the existing code I can change the dimensions vs adding new code. Any suggestions?
Thanks!
You shouldn’t change the size of these thumbnails by modifying the existing code, you should overwrite them.
To explain it as briefly as possible, Debut (and many other themes) use grids to ensure everything across the website has the same size. If you modify the size of one grid, it can yield unwanted results throughout the entire store.
Adding new CSS code will not have any impact on your website’s performance. Heavy javascript will. (apps, jQuery, etc).
With that said, I’d need to take a look at your website to be able to provide an accurate piece of code. You can’t really enlarge the thumbnail sizes (unless you’d be willing to remove the padding of each thumbnail), you’d need to enlarge the container thus making the thumbnails larger.
Something like this would work:
#Collection.page-width{
max-width: 1300px !important;
}
The 1300px can be modified to any width. The default is 1200px.
Kind regards,
Diego
