Working with images and files in Shopify

Adding images using Shopify Liquid

In order to correctly add the image in the Shopify theme code, we will use Liquid, a templating language created by Shopify. Even though we could get away with something like this:

<img src="https://cdn.shopify.com/s/files/1/1563/5791/files/waves-scaled.jpg?v=1626169090" alt="Waves">

This is still not ideal. We are uploading the image in the “Files” section, and calling it using the absolute path (we would have omitted the https:// for the same result, but still), and we should call the image using liquid, like this:

{{ 'waves-scaled.jpg' | asset_url }}

The above URL would actually have the same output as our initial example. But this is much cleaner. We are referencing the image from the “assets” folder now, and if we would want to replace it later on, we could easily do it by overwriting it in the “assets”.

In case we have to upload many images, we would simply connect to our store via Shopify CLI (or ThemeKit if you are not using the CLI yet) and paste all the images into the assets.

The way I reference an image while developing on Shopify is:

<img src="{{ 'waves-scaled.jpg' | asset_url }}" alt="Waves" class="waves">

But we could have also appended the class and alt tags to the liquid if we wanted to, and got the same output:

{{ 'waves-scaled.jpg' | asset_url | img_tag: 'Waves', 'waves' }}

If we are referencing an image, we can use the “asset_img_url” instead of the “asset_url” tag. In that case, we can use some filters Shopify provides, like “size”, for example:

{{ 'waves.jpg' | asset_img_url: 'large' }}

We could have also used “img_url” for the same result. In both cases, we will get the 100x100px image, and if we wanted a different size, we can specify so like this:

img_url: '600x600'

Other available image sizes are as follows:

Shopify img_url filters

Here are the filters we can use:

• Crop – select the part of the image you want to display. Example: img_url: crop: ‘top’
• Size – select the size, as per the table above. Example: img_url: ‘450×450’
• Scale – specifies the pixel density of he image. The options are 2 & 3. – Example: img_url: scale: 3
• Format – allows you to select a format of the image. Options are .pjpg and .jpg. Example: img_url: format: ‘pjpg’

The syntax to use Shopify filters is the same as displayed above:

{{ 'waves.jpg' | img_url: '600x600', crop: 'center' }}

Supported image formats on Shopify are as follows:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP
• AVIF

Generally, you will use .png or .gif for logos and icons (you may also use the .SVG for this), and .jpeg, progressive .jpg (a variation of .jpg loading the images differently – you may notice images displaying blurry at first, and then clear when loaded) for photographs.

WebP is an excellent format to use on Shopify, and Shopify is serving WebP automatically. It will save 30% in file size as opposed to .jpg, and even more in comparison with a .png. You can try saving your image to the computer and check what format was it saved in. If it is a .webp, it will be the extension after the image file, as opposed to the more common .jpg.

If you are a more advanced user, you can open the Network tab in your console and check what is being loaded.

Referencing the images from CSS

We can easily call the images from our stylesheets using the same approach as with the image:

#waves { background: url({{ 'waves.jpg' | asset_url }}) no-repeat; }

Stylesheets and scripts are being saved and referenced from the same “assets” folder as images.

To add a custom CSS to a Shopify theme we will use liquid in the same manner:

{{ 'component-product-carousel.css' | asset_url | stylesheet_tag }}

If you are looking on the full guide on adding custom CSS and Javascript to the Shopify theme, check this article.

Uploading the images straight to the “Files” section

The best practice is to add theme images in the “assets” folder as described above, but you could also upload the image in the “files”. Navigate to your Admin -> Settings -> Files:

Adding images to a product, collection, page or blog post via the WYSIWYG editor

The third way we are adding images to Shopify is via the rich text editor (a visual type of editor which requires no coding knowledge). We have this editor at our disposal in the collections, products, pages, and blog posts.

If we want to add an image to the rich text editor, we will simply click on the image icon:

When we do click on the image icon, we will have the option to insert the image via URL, or to upload one from our computer. I would generally advise using the latter, as you never know when someone else’s website will be taken down, removing your images as well.

When we select the image we want to add, we will get an option to add the ALT (alternative text), which we really should, as it will help customers using screen readers to understand what the image is about. Very good for on-page SEO as well.

We also have the option to choose the image size.

The image sizes are, as displayed earlier in this article:

You may want to add an image as a collection banner, or a blog post featured image. You will find this option on the right of the product or a collection page:

One other place where you may find yourself adding images to Shopify is the Online Store Theme Editor, where you may be uploading images to certain sections. That used to be the case mostly on the homepage, but with the arrival of Shopify O.S 2.0, you may be adding these on the inner pages quite often as well. To access this section, you will navigate to Admin -> Online Store -> Customize (green button on the right):

These are the main ways we work with images in Shopify. To generalize a bit, if you are a developer, you will mostly be adding images to the code and the “Online store” section, files like .pdfs will most often go to the “Files” section (Settings -> Files), and if you are the store owner, you will most likely spend the majority of time adding product, collection, pages or blog post images.