How To Fix Product Sizes in Shopify

Are your products misaligned in Shopify? This is typically due to your product images being different sizes, cropped differently, etc. Images downloaded from the web are usually the biggest culprits.

It is always best to photograph your own images for your eCommerce store so that all of your product images are the same width and height. The easiest way to fix the issue of image alignment on collection and home pages is to always upload all of your product photos at the exact same size.

This involves adding extra space around product photos.

Here is a FREE way to solve this problem.

a) Watch This Video below or via this link: https://youtu.be/Na3Jp0OExH8

b) Go to: https://www.photopea.com – (you can also use photoshop, affinity, gimp or other image software but this online version is just like photoshop and it’s FREE)

c) Find an image that you would like to use for your website

d) In the Photo editor from B above, Create a NEW FILE and make the image size of that file 800px width by 800px tall. Some people like to make the images larger at 1200px by 1200px or larger, so for the instruction of this post, we will use 800×800

e) Fill the background color with white or the color you would like to use for the background of your images OR leave it transparent. ie: if leaving transparent, you should export your files as PNG files instead of JPGs as below to maintain the transparency

f) Open up the image you would like to use for your product in the editor. You now have the editor with the 800×800 px file and the product image you just uploaded.

g) Select the product image and select ALL then copy the image

h) Go back to the 800×800 file and PASTE this image. It will be larger or smaller depending on image selected. Select Transition or Scale the product image to fit on the 800×800 file. I will usually add a guideline towards the bottom of the file a few pixels above the bottom so that all of my product images will all have the same BASELINE. This is good if you have multiple products shown on your COLLECTIONS or CATEGORY pages, and will fix the alignment so they are all in a row.

i) Once you have the image centered on the 800×800 file. Select FILE — EXPORT or SAVE AS JPG – if you want a transparent background – save as PNG file.

j) One last step is to optimize this image so it loads quickly. Head over to tinyjpg.com or tinypng.com (free) and upload your image(s). Then download the optimized files.

k) Upload a few product images that will next to each other in category. If you did this correctly, all of your images should look the same height and width and be in a row and look awesome!

That’s It!

James Byrne is an Information Architect, USMC VET and the owner of After Dark Grafx

After Dark Grafx – Since 1992
“We Work After Dark, So You Don’t Have To!”

Home