Display different banner & slideshow images on desktop and mobile sense theme

Store Design
1

Hello there,

This might have been answered before but i tried a few other solutions before coming here and they didn’t really work for me. I want to make different images display on mobile and desktop and to have the option for text to be displayed on mobile or desktop.

currently i have this slideshow :

Muheez842_0-1654677438845.png
Muheez842_0-1654677438845.png1887×641 128 KB

And i would like to display this on the mobile version

Muheez842_1-1654677498313.png
Muheez842_1-1654677498313.png1046×787 436 KB

you can ignore those, sliders on the left and right*

I tried to use some guides but many of them were out dated, i made some code changes to my

image-banner.liquid:

Added this to the {% schema %} so i can see it in the section

{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},


And then the above to the style and i then duplicated the image portion and both gave them their classes so it can be styled, but after i did all of that i didn't have the effect i wanted, the second image will show in the section but when i added the image it will just cause it all to push to the right side and cause some overflow on the desktop and mobile format.

I used this guide here - [Solved: Different images for mobile than desktop web - Shopify Community](https://community.shopify.com/topic/522935)

And then i tried another one but had no luck - [Show Different Shopify Banner Image on Desktop and Mobile (mojoin.com)](https://www.mojoin.com/show-shopify-banner-image/)

I assume it's because they are outdated or i just put the code completely wrong.

As for the text i mentioned earlier, when shopify gets to mobile version the container shows and it's puts the text in a nice way, i want that text effect to show on mobile but i want the text to be hidden on desktop if that's also possible too.

I have coding experience so feel free to get technical, I'm keen to learning how liquid works so any help to help solve this would be appreciated

Thanks again
2

You can try to find solution in this video: https://www.youtube.com/playlist?list=PLPPYpP057-pE57ka1LExOThvpF0mIK5if

1 Like
3

Super helpful solution mate, i apprecaite that.

The video does seem like it works but i’m struggling to implement the lode that’s inside that video into my theme. It’s a bit different to the debut one, i’m struggling where they started to configure blocks about the 1:28 mark.

I don’t have the

{%- assign block_image = block.settings.image -%}

part in my sesne theme, i think the way it works in sense is different to debut. This is a good base to work around though, i understand the logic of what is happening i just don’t know how to implement the code properly.

If you know how that part works, i’ll be happy to know.

Thank you