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&amp;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&amp;width=400" alt="Health potion" srcset="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&amp;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…

Related Blogs

Shopify New Section

New Sections Not Showing Up in Shopify Theme Customizer! How to Fix

The newly created section shows on the Shopify theme customizer only if we set presets in the schema. Learn how to set preset in the Shopify section schema.

Conditional Tags in Shopify Liquid

if, unless, elsif/else and case/when Conditional Tags in Shopify Liquid

Control Flow or Conditional Tags determines what content should be rendered based on given conditions. if, unless, elsif/else, case/when are conditional tags.

Iteration Tags in Shopify Liquid

for loop, cycle and tablerow Iteration Tags in Shopify Liquid

Iteration tags repeatedly run blocks of code. It renders an expression for every item in an array. Read more about for loop tag, cycle tag, tablerow tag, and its properties.

Theme Tags in Shopify Liquid

layout, render and section Theme Tags in Shopify Liquid

Theme tags allow us to select different theme layouts to use for different pages, and create sections or snippets that can be reusable in different templates. layout, render and section are theme tags.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Cannot read property of undefined in JavaScript

Cannot read property of undefined in JavaScript

The TypeError: Cannot read property of undefined occurs when we try to read a property on an undefined variable or when we try to access a property on a DOM element that doesn't exist.

Pass data from child to parent component in React

Pass data from child to parent component in React

To pass data from the child to the parent component in React, pass a function as a prop to the child component that can update the parent state.

Invalid hook call. Hooks can only be called inside the body of a function component

Invalid hook call. Hooks can only be called inside the body of a function component

React error “Invalid hook call. Hooks can only be called inside the body of a function component” occurs due to many reasons. Learn how to solve this error.

Factory Design Pattern in JavaScript

Factory Design Pattern in JavaScript

Factory allows you to handle all the object creation in a centralized location which helps the code clean, concise, and maintainable. Understand deeply with examples.