Hi! I currently have this in place :
Online Store > Themes > Actions > Edit Code on the theme that you want to edit. Create a new section called "desktop-mobile-banner". Copy and paste this code and save it:
<style>
.banner-container img{
width: 100%;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: block;
}
@media (min-width: 767px){
.hidden-mobile {
display: block;
}
.hidden-desktop {
display: none;
}
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</div>
{% endif %}
{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
Then go into your customize editor and click "Add Section" and scroll to the "Image" category, you should see a section named Desktop Mobile Banner -- click it and then upload both your desktop and mobile banner images. Then you can drag it wherever you want it to appear on your homepage. This will meet your basic needs. You can further customize the schema to give yourself more options, here's some documentation on how to configure the schema and the types of settings you can use in the schema settings:
^ Was copied from another topic.
This is the outcome:
Im so happy with it but I would love to be able to add a clickable link to the banner itself 🙂
Source for code:
https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/m-p/7951...
page 6 I believe
Ollie
Jul 28, 2022
