How to get the file image URL in Shopify?

Tweet LinkedIn

In this tutorial I’ll explain how to retrieve inside the theme code an image file that is uploaded in the files section via Shopify admin.

Upload the file to Shopify

Navigate to the “Content” section (marked with 1 in the image below).

Click on the “Files” option within the “Content” menu (marked with 2 in the image below).

To upload new files to your Shopify store, select the “Upload files” button located at the top right of the page (marked with 3 in the image below).

Shopify file upload workflow.
Shopify file upload workflow.

Select the image file you want to upload from your computer’s file explorer (marked with 1 in the image below).

Click the “Open” button to finalize the selection and proceed to upload the file to your Shopify store (marked with 2 in the image below).

Choosing and confirming the upload of a product image on Shopify.
Choosing and confirming the upload of a product image on Shopify.

The image file is currently being uploaded to the Shopify store, as indicated by the progress bar (marked with 1 in the image below):

Uploading progress for a new product image uploaded on Shopify to the “Files” section.
Uploading progress for a new product image uploaded on Shopify to the “Files” section.

In the right corner you’ll see a notification indicating “File uploaded” that confirms the successful upload of the file (marked with 1 in the image below).

The image file has been successfully uploaded and now appears in the store’s file list (marked with 2 in the image below).

Pay attention to the “References” section since it will let you know where the file is used (marked with 3 in the image below).

Successful upload of the image file to Shopify “Files”.
Successful upload of the image file to Shopify “Files”.

Enter or edit the “URL Handle” to change how the image will be referenced in the store’s URL structure (marked with 1 in the image below). 

We’ll use this handle to refer to the image inside the code.

Add the “Alt text” for the image to improve SEO and accessibility for screen readers (marked with 2 in the image below).

Click “Save” to apply the changes made to the image’s details (marked with 3 in the image below).

Editing image handle and ALT text for enhanced SEO and accessibility on Shopify
Editing image handle and ALT text for enhanced SEO and accessibility on Shopify

Choose the image insertion point

Select the webpage element where you want to insert the image in the store front-end (marked with 1 in the image below).

I’ll add the image between the main content and the footer.

As you see the corresponding HTML element is highlighted in the developer tools section at the bottom, providing a reference to where the code should be inserted within the website’s HTML structure (marked with 2 in the image below).

Identifying the code insertion point for custom modifications on a Shopify storefront.
Identifying the code insertion point for custom modifications on a Shopify storefront.

Identify the theme file based on the selected insertion point

Now, of course you can add the image via a prebuilt theme section, which is much easier and quicker than coding the image inside the theme, but in some cases you do not have a section coded for something like this or you just need another position on the theme to add the image.

My recommendation is to build a theme section to handle images uploaded inside the “Files” section, unfortunately I’ll not explain how to achieve this in the present tutorial since the purpose of this tutorial is to show you how to add the image in any of the theme files by pulling the URL inside the theme from the Shopify CDN.

In this tutorial I’ll use the “theme.liquid” file at the insertion point highlighted above to list the image file by pulling the “URL” from the Shopify CDN.

The ‘theme.liquid’ file within the ‘Layout’ directory is opened in the code editor (marked with 1 in the image below).

This file typically contains the overall HTML markup and Liquid code that is common across the entire Shopify site.

The placeholder comment within the code indicates where the image tag should be inserted (marked with 2 in the image below).

The comment reads “Insert image”, suggesting that the actual image code should go below this comment.

Locating the insertion point for an image in the Shopify 'theme.liquid' file.
Locating the insertion point for an image in the Shopify “theme.liquid” file.

Add the code to pull the image

Direct link

I’ve seen it many times in many themes done by inexperienced developers, the biggest issue is when I’ve been handed projects from huge agencies in respected countries and I’ve seen this type of coding.

This is not the correct way to do it!

Why?

It happened many times when Shopify changed the CDN link structure and guess what happened with the linked file? It stopped working.

Normally this happens rarely but it happens and even Shopify recommends using dynamic links and not static links.

I provide this to use only as a temporary quick solution, if you do not have the time to implement and test the other solution, but once you have the time implement the dynamic solution instead.

