How to add image with liquid in product page?

Store Design
,
1

Hello,

I am trying to create a liquid code to work on the product title on my product page.

My goal is to have this code dynamically display the mobile and desktop images I added in the product information section.

For this, I added the following schema code to my main-product.liquid file.

{
"type": "image_picker",
"id": "desktop_banner",
"label": "Desktop Banner Image"
},
{
"type": "image_picker",
"id": "mobile_banner",
"label": "Mobile Banner Image"
}

Then I went to the product page from theme editing and created a block called “custom liquid” and called the following code.

{% assign desktop_banner = block.settings.desktop_banner | asset_url %}
{% assign mobile_banner = block.settings.mobile_banner | asset_url %}

{% capture image_srcset %}
{{ mobile_banner }} 1x, {{ mobile_banner | replace: '_2x', ''' }} 2x
{% endcapture %}

{% if mobile_banner != blank %}
<img srcset="{{ image_srcset }}" src="{{ mobile_banner }}" alt="Mobile Banner">
{% else %}
<img src="{{ 'default_mobile_banner.jpg' | asset_url }}" alt="Mobile Banner">
{% endif %}

{% if desktop_banner != blank %}
<img src="{{ desktop_banner }}" alt="Desktop Banner">
{% else %}
<img src="{{ 'default_desktop_banner.jpg' | asset_url }}" alt="Desktop Banner">
{% endif %}

The problem is that unfortunately it calls the wrong image and the images it calls give 404 error, how can I solve it?

2

Hi @robot_tr ,

Can you share your store url