How can I display an uploaded image using a custom liquid section?

Technical Q&A

Topic summary

Problem: Display an image uploaded to Shopify Files in a Custom Liquid section (Dawn 4.0 lacks a basic image section). Using file_img_url showed only the CDN URL, not a rendered image.

Key insight: image_tag requires an image object passed through image_url, not a raw URL. file_img_url returns a URL string, which can be used in an , but not directly with image_tag.

Working solution:

  • Assign the file to an image object via images[‘sample.jpg’].
  • Render with image_url (for sizing) piped into image_tag, e.g., assign image = images[‘sample.jpg’]; image | image_url: width: 400 | image_tag.
  • img_tag also works but is reportedly deprecated; image_tag is preferred.

Follow-ups:

  • A user asked what images is; participants noted it seems to be an implicit/global collection available in Liquid (not clearly documented in the thread).
  • A reusable snippet (quick-render-image.liquid) was shared using , responsive srcset, and images[ws_img_name] | image_url | image_tag for multiple breakpoints.

Status: Resolved with a Liquid-only approach; additional snippet provided for responsive reuse. Open question: official docs/clarity on images.

Summarized with AI on December 19. AI used: gpt-5.
1

I see that the 2.0 editor does not have a section to display an image I’ve uploaded to Files. I’m thinking a “Custom Liquid” section is probably the answer — but I can’t seem to figure out the image_tag.

Simply put, the file I want to display in Files is called ‘sample.jpg.’ It’s not attached to a product or anything else. How can I display this using liquid only?

Thanks for the help.

2

If it’s in the files section you’ll want to look at this:
https://shopify.dev/api/liquid/filters/url-filters#file_img_url

If you’re not sure how to use it, let us know. Hopefully the doc link above gets you going.

3

This is where I’m stuck — I’m using file_img_url in the Custom Liquid section, and now my page has the lengthy Shopify CDN URL plastered on it. The problem is that I want to pass this URL into image_tag so that the image will actually render.

There’s no section type in Dawn 4.0 to just display a basic image that I’ve uploaded. So I need to be able to stay fully within liquid for the Custom Liquid section type to render the image on the page. Can this be done?

4

Is there a reason why you can’t pop that url into the src property of an img tag? Shopify has filters for image tags as well if you didn’t want to add that html.

If it helps (and maybe I’m not understanding the issue) feel free to drop some code chunks here or visuals to help me follow along.

You could also make a new section for single image display if you had something specific in mind that a theme didn’t include.

5

Thanks for your help. I got it to work by first assigning the image to an object and then using image_tag. The img_tag you suggested actually worked a lot easier, but I read that it’s deprecated and I should use image_tag moving forward. Here’s what I eventually settled on (if you see any improvements that can be made please let me know):

{% assign sample_image = images[‘sample.jpg’] %}

{{ sample_image | image_url: width: 400 | image_tag }}

This rendered the image successfully using only the “Custom Liquid” section that is included in Dawn. Without assigning the image to an object, the error given was: “input to image_tag must be an image_url.” You apparently can’t pass a file_img_url — and image_url has to be an object (I think).

Thanks again.

1 Like
6

Thanks sharing the solution. It works for me too.

Can you help me understand it better? Where does images come from? I can’t find any ref to it in the docs.

7

I don’t know either, must be some sort of superglobal created in the background by shopify.

8

This was the final piece of the puzzle, thanks.

(I was able to just use images[‘image-name.jpg’] directly in the liquid, without assigning it to an image first).

To expand, if you’re going to be doing a lot of these with the same dimensions, you can also save time by creating a snippet that takes the image file name as an argument. This code is based on the Shopify article here: https://performance.shopify.com/blogs/blog/responsive-images-on-shopify-with-liquid

Example code for a snippet ‘quick-render-image.liquid’

{% comment %}
Renders an image
Accepts:

  • ws_img_name: {String} name of the image from files section of admin
    Usage:
    {% render ‘quick-render-image’, ws_img_name: xxxx %}
    {% endcomment %}
{{ images[ws_img_name] | image_url: width: 1920 | image_tag: widths: '1000, 2000', sizes: '(min-width: 1000px) 760px, (min-width: 800px) calc(100vw - 380px), (min-width: 400px) 298px, 78.75vw', alt: "Image alt text" }}

…and use {% render ‘quick-render-image’, ws_img_name: xxxx %} where you want an image.

G