Tweak thumbnails size

By default, our theme has a complex resizing algorithm in place for thumbnails. All thumbnails will be proportionally resized, making sure that the screen is always filled with thumbnails. This means that on larger screens you might have larger thumbnails and also, more thumbnails per row. On smaller screens, you may have less or smaller thumbnails. But there is no rule - the theme will make sure that the screen is always filled and that the visible thumbnails are not too large, in order to keep a sharp view.

If you want to bypass this behavior, you need to edit the theme's main stylesheet,  /assets/css_main.scss.liquid file and paste the following code at the very end of the file:

.grid-item {
  width: 33.33% !important;

This code will force a three columns grid view on any resolution. You can use any percentage value and the thumbnails will be resized accordingly.

If you want to apply such changes only to various pages, such as the homepage, you'll have to prepend an identifier for each declaration, like this:

.template-index .grid-item {
  width: 33.33% !important;

The code above will apply this change only on the homepage. 

If you want to further tweak the thumbs size based on screen size, here is how to write the code:

@media all and (max-width: 640px) {
  .template-index #product-page .grid-item {
    width: 50% !important;

The code above will force a two columns grid view on resolutions smaller than 640px.

These are only some examples. From this starting point you can customize the size of the thumbnails in the theme, exactly as you wish.