Testament Theme: Making images the same size

So you have your new Shopify store with your new theme but your images are all different sizes.
This results in product titles being thrown out of alignment!

This is a common issue.... In the long term and in the effort to give your customers the best possible shopping experience ideally you should look to correct the image sizes... Sometimes this takes money which you might not have.

In the short term there is a solution that will save you time, money and stress.

We can use a maximum height on images shown on collection pages ( multiple products ) to help keep them aligned, this is how:

  1. In your Shopify admin click on Themes > customise theme > edit HTML / CSS
  2. On the next page open: Assets > stylesheet.css.liquid
  3. Scroll to the bottom of the page and add this:
 .product-index img { max-height: 320px; }

4. Click save

Refresh the collection page view of your store to see what is going on with the alignment.
You may wish to return to the code that you just pasted in to increase or decrease this number until you start to see good alignment across the site.

What about Tablet and Mobile?

As you are limiting the size on these images here you are not quite out of the woods.
On a tablet display your product images will resize and you may encounter more issues with these... The same goes for mobile so a number of further alterations are needed.

At the bottom of stylesheet.css.liquid you have just placed this:

 .product-index img { max-height: 320px; }

Add this beneath it:

 /* Target all Tablets */
 @media screen and (min-width: 760px) and ( max-width:1024px ) {
 .product-index img { max-height: 280px; }
 /* Target all Mobiles */
@media screen and ( max-width:760px ) {
.product-index img { max-height: 280px; }

Click save when done.
Again you may want to test and tweak those numbers depending on how the products are showing on different devices.