ADD BLANK EMPTY PRODUCT IMAGE IN SHOPIFY

 

-------------------------------------------------------------------------------------------------------------------

READ MORE:

https://youtu.be/nqvEVXyBzs4

https://www.youtube.com/watch?v=uxA8IJV1DVc

-------------------------------------------------------------------------------------------------------------------

STEP :0

GO TO SECTION FOLDER > product-template.liquid

ADD CODE  product-template.liquid AFTER IMAGE END FOR {% endfor %}

-------------------------------------------------------------------------------------------------------------------

<img id="{{ img_id }}"

class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"

src="{{ image | img_url: '300x300' }}"

data-src="{{ img_url }}"

data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"

data-aspectratio="{{ image.aspect_ratio }}"

data-sizes="auto"

tabindex="-1"

alt="{{ image.alt | escape }}">

</div>

</div>

{% endfor %}

1)CODE ADD AFTER END FOR BRACKET

{% if product.images == blank %} 

<img src="https://dummyimage.com/1100x600/ccc/999" />

{% endif %}

2)OR USE THIS CODE

{% if product.images == empty %} 
<img src="https://dummyimage.com/1100x600/ccc/999" />
{% endif %}

-----------------------------------------------------------------------
HOW IS THIS CODE CREATED?
{% for image in product.images %}
------------------------------------------------------------------------------------
3)OR USE THIS CODE

{% if product.images == blank %}
<div
id="{{ zoom_img_id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="https://dummyimage.com/1024x1024/ccc/999"{% endif %}>
<img src="https://dummyimage.com/520x520/ccc/999" />
</div>
{% endif %}

-----------------------------------------------------------------------------------
HOW IS THIS CODE CREATED?
WE ALSO USE THIS CODE
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
------------------------------------------------------------------------------------
{% if featured_image == blank %}
<div
id="{{ zoom_img_id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="https://dummyimage.com/1024x1024/ccc/999"{% endif %}>
<img src="https://dummyimage.com/520x520/ccc/999" />
</div>
{% endif %}
--------------------------------------------------------------------------------