Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag
Get the image CDN URL in Shopify
We can get the image URL from a Shopify liquid object with the help of image_url
filter. It will return the Shopify CDN URL for an image.
Syntax:
variable | image_url: width: number, height: number
In the above syntax, width
specify the width of the image and height
specify the height of the image up to a maximum of 5760px. We have to specify either width or height or both. Otherwise, it returns an error.
Example:
{{ product | image_url:width: 100 }}
Output:
//cdn.shopify.com/s/files/1/0561/7470/6753/products/mens-shirt-light.jpg?v=1654824803&width=100
We can use image_url
for the article, collection, image, line_item, product, and variant objects as well as their src property.
Crop the image in Shopify
We can use crop parameter to specify which part of the image to show if the specified dimensions is different from the original image aspect ratio. We can use top
, center
, bottom
, left
or right
as a crop parameter. The default crop value is center
.
{{ product | image_url: crop: 'left' }}
Specify image format
The format
specify which file format to use for the image. The valid formats are pjpg and jpg.
{{ product | image_url: format: 'pjpg' }}
Shopify can do only the following conversions:
png to jpg
png to pjpg
jpg to pjpg
Get theme assets Image URL
In the Shopify theme, we can add images, in any format and any size to the assets folder within your theme directory. Mainly, these Images are used as background images in the Shopify theme.
We can get the reference to the assets folder using the asset_url
filter.
{{ 'logo.png' | asset_url }}
Output:
//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/logo.png
Get HTML Image Tag in Shopify
Using image_tag
we can generate an HTML <img>
tag for a given image_url
.
{{ product | image_url: width: 200 | image_tag }}
Output:
<img src="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&width=200" alt="Health potion" width="200" height="133">
By default, width and height attributes are added to the <img>
tag depending on the dimensions from the image URL. We can override these attributes with the width and height parameters as given below.
{{ product | image_url: width: 400 | image_tag: width: 300 }}
Output:
<img src="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&width=400" alt="Health potion" srcset="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&width=352 352w" width="300">
By default, Shopify generates a srcset
. However, you can create your own srcset
. We can remove the srcset
attribute by setting the parameter to nil as given below.
{{ product | image_url: width: 200 | image_tag: srcset: nil }}
Similarly, we can set preload
, alt
, class
etc…
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
layout, render and section Theme Tags in Shopify Liquid
for loop, cycle and tablerow Iteration Tags in Shopify Liquid
if, unless, elsif/else and case/when Conditional Tags in Shopify Liquid
New Sections Not Showing Up in Shopify Theme Customizer! How to Fix
Can't set headers after they are sent to the client
Expected `onClick` listener to be a function, instead got a value of `string` type
Laravel Model Events and Observers Tutorial
React objects are not valid as a react child
The style prop expects a mapping from style properties to values, not a string
Explore All Blogs