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 --- */
.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 section for earlier versions of Pipeline. 


Where do I add the code?

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.


Earlier versions of Pipeline

If you enlarge the images to something like 240px, you'll need to also boost the image quality of the thumbnails for earlier versions of Pipeline before Pipeline v3.1.

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 - */
2

Modify the resolution in the product.liquid file

Open product.liquid in the Snippets folder:

Quick link for live/published theme:
https://shopify.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