Replacing Shopify Stock Product Image for Custom Image

[BAMotorsport]

I'm almost done with the design of the Shopify website! The last piece of the puzzle is adding a custom product image (https://cdn.shopify.com/s/files/1/0275/3550/7591/files/no-image.png?v=1600782099) to the coding to replace the stock Shopify Product Image when there is none to use.

I've scoured the internet and haven't had any luck.

Thank you!

[FreshNarrative]

Hi BAMotorsport,

Good question! With a little bit of code you can change the image that appears. The code would look something like this:

{% if product.featured_image == blank %}
    <img src="new_image_src.jpg">
{% endif %}

Let me know if you need some more help and I can take a look at your code.

Thank you,

Kyle Kopelke

[BAMotorsport]

Thank you Kyle! Where would I insert the code? In addition, how does it know to pull the image file I uploaded to use?

[FreshNarrative]

Happy to help! Depending on your theme and where the images are displayed, the code could be in a few places.

To start, which pages are the empty product images displaying now (I'm assuming collection pages and product pages)? 

If you'd like I can request access to your store and have a look to expedite the process.

Let me know,

Kyle

[BAMotorsport]

We are using the Debut free theme for now.

[FreshNarrative]

If you're using a list based layout find the 'collection.liquid' file.

1. Upload the image you'd like to use by navigating to Settings > Files in the backend.
2. Copy the URL once it has been uploaded.
3. Navigate to Online Store > Themes > Actions > Edit Code
4. Find the file "collection.liquid"
5. Find the following code: 
   {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
   Should be around line 60. and Delete it.
6. Replace with <img src="paste_the_image_url_here"> and paste the image URL in leu of paste_the_image_url_here.
7. Save.

[BAMotorsport]

I don't have that code anywhere!

[FreshNarrative]

Try the following if you are using a Grid based layout:

1. Upload the image you'd like to use by navigating to Settings > Files in the backend.
2. Copy the URL once it has been uploaded.
3. Navigate to Online Store > Themes > Actions > Edit Code
4. Find the file "product-card-grid.liquid"

Replace:

  <div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <a href="{{ product.url | within: collection }}">
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
    </div>
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
    </a>
  </div>

With this:

  <div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <a href="{{ product.url | within: collection }}">
    {% if preview_image == blank %}
    <img src="https://placehold.it/500x500">
    {% else %}
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
    </div>
    {% endif %}
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
    </a>
  </div>

Finally, replace the <img src=""> with the URL of the image you uploaded. It's very important that this image is a square.

Let me know!

Kyle

[BAMotorsport]

Ok, I got that code to work! THANK YOU!

However, the only issue I'm having now is that it removed all the images that already has a image within the product. Is there anyway to get those back? I just need the image to appear on the products that don't have a image, but, are listed for sale currently. 

THANK YOU so much!

[FreshNarrative]

Great! What's your store's .myshopify.com URL I can take a look real quick?

Thanks,

Kyle

[BAMotorsport]

https://ba-motorsports.myshopify.com/

[FreshNarrative]

Perfect, I sent a request — accept at your convenience. 

Thank you,

Kyle

[vonza24]

Hi @FreshNarrative , I have a similar issue. And I just saw this thread after posting my question -  https://community.shopify.com/c/technical-q-a/how-to-add-a-png-jpeg-etc-file-formats-to-my-shopify-s... - in the forum. 

I shall be glad if you could be a little "descriptive" about the first point - "Upload the image you'd like to use by navigating to Settings > Files in the backend." If I go to setting in admin, I do not see any file listed. 

Further, I cannot find the above "replaceable" block of code that you gave above in my "main-collection-product-grid.liquid" file. I am using collections. Thanks

[R3DLIN3S]

How do you do this but with a collection? So that when a customer views all your collections in a grid on one page they will see my custom image if a collection is empty.

thanks