Melbourne ecommerce theme - Product image sizes
From Spiffy Stores Knowledge Base
The Melbourne theme (V11.3) now includes the option to display your product and collection images in portrait, square or landscape format. To update your theme to the latest version, please go to the Design & Assets -> Theme Gallery section of your store's admin.
Before updating your theme, make sure you download a backup of your theme in the Design & Assets -> Upload/Download theme section of your store's admin. This will download a zip file of your with your logo, and any other images such as parallax or slideshow images so you can re-upload them again in your theme editor.
Once you've updated your theme, you'll find the option to change the image format in the Design & Assets -> Theme Editor section under "Collection pages" for collection images and "Product pages" for images on the product page.
Portrait images
By default, the Melbourne theme uses portrait images. For portrait format, we recommend uploading portrait images that are 1515px wide x 2048px high. This is to ensure your store will display retina quality images on mobile devices.
If you don't have high-resolution images, the minimum size product image you upload should be 800px wide x 1020px high. The theme supports any size image, but it's best that you keep your images all the same dimensions so that you have control over what parts of images are cropped off.
You can also change your store's built-in product image sizes so that images are resized to the correct dimensions. To do this, follow the instructions below;
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
To crop parts of the image, use the "Cropped" option - recommended
- 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 only the box for “Cropped”.
- Change the “Medium Image” dimensions to 300 wide and 300 high, and tick only the box for “Cropped”.
- Change the “Large Image” dimensions to 800 wide and 1020 high, and tick only the box for “Cropped”.
- Click the “Save” button.
Or to add white padding around images, use the "Padded" option.
- 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 only the box for “Padded”.
- Change the “Medium Image” dimensions to 300 wide and 300 high, and tick only the box for “Padded”.
- Change the “Large Image” dimensions to 800 wide and 1020 high, and tick only the box for “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 image editing 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. There's a great one online at http://pixlr.com/ (Advanced Pixlr editor)
If you’ve got a handle on editing your own images… give it a go!
If you upload product images that are 1550px wide x 2048px high, then your photos should come out gorgeous on all pages.
Square images
For square format, we recommend uploading square images that are 2048px wide x 2048px high. This is to ensure your store will display retina quality images on mobile devices.
If you don't have high-resolution images, the minimum size product image you upload should be 800px wide x 800px high. The theme supports any size image, but it's best that you keep your images all the same dimensions so that you have control over what parts of images are cropped off.
You can also change your store's built-in product image sizes so that images are resized to the correct dimensions. To do this, follow the instructions below;
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
To crop parts of the image, use the "Cropped" option - recommended
- 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 only the box for “Cropped”.
- Change the “Medium Image” dimensions to 300 wide and 300 high, and tick only the box for “Cropped”.
- Change the “Large Image” dimensions to 800 wide and 800 high, and tick only the box for “Cropped”.
- Click the “Save” button.
Or to add white padding around images, use the "Padded" option.
- 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 only the box for “Padded”.
- Change the “Medium Image” dimensions to 300 wide and 300 high, and tick only the box for “Padded”.
- Change the “Large Image” dimensions to 800 wide and 800 high, and tick only the box for “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 image editing 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. There's a great one online at http://pixlr.com/ (Advanced Pixlr editor)
If you’ve got a handle on editing your own images… give it a go!
If you upload product images that are 2048px wide x 2048px high, then your photos should come out gorgeous on all pages.
Landscape images
For landscape format, we recommend uploading landscape images that are 2048px wide x 1515px high. This is to ensure your store will display retina quality images on mobile devices.
If you don't have high-resolution images, the minimum size product image you upload should be 1020px wide x 800px high. The theme supports any size image, but it's best that you keep your images all the same dimensions so that you have control over what parts of images are cropped off.
You can also change your store's built-in product image sizes so that images are resized to the correct dimensions. To do this, follow the instructions below;
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
To crop parts of the image, use the "Cropped" option - recommended
- 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 only the box for “Cropped”.
- Change the “Medium Image” dimensions to 300 wide and 300 high, and tick only the box for “Cropped”.
- Change the “Large Image” dimensions to 1020 wide and 800 high, and tick only the box for “Cropped”.
- Click the “Save” button.
Or to add white padding around images, use the "Padded" option.
- 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 only the box for “Padded”.
- Change the “Medium Image” dimensions to 300 wide and 300 high, and tick only the box for “Padded”.
- Change the “Large Image” dimensions to 1020 wide and 800 high, and tick only the box for “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 image editing 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. There's a great one online at http://pixlr.com/ (Advanced Pixlr editor)
If you’ve got a handle on editing your own images… give it a go!
If you upload product images that are 2048px wide x 1550px high, then your photos should come out gorgeous on all pages.
Image size FAQ
Q: My images look stretched. How can I fix that?
A: If your images look stretched, they have been uploaded stretched. The theme cannot stretch images. Try uploading a normal image that you haven't resized.
Q: My images look blurry. How can I fix that?
A: If your images look blurry, they are not high enough quality for this theme. You should try using a different theme if you're going to use low quality images.
Q: My images are chopped off. How can I fix that?
A: The Melbourne theme supports images at specific sizes. If there are parts of an image that you don't want chopped off, then you should crop your images to the specific dimensions above, or add some padding to your images so that they aren't chopped off.