Collection pictures too large (effortless theme)

Retired Boards Appdev Store Design
1

My collection pictures are full screen when I go to the individual collection page. I have tried saving my product photos in a smaller pixel size and use those for my collection images but that doesent change the size. Is this just a function of how Effortless is formatted?

2

Changing to this template has given me a lot of headaches, too.
In the documentation, they recommend 770px x 700px (pixels).

It is a little bit of work but you can resize your images.
You can do this in photoshop or paint on Windows, Iā€™m sure Mac OS has a similar type program.

I found using Paint in Windows 10 pretty straightforward.

  1. Open the image in Paint

  2. Change the % so it fits well inside the window. I use 30% or so but if you have 100% it may be too big. This is just your view of it and has nothing to do with how the image will turn out.

  3. Select the Canvas tab.

  4. Then resize the image but be sure to lock the aspect ratio (in paint they call this ā€˜resize image with canvasā€™), so the image doesnā€™t distort when you resize it. You basically just drag the borders up or down, left or right.
    If your product is taller than wide, scale it to as close to 700 wide as possible. If your product is narrower than tall, scale it to 770 tall.

  5. Then deselect the ā€œresize image with canvasā€ and expand the canvas size until you get it close to 770 x 700. (In photoshop, this would be ā€œcanvas sizeā€). Then just adjust the borders of the canvas so it it is as close to 770 x 700 as possible. Ideally keep your product centered. In my case my products are almost all taller than wide in real life, so the canvas has a lot of white space to the left and right.

Be sure to save it as new! In fact, save as new before you start is a good practice so you donā€™t overwrite your original image.

Then go into your admin products page and add the new image that is 770x700. You can remove the previous images that are the wrong size.
On this theme if you have image options or multiple images, you may need to change the image on the product page (which is what appears in the collections), and on the variant page (which is where other options appear, and your customers can scroll through the image e.g. front/back/side/multi-pack/color etc.

Hopefully this is helpful I am by no means an image expert but this is what I had to go through.

1 Like