Most cart layouts are designed with a fixed width to fit seamlessly into your email template, ensuring maximum support and visibility across various email clients. You can control how product images appear in your cart layout by setting fixed dimensions, constraining a single dimension, using CSS maximums, or relying on dynamic resizing services.
Fixed height and width
You can size images precisely by applying a fixed height and width to the img tag, for example:
<img src="my-img.jpg" height="45" width="45" />
This is compatible with all email clients, but may stretch the image if your images aren't all the same ratio. If you have both tall and wide images, they all end up being made to fit the same size.
Fixed one dimension
If you can fix one dimension, such as width, then you can leave the other empty, and it resizes itself appropriately, for example:
<img src="my-img.jpg" width="45" height="" />
This should keep the appropriate proportions.
CSS max-width and max-height
Another option is to use CSS styles to set maximum dimensions, for example:
<img src=my-img.jpg" style="max-height:45px;max-width:45px" />
These only affect an image larger than the set dimension. If you only use one of them, the aspect ratio is maintained. However, not all email clients support these attributes, especially Microsoft Outlook.
Dynamic resizing
You can also use a service to resize an image for you. Typically, these services offer to supply a URL and height or width (or both) and then dynamically resize the image at the time of display.
We don't recommend any specific service, but a few examples are:
You may already be using a CDN with the capability on your website. Alternatively, you could create your script to do this.
Full-size images and thumbnails
The images we capture can vary in size, and we may not always be able to capture the same sizes for all products before a shopper carts them. We normally attempt to capture both a full-size product image from the product page and a thumbnail from the cart or listing pages. We may not always have both, though. By default, if you use the product.img merge field, and we don't have a full-size image, we fall back to the thumbnail.
If you would prefer to give preference to the thumbnail, you can use the following code to display it, but fall back to the full-sized image if we have not yet captured one:
{% if product.img_tn %} {{ product.img_tn }} {% else %} {{ product.img }} {% endif %}Insert this logic inside the src attribute of your <img> tag to prefer the thumbnail when available.