image_
Returns the CDN URL for an image.
You can use the filter on the following objects, as well as their src property:
Regardless of the specified dimensions, an image can never be resized to be larger than its original dimensions.
Code
{{ product | image_url: width: 450 }}Output
width
Specify the width of the image up to a maximum of 5760px. If only the width is specified, then the height is automatically calculated based on the image's dimensions.
Code
{{ product | image_url: width: 450 }}Output
height
Specify the height of the image up to a maximum of 5760px. If only the height is specified, then the width is automatically calculated based on the image's dimensions.
Code
{{ product | image_url: height: 450 }}Output
crop
Specify which part of the image to show if the specified dimensions result in an aspect ratio that differs from the original. You can use the following values:
topcenterbottomleftrightregion
The default value is center.
When using the region crop mode, the starting point for the crop is defined by and and extends to the and .
Optionally, to resize the region extracted by the crop, use the width and height parameters.
Country flags are SVG images and can only be cropped if a value for format
is also provided.
Code
{{ product | image_url: width: 400, height: 400, crop: 'bottom' }}
{{ product | image_url: crop: 'region', crop_left: 32, crop_top: 32, crop_width: 512, crop_height: 512 }}
{{ product | image_url: crop: 'region', width: 100, height: 100, crop_left: 32, crop_top: 32, crop_width: 512, crop_height: 512 }}Output
format
Specify which file format to use for the image. The valid formats are pjpg and jpg.
It's not practical to convert a lossy image format, like jpg, to a lossless image format, like png, so Shopify can do
only the following conversions:
pngtojpgpngtopjpgjpgtopjpg
Shopify automatically detects which image formats are supported by the client (e.g. , , etc.) and
selects a file format for optimal quality and file size. When a format is specified, Shopify takes into account
the features (e.g. progressive, alpha channel) of the specified file format when making the final automatic format selection.
To learn more, visit https://cdn.shopify.com/.
Code
{{ product | image_url: width: 450, format: 'pjpg' }}Output
pad_color
Specify a color to pad the image if the specified dimensions result in an aspect ratio that differs from the original. The color must be in hexadecimal format (hex3 or hex6).
Code
{{ product | image_url: width: 400, height: 400, pad_color: '000' }}