freakdesign

creative designer

If you've been paying attention to the new Shopify Checkout that's being rolled out you might notice the images used in the checkout are square. They are square, even if they had not been square in the first place. This is pretty interesting since it means that Shopify is cropping images as well as creating all those various sizes.

Also check out a more recent article that talks about the new custom image size parameters available.

To make the point clearer let's take this wonderfully fake product image picture that I've added to a product. Nice right? I've included the 1024x1024 size below so the file name is product-cropping-test-001_1024x1024.png.

If I fiddle with the name to something more like this - product-cropping-test-001_1024x1024_cropped.png - something magical happens. It also highlights just how crappy my centering of the inner square was. Click on it to open the pic in a new tab should you want (which will let you confirm the url I've used)

Before you start cropping everything, hold up. This is not a documented feature so if you started to add this into your store there's a chance it might go away one day. The cropping only works on product images.

If you're a risk taker - got for it and add it to your site. I for one think it's kind of cool to have. 

The cropping works for all sizes except the Master (which makes sense since it's the untouched Master). I've run through them all below so you can peek at them in action:

If you're looking for a way to automatically add "_cropped" to the path this little snippet of Liquid might get you started.

[UPDATE] Looks like Shopify has now added a filter to help add the cropped url. This is much safer to use since if the cropped image feature is removed this filter will be more likely to fail gracefully.

{{ image.src | img_url: 'large_cropped' }}
Filed underRambleShopify

Like to work with me?

Let's talk