image_
Returns the CDN URL for an image.
You can use the filter on the following objects, as well as their src property:
Caution: You need to specify either a <a href="/docs/api/liquid/filters/image_url#image_url-width"><code>width</code></a> or <a href="/docs/api/liquid/filters/image_url#image_url-height"><code>height</code></a> parameter. If neither are specified, then an error is returned.
Regardless of the specified dimensions, an image can never be resized to be larger than its original dimensions.
Regardless of the specified dimensions, an image can never be resized to be larger than its original dimensions.
Note: 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
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&width=450width
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
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&width=450height
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
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?height=450&v=1683744744crop
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.
Country flags are SVG images and can only be cropped if a value for format
is also provided.
Note: Country flags are SVG images and can only be cropped if a value for <code>format</code> 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
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?crop=bottom&height=400&v=1683744744&width=400
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?crop=region&crop_height=512&crop_left=32&crop_top=32&crop_width=512&v=1683744744
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?crop=region&crop_height=512&crop_left=32&crop_top=32&crop_width=512&height=100&v=1683744744&width=100format
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/.
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/.
Note: Shopify automatically detects which image formats are supported by the client (e.g. <code><span class="PreventFireFoxApplyingGapToWBR">Web<wbr/>P</span></code>, <code><span class="PreventFireFoxApplyingGapToWBR">A<wbr/>V<wbr/>I<wbr/>F</span></code>, 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 <a href="https://cdn.shopify.com/">https://cdn.shopify.com/</a>.
Code
{{ product | image_url: width: 450, format: 'pjpg' }}Output
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?format=pjpg&v=1683744744&width=450pad_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' }}Output
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?height=400&pad_color=000&v=1683744744&width=400