Coping with different image sizes

CSS

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.

Before

Irregular product image sizes - the first one is smaller

After

We've centered the images and made the titles and prices line up


Step-by-step

1. Open Preview

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.

Click Open Preview

2. Click 'Custom CSS'

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.

.betterrecs-product { 
   border: 1px solid grey;
}

We've added an outline to each product listed by the widget

3. Add CSS

There are two approaches to lining up the images.

Option 1 - add a minimum height to the product images
.betterrecs-image { 
   min-height: <height of largest image>;
}

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).

Adding a minimum height to product images

Option 2 - vertically aligning the product images
.betterrecs-image { 
   display: inline-block;
}
.betterrecs-image > .betterrecs-link {
    display: table-cell;
    vertical-align: middle;
    height: <height of largest image>;
}

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.

Vertically centered product umages


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.

Find us on Shopify