img_
Code
{{ product | img_url }}Output
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_small.jpg?v=1683744744size
The size parameter allows you to specify the dimensions of the image up to a maximum of 5760 x 5760 px. You can specify only the width, only the height, or both, and you can also use the following named sizes:
| Name | Dimensions |
|---|---|
pico | 16x16 px |
icon | 32x32 px |
thumb | 50x50 px |
small | 100x100 px |
compact | 160x160 px |
medium | 240x240 px |
large | 480x480 px |
grande | 600x600 px |
originalmaster | 1024x1024 px |
Code
{{ product | img_url: '480x' }}
{{ product | img_url: 'x480' }}
{{ product | img_url: '480x480' }}
{{ product | img_url: 'large' }}Output
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_480x.jpg?v=1683744744
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_x480.jpg?v=1683744744
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_480x480.jpg?v=1683744744
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_large.jpg?v=1683744744crop
The crop parameter allows you to 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:
topcenterbottomleftright
The default value is center.
Code
{{ product | img_url: crop: 'bottom' }}Output
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_small.jpg?v=1683744744format
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 this filter does
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 | img_url: format: 'pjpg' }}Output
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_small.jpg?v=1683744744scale
Specify the pixel density of the image. The valid densities are 2 and 3.
Code
{{ product | img_url: scale: 2 }}Output
Output
//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_small.jpg?v=1683744744