It's completely understandable you're lost. At first the way that shopify does things doesnt make a whole lot of sense. Your template pages are they key parts of your site. So when you want to edit the homepage, you want to edit index.liquid. Now, if you have not developed the theme yourself, probably all you're going to even see inside of index.liquid is "{{ content_for_index }}" <--- That's a liquid object. Basically that renders everything that you've specified inside of your Customize section, your visual editor.
Take the section you posted, "banner.liquid" -- That's probably one of your sections you can edit when you open your visual editor. All of that:
{{ section.settings.link }} stuff is referring to all the options in your customize editor. All that stuff underneath it inbetween the {% schema %} tags are where you define what kinds of things you want to have in your section. I have not worked with sections much, but I'm fairly certain I can walk you through so you can make this change. Duplicate your theme just to be sure you have a copy in case anything goes wrong.
First go into your {% schema %} tags and look for this portion:
{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},Copy that and paste it below it and change the ID to "mobile_image":
{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},Be sure to keep the comma after the closing curly bracket.
Then you're going to want to go into the html and duplicate the image portion kind of the same way and we're going to set it up so image 2 displays. You're also going to give your <img> tags a class name of "hidden_desktop" and "hidden_mobile" -- I separated the duplicate part with a comment:
<style>
.hidden_desktop{
display:block;
}
.hidden_mobile {
display: none;
}
@media (min-width:992px){
.hidden_desktop{
display:none;
}
.hidden_mobile {
display: block;
}
}
</style>
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive hidden_mobile" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive hidden_mobile" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %}
{% if section.settings.mobile_image != blank %}
<img class="img-responsive hidden_desktop" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" />
{% else %}
<img class="img-responsive hidden_desktop" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}</a>{% endif %}
</div>
</div>
</div>Now you should be able to go into your customize section and find the portion for mobile image and upload an image there. I think this will work, like I said I have not worked in sections a whole lot but the logic seems there for me. I didn't change the other sections like image_size and whatnot, but this shouldn't matter unless you don't have an image uploaded there. Like I said, be sure to duplicate your theme and give this a shot. Let me know how it turns out.
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
