The img_url filter should be followed by the image size that you want to use. If you request a size smaller than your original image's dimensions, Shopify will scale the image for you.
If you don't include an image size, the filter returns a small (100x100) image.
You can also use img_url on the image or src attributes of an object.
img_url can't transform icon files (.ico). If you specify a size or format for an icon file, img_url will return the original file.
You can specify exact dimensions in pixels for an image's width and height, up to a maximum of 5760 x 5760 px. The image's original aspect ratio will be preserved unless you crop the image.
No matter what size you specify, an image can never be resized to be larger than its original dimensions.
You can specify only a width or only a height and Shopify will calculate the other dimension based on the original image size, keeping the original image's aspect ratio:
If you don't want the image resized, you can get the original image size:
Original image size
Other image URL parameters
You can specify a crop parameter to make sure that the resulting image's dimensions match the requested dimensions. If the entire image won't fit in your requested dimensions, the crop parameter specifies what part of the image to show. Valid options are:
If you don't use crop, Shopify will use the largest image that fits in your specified dimensions, which might not take up the whole space.
The scale parameter lets you specify the pixel density of the image. Valid options are:
The format parameter lets you specify what file format to use for the displayed image. Valid options are:
pjpg is progressive JPEG. A browser loads a full-sized progressive JPEG with gradually increasing quality, instead of loading the full-quality image from top to bottom like a traditional JPEG.
Generates an HTML link. The first parameter is the URL of the link, and the optional second parameter is the title of the link.
Creates an HTML link to a collection page that lists all products belonging to a vendor.
Creates an HTML link to a collection page that lists all products belonging to a product type.
Creates a link to all products in a collection that have a given tag.
Creates a link to all products in a collection that have a given tag as well as any tags that have been already selected.
Generates a link to all products in a collection that have the given tag and all the previous tags that might have been added already.
Returns the URL of a global assets that are found on Shopify's servers. Globally-hosted assets include:
Creates a URL to a collection page with the provided sort_by parameter. This filter must be applied to a collection URL.
Creates a URL that links to a collection page containing products with a specific product type.
Creates a URL that links to a collection page containing products with a specific product vendor.
Creates a collection-aware product URL by prepending /collections/collection-handle to a product URL, where collection-handle is the handle of the collection that is currently being viewed.
When a product is collection-aware, its product template can access the collection output of the collection that it belongs to. This allows you to add in collection-related content, such as related products.