How to add a custom "no image" image

Highlighted
New Member
2 0 1

I'm using the liquid template and have 0 prior experience in web design.

Highlighted
Shopify Staff
Shopify Staff
60 0 14

Hey MrEBear,

Trey here from Shopify!

It's hard to pinpoint exactly what you'd need to update within your own theme's coding without being able to see the coding of the file you're working with, but I can point you in the right direction!

Brian from this post actually put together a relatively easy way to achieve this with a simple if/else statement, and uploading your own "no-image.png" file into the Assets folder of your theme's coding.

So to build onto Brian's post, if you were to make this update to the file of your theme which displays all of the products on your "/collections/all" page, there would be a line in that file that looks similar to this:

<img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" />

This basically tells the page to display the featured image of the product if there is one, and if there is no image available, it'll display the default "no-image" image.

Using Brian's example from the post I mentioned, you would add the following "if/else" statements into that line (along with uploading your own "no-image.png" image into the Assets folder of your theme) so that your own image is being used, if there is no image associated with the product itself:

<img src="{% if product.featured_image.size > 0 %}{{ product.featured_image | product_img_url: 'medium' }}{% else %}{{ 'no-image.png' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" />

As we can see in the coding, if the featured image is greater than 0 (meaning, there's at least 1 image present on the product, collection or page), that's the image that will be displayed, else, your custom "no-image.png" image will be displayed instead.

You would then just apply this to any relevant theme files that control the different pages you might want to have this apply to (collection pages, product pages, etc).

Hope that helps :)

 

Trey S
support@shopify.com

Highlighted
New Member
2 0 1

Brilliant, this worked perfectly! Thank you Trey :)

0 Likes
Highlighted
Tourist
9 0 1

Hi

Could you please tell me which you updated for this?

Im using the "Supply" theme but could find the correct file.

Thanks in advance

oztech

0 Likes
New Member
1 0 0

I am new to Shopify and using a barebone supply theme.

This line of code looks ideal as i only want to replace the default no image placeholders with a single image.

Where do i need to add this code into please?

Thanks in Advance

Lee

0 Likes