Products: Larger thumbnail images

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

Before:

After:

Code:

/* --- code to enlarge product thumbnail images --- */

// Adjust thumb size on next line. Default is 40px;
$thumbSize: 90px;

// Do not change below this line

.product__thumbs--square .slick-dots li {
    height: $thumbSize;
    width: $thumbSize;
    margin: 10px 1px;
  }
.slick-dots li img { 
	height: $thumbSize; 
	width: $thumbSize; 	
  }

/* - end - */

Notes:

The default height and width of the theme is 40px;

Adjust this value 90px; to your desired size:

Note: Be sure the px; is included after the number value - That's required or will break the theme. 

To boost the quality of the thumbnails, see the next section.

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Optional: Thumbnail Image quality

As in increase the size of the thumbnails, the resolution of the thumbs may need to be modified. Here's how you can boost the image quality of the thumbnails.

Open product.liquid in the Snippets folder:

(1) Use the Find feature in the code section (Command-F on Mac or Control-F in Windows) and search for:

small_cropped

(2) There will be two instances:

Change both to:

grande

Example:

Save the file (top right):

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