Products: Larger thumbnail images

You can increase the size of your product thumbnail images with some custom code.

Result

Before:

After:

How-to

On a new line, add the following code to the very bottom of this file:

Open your assets/style.scss.liquid file:
https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

/* --- code to enlarge product thumbnail images --- */
.product__thumbs--square .slick-dots li {
    height: 100px;
    width: 100px;
    margin: 10px 5px;
  }
.slick-dots li img { 
	height: 100px; 
	width: 100px; 	
  }
/* - end - */

Notes:

The default height and width is 40px; 


Example of margin change if using larger images like 140px:

/* --- code to enlarge product thumbnail images --- */
.product__thumbs--square .slick-dots li {
    height: 140px;
    width: 140px;
    margin: 10px 1px;
  }
.slick-dots li img { 
	height: 140px; 
	width: 140px; 	
  }
/* - end - */

To boost the quality of the thumbnails, see the next example and complete Step 2 for any of the above size changes. 


If you enlarge the images to something like 240px, you'll need to also boost the image quality of the thumbnails.

1

Code change for larger thumbs

/* --- code to enlarge product thumbnail images --- */
.product__thumbs--square .slick-dots li {
    height: 240px;
    width: 240px;
    margin: 10px 1px;
}

.slick-dots li img { 
	height: 240px; 
	width:240px; 	
}
/* - end - */

Save the file.

2

Modify the resolution in the product.liquid file

Open the assets/product.liquid file
https://myshopify.com/admin/themes/current?key=snippets/product.liquid

Use the Find feature in the code section (Command-F on Mac or Control-F in Windows)

Search for:

small_cropped

There will be two instances.

Change both to:

1024x1024

Example:

Save the file. 

Now your thumbnails will be higher quality and not pixelated after increasing the size. 

Still need help? Contact Us Contact Us