Minimal theme: Product image size

From Spiffy Stores Knowledge Base

Revision as of 09:38, 9 June 2011 by Shawn (talk | contribs)

If your store uses the Minimal theme, we recommend uploading square images, around 600px. The reason for this is that when Spiffy Stores resizes an image, it maintains the aspect ratio.

For example, if you upload a product photo that is 400 × 600 (a tall rectangle), then display it using the “medium” size (as Minimal does on the home page and collection pages), then it will display as 180 × 240.

Similarly, if you uploaded a 600 × 400 image it would be resized as 240 × 180. Both of these examples will display “fuzzy” in the minimal theme, as it stretches images to fit so that they are always square.

Uploading an image that is 600px square means that all of your images will appear crisp and clean. They won’t appear to be stretched on any of your pages, and they will be sharp in the lightbox (when you click on the image in the product page).


Changing your stores’ product image sizes

To change the default image sizes that your Spiffy Store uses, you will need to do a couple of things… turn on advanced configuration options in your preferences, and then edit the product image sizes in your theme editor. Instructions on each step are below.

Step 1. Turn on advanced configuration options

  • Log in to your store, and go to the “Your Settings” page in the top right menu
  • Scroll down to the “Advanced Configuration” section, and tick the box that says “Enable advanced theme options.”
  • Click the “Save changes” button.

Step 2. Change your default image sizes

  • Go to the “Design & assets >> Theme editor” section of your toolbox in the top right menu
  • Scroll down to the “Custom Product Image Sizes” section.
  • Change the “Compact Image” dimensions to 100 wide and 100 high, and tick both the boxes for “cropped” and “padded”.
  • Change the “Medium Image” dimensions to 220 wide and 220 high, and tick both the boxes for “cropped” and “padded”.
  • Change the “Large Image” dimensions to 464 wide and 464 high, and tick both the boxes for “cropped” and “padded”.
  • Click the “Save” button.

Resizing your own photos

Resizing your images before you upload them gives you far greater control. Not everyone knows how to use these programs, which is why we have recommended the “Custom image sizes” option for most people.

Most people have some sort of image editing program that allows them to re-size or crop an image. There are plenty of free ones out there as well.

If you’ve got a handle on editing your own images… give it a go!

If you upload product images that are 600px wide x 600px high (landscape), then your photos should come out gorgeous.