Your question is a little vague. You'll need to have both of the images coded into wherever you want to add them, give them class names, and then use media queries to hide them and show them based on the screen width. For instance:

This is a mobile first approach, mobile styles will load before the media queries that are looking at screen widths above 992 pixels. If it's less than 992px, mobile is displayed and desktop is hidden, if greater desktop is displayed and mobile is hidden.

As for where you add the code, that depends on where you want it to show up. Home page, collection page, blog page, a page, product page, etc.

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 :D

Thank you very much for your response - I am understanding the basic concept of this but just figuring out where to place code.

Would that first bit (within the <style> </style> section) be entered into the theme.liquid file? In the theme I am using, the images that I'm trying to apply this too are called 'banners' and there is also two 'banner-liquid' files (one within Sections, and one within Snippets), so I'm unsure if it should go within one of those.

I have a feeling I need to add in the Sections banner-liquid file, is this right? The code for this currently is:

And then the other bit you mentioned (starting with <div class="image container">) - should that be entered in the locations where I want the specific images to be placed? If so, I'm struggling to find the 'homepage' within the 'Edit Code' section in my code where the 'banners' are currently.... is it normally in the 'templates', 'sections' .?

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.

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:

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 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 :D

Oh my gosh, Ninthony - this has worked even better than I hoped! I thought I'd have to manually add the alternative images in the code each time, but the way you've done it is I can do it via the Customize visual editor - which makes it so simple. Also your explanations have helped me to make sense of it and learn. THANK YOU for your kind help and effort in answering my question, it's really appreciated.

At the risk of being 'greedy', would I be able to ask how you would suggest to add a similar configurable item to the 'Customize visual editor' where I can add text over an image? Right now I've basically written my text into the images before uploading, which I totally know is not the right way to handle it! If it's complicated, no worries, you've helped me already a lot.

You have a container element, an image, and some content. You set the image-content-container's position to relative and display: inline-block, and the content's position to absolute. Since the content is a CHILD of the container, when content's position is set to absolute it's position is RELATIVE to it's container. So you see in the css the styles "top: 20px", "right: 10px" -- That means 20px from the top of the container, and 10px from the right. Also, the container is set to inline-block. If you change this to block you can see the difference. Block level elements span the entire width of their screen (or their container, if they are inside one smaller than the screen), where as inline-block will match their content.

You can apply similar logic to what we did earlier to your {% schema %} by adding another text field with a different id like "banner-content" and changing it's type to text instead of image picker. Then do something like:

Give the banner-content similar style and it's container similar styles to the codepen. Try making a couple examples in codepen yourself with the relative and absolute positioning to get a hang on how you do it. If you have any questions you can send me a direct message on here, but you'll have to enable it in your profile.

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 :D

Hi. I'm trying to implement this in my theme (Debut). The only issue I'm having is on mobile I want a portrait image and on desktop a landscape image. But I can't figure out how to make the mobile image resize to portrait.

And I {think} I've narrowed it down to the top portion of the hero.liquid file. Whenever I remove the middle if's it helps with sizing, but not completely. Also, I added the style to the theme.scss.liquid file instead of the html.