Copy the link from the Shopify admin by clicking on the link icon like in the image below:

Copy Shopify image file link from Shopify “Files” section in admin.
Copy Shopify image file link from Shopify “Files” section in admin.

Add an <img> tag to the “theme.liquid” file within the “Layout” directory in the code editor (marked with 1 in the image below). This tag is used to display an image on the website.

The “src” attribute of the <img> tag is set to the static URL of the uploaded image on Shopify’s CDN (marked with 2 in the image below), the one that you copied to the clipboard as listed in the image above.

The ALT attribute provides alternative text for the image, which is “Rings with precious stones” (marked with 3 in the image below), aiding in SEO and accessibility.

<img src="https://cdn.shopify.com/s/files/1/0263/8623/5463/files/rings.jpg?v=1703700156" alt="Rings with precious stones"/>

Once all is completed you need to use the Shopify CLI to push the file to the Shopify servers.

A command in the terminal shows the process of deploying changes to the Shopify theme using the Shopify CLI with the command (marked with 4 in the image below).

When executing the command make sure you are in the store that you want to push changes too.

shopify theme push -o layout/theme.liquid
Implementing and deploying a static image link in Shopify's “theme.liquid”.
Implementing and deploying a static image link in Shopify “theme.liquid”.

Dynamic link

This is the recommended solution.

<img src="{{ 'rings.jpg' | file_img_url: "master" }}">

Explanation:

<img src=”…”>: This is the standard HTML tag for displaying an image on a webpage. The “src” attribute specifies the URL of the image you want to display.

{{ … }}: These double curly braces denote output in Liquid, which is Shopify’s templating language. Anything inside these braces is processed by Liquid.

‘rings.jpg’: This is the filename of the image you want to display. It should be a file that has been uploaded to your Shopify store in the “Files” section.

“|” This is a pipe character in Liquid and it is used to apply filters to modify the output of the code on the left side.

file_img_url: This is a Liquid filter that generates the URL for an asset within your Shopify store. It takes a filename as input and outputs a full URL pointing to that file.

“master”: This is a parameter for the “file_img_url” filter specifying the image size. This refers to the original image size as uploaded. Shopify can automatically generate different sized images for different purposes, but in this case, “master” is used to get the image in its original dimensions.

The entire line of code outputs an HTML image element with the source set to the URL of “rings.jpg” as hosted on Shopify’s content delivery network (CDN), ensuring optimal loading and delivery of the image in its original size.

Embedding a dynamic image in Shopify's theme with “Liquid” code.
Embedding a dynamic image in Shopify’s theme with “Liquid” code.

For the “file_img_url” you can pass a size parameter to request from the Shopify CDN to serve the intended image like:

  1. Pico (16×16 px)
  2. Icon (32×32 px)
  3. Thumb (50×50 px)
  4. Small (100×100 px)
  5. Compact (160×160 px)
  6. Medium (240×240 px)
  7. Large (480×480 px)
  8. Grande (600×600 px)
  9. Original (1024×1024 px)
  10. Master (the size of your image without any resizing)

9 and 10 are really confusing, I know.

From my point of view Shopify should find another name for “Original” size, replace “Master” with “Original” and remove “Master” entirely.

Same thing as I tell every software developer, stop complicating things. Keep things simple and easy to use.

Check the image in storefront

Once the code is in place you can check the new image in storefront:

Embed dynamic image in Shopify's theme with “Liquid” code.
Embed dynamic image in Shopify’s theme with “Liquid” code.

Conclusion

In conclusion, navigating Shopify’s file management system and integrating images into your Shopify theme can be accomplished with relative ease once you’re familiar with the platform’s interface and “Liquid” templating language.

From uploading and managing files within the Shopify admin to dynamically linking images in your theme’s code, the process is designed to be intuitive for users of all levels.

By following the step-by-step instructions provided, you can ensure that your Shopify store not only looks visually appealing but also maintains a high standard of accessibility and SEO optimization.

Whether you’re updating a single product image or overhauling your entire site’s aesthetics, the control is in your hands to create a compelling and highly functional ecommerce experience.

Remember, a well-presented online store can significantly enhance user engagement and ultimately lead to increased sales and customer loyalty.