Shopify themes, liquid, logos, and UX
I need to change the shopify no image photo to one of my own.
Hello DStanko,
Refer below URL this will help you.
https://community.shopify.com/c/Shopify-Design/Default-Image/td-p/91839
I don't get it. I dont know where to put the code. I uploaded the image and added it as an asset.
Okay DStanko.
Refer this link.
https://dozenpixels.com/blog/post/automatically-add-default-images-to-shopify-products
like that,
{% if product.images.size == 0 %}
{{ 'default.png' | asset_url | img_tag }}
<img src="put here img cdn link">
{% else %} // show product image
{% endif %}
if you have image CDN than use
<img src="put here img CDN link">
Shopify ,Shopify plus and Shopify 2.0 theme developer and customization
I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com
and where do i paste that?
Any response on this yet? Unclear where to place this code.
yeah where do we place the code?
Hi - were you able to figure this out? If not can you let me know what theme you are using and I'll let you know where it needs to go.
I am using venture theme!
Hey, in Venture you should have a folder in Sections -> product-template.liquid where the code can go. There should be an image <meta> tag right at the top of the file where you can add your if/else statement to check if there is a default image available. Let me know if you have further issues and I can take a deeper look.
Thanks,
Gary
What about for the theme "Maker" ? I'm finding it difficult to fix this issue on Maker.
Hi, I know this thread was a while ago, but I am trying to do the same for Dawn theme. As this is now Shopify 2.0 is the solution different?
If you guys are still trying to figure this out, look in your theme sections. I am using a OS2.0 theme and it's most likely 'product-info.liquid' or 'product-item.liquid'.
I was able to get it to work using the code below. Use the proper file name for your case. I used a file named "no-image.jpg"
Hope this helps someone.
{% if product.images.size == 0 %}
<a href="{{ product.url }}" class="product-item__image-wrapper">
<div class="aspect-ratio {% if settings.product_image_size != 'natural' %}aspect-ratio--{{ settings.product_image_size }}{% endif %}" style="padding-bottom: {{ 100.0 | divided_by: primary_media.preview_image.aspect_ratio }}%">
<img class="product-item__primary-image lazyload image--fade-in" data-media-id="{{ primary_media.id }}" data-src="{{ 'no-image.jpg' | asset_url }}" data-sizes="auto" data-widths="[{{ supported_sizes }}]" alt="{{ primary_media.alt | escape }}">
</div>
</a>
{% else %}
#you will need to add another {% endif %} where appropriate at the end.
User | RANK |
---|---|
155 | |
127 | |
80 | |
73 | |
69 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023