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.
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