My images are different sizes. How can I line them up?

Are your product images all the same size? A lot of Shopify stores have images of various sizes, but we can still make your recommendations look great with some custom CSS. Here's how to get product images to line up nicely within the Better Recommendation widgets.

Here's an example store where the first of the three product images in smaller than the others. As a result, the product names and prices don't line up. We can apply custom CSS to line them up nicely so they look like this.

On the Better Recommendations installation page, click the tab for the widget you want to change. In this example we're dealing with recommendations on Product pages.

For the sake of this example we're temporarily adding an outline to each of the products so that it's easier to see the alignment. We do this with the following CSS code.

There are two approaches to lining up the images.

This lines up the product titles and prices, but the images are not aligned. It does have the advantage that if you have forgotten about any images that are bigger than the minimum you specified, they won't be truncated (though the title and price won't line up in that case).

vertical-align only works for table cells or inline elements. We'll make the <a class="betterrecs-link"> element that contains the image into a table cell, so that we can vertically align the image to the middle.

Amusingly, now that it's a table-cell we can't use min-height - we have to set the image height to a fixed value, so any images that are bigger will get cropped.

We also have to set the surrounding element to have display: inline-block so that the image continues to be centered horizontally.

If you added the outline temporarily as we did, don't forget to remove it again.

If you need any help with customizing recommendations widgets so they look great on your store, please don't hesitate to contact us.