Storefront Edge theme, change homepage Latest Products thumbnail size.

Posted by on Apr 15, 2012 in Blog, Edge, Storefront Themes | 3 Comments

Why are the thumbnails in the Homepage Latest Products grid badly cropped?

Storefront themes Edge theme has two possible home page layouts. The Homepage #2 Template has a grid area below the slider titled “Latest Products”. This displays a grid of thumbnails showing, you guessed it, the most recently added products. Max 2 rows of 3 thumbnails. The problem is these are hard coded to be 140×140 pixels which can cause some pretty ugly cropping in a high visibility area if your product images are not square. So how to change this? Luckily this is easy.

Locate the home_template.php file which is in Edge theme folder. Make a safe copy somewhere in case you have problems. Really this one is so easy you could just do the edit by going to Appearance/Editor in WordPress, and clicking home_template.php on the file list.
Around line 89 in Edge 1.0.5 you will find two numbers that set the width and height for these thumbnails. I have included enough code so you can find the correct section. The line numbers may vary slightly depending on your version.

		$width = '140';

		$height = '140';

	$latest_products = get_posts( array(
		'post_type'   => 'wpsc-product',

Change the numbers to suit your product images. You can use the handy online aspect ratio calculator to work out the size. I suggest you stick with 140 wide and adjust the height. Web page layout is more flexible for height changes than width. For example if your single product page images are 300 wide x 400 high, to retain the same aspect ratio and keep the width of 140 pixels, you would use a height of 187 pixels.

The thumbnails will actually be regenerated at the new size when you reload the page, not just stretched by CSS!


  1. Dharmesh
    December 13, 2015

    Hi great wiedgt, is there a way to use your wiedgt on the page. I am looking at getting 4 recent posts (4 different categories) in columns next to each other underneath some content. So was looking for a short code please. Hope you can help. Thanks

  2. KatC
    August 7, 2012

    What if you’ve downloaded over a thousand products and all the images are of different sizes?

    • mgason
      August 7, 2012

      The images will be resized once you change these numbers. You may just have to pick a size that seems to work reasonably well. As it is latest products on the home page you could set up a system for keeping any new images the right size.
      This is only for the homepage grid remember. You can click the “working with images” link on the right here to see more posts on image size in the product section of WP e-Commerce


Leave a Reply