Shopify themes, liquid, logos, and UX
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!
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
Thank you Kyle! Where would I insert the code? In addition, how does it know to pull the image file I uploaded to use?
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
We are using the Debut free theme for now.
If you're using a list based layout find the 'collection.liquid' file.
I don't have that code anywhere!
Try the following if you are using a Grid based layout:
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
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!
Great! What's your store's .myshopify.com URL I can take a look real quick?
Thanks,
Kyle
Perfect, I sent a request — accept at your convenience.
Thank you,
Kyle
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
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
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024