How to add different images for desktop and mobile?

Store Design
1

hello

i need help as i am trying to add a different images for desktop and mobile.

This is where i am trying to add my code.

{{ section.settings.image.alt }}
{% if section.settings.link != blank and section.settings.button_label == blank %} {{ section.settings.link }} {% endif %}
{% if section.settings.title != blank %}

{{ section.settings.title | escape }}

{% endif %} {% if section.settings.subtitle != blank %}
{{ section.settings.subtitle }}
{% endif %} {% if section.settings.button_label != blank %} {{ section.settings.button_label | escape }} {% endif %}
{% if section.settings.homepage_arrow %} {% endif %}
{% if section.settings.parallax_effect %} #slide-{{ section.id }} .hsContainer { height: {{ section.settings.parallax_image_height }}px; } {% endif %} @media (max-width: 767px) { {% if settings.slideshow_images_crop %} #slide-{{ section.id }} .hsContainer { height: {{ section.settings.parallax_image_height | divided_by: 2 }}px; } {% else %} #slide-{{ section.id }} .hsContainer { height: auto; } {% endif %} }

{% schema %}
{
“name”: “Image with text overlay”,
“class”: “image-with-text-overlay-section under-menu”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “1600 x 1000px recommended”
},
{
“type”: “select”,
“id”: “headline_animation”,
“label”: “Heading text animation”,
“options”: [
{
“value”: “”,
“label”: “None”
},
{
“value”: “animate_in”,
“label”: “Fade In”
},
{
“value”: “animate_up”,
“label”: “Fade Up”
},
{
“value”: “animate_down”,
“label”: “Fade Down”
}
],
“default”: “animate_down”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Your headline here”
},
{
“type”: “richtext”,
“id”: “subtitle”,
“label”: “Subheading”,
“default”: “

This is a short subheading for your banner image

”
},
{
“type”: “select”,
“id”: “text_position”,
“label”: “Text position”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “center”
},
{
“type”: “select”,
“id”: “text_alignment”,
“label”: “Text alignment”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “center”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “Button label”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
},
{
“type”: “checkbox”,
“id”: “homepage_arrow”,
“label”: “Show scroll down arrow”,
“default”: true
},
{
“type”: “header”,
“content”: “Parallax”
},
{
“type”: “checkbox”,
“id”: “parallax_effect”,
“label”: “Enable parallax scrolling”,
“default”: true
},
{
“type”: “range”,
“id”: “parallax_image_height”,
“label”: “Parallax section height”,
“min”: 300,
“max”: 1000,
“step”: 20,
“default”: 600,
“unit”: “px”
}
],
“presets”: [{
“name”: “Image with text overlay”,
“category”: “Image”,
“settings”: {
}
}]
}
{% endschema %}

2

Hi @Lorine ,

What theme are you using, please send me the theme name.

I will check and guide you in detail.