can i use different homepage images on mobile and desktop? Dawn theme

Store Design
1

Hi

Is it possible to use different homepage image for desktop and mobile on dawn theme?
thanks in advance.

2

Hello @Anonymous_d65591fabfe73ef1cdbdaa0a1489d355

Here is example:
HTML Structure*:*

schema setting:
{% schema %}
{
“name”: “Hero Section”,
“settings”: [
{
“type”: “image_picker”,
“id”: “desktop_image”,
“label”: “Desktop Image”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile Image”
}
]
}
{% endschema %}

CSS:
.mobile-image {
display: none;
}

@media only screen and (max-width: 767px) {
.desktop-image {
display: none;
}
.mobile-image {
display: block;
}
}

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hi @Anonymous_d65591fabfe73ef1cdbdaa0a1489d355 ,

You can display different images on the homepage for desktop and mobile by adjusting the theme code, incorporating custom CSS, or implementing a custom Liquid block.

We hope this information is helpful to you.

4

hi, thanks for answering. where do i paste this code?

5

you can create file for that.

6

Basically, you need to create 2 sections, say “image banner” type. One of them would contain desktop image, another – mobile one.

In “Custom CSS” of the desktop session you enter

@media (max-width:767px){
 { display: none !important; }
}

and for mobile section:

@media (min-width:768px){
 { display: none !important; }
}

While this is not a valid CSS by itself, Shopify will convert it to proper CSS to apply to each of the sections.

7

hi, thanks for the answer. where in custom css should i put the codes?

8

In the “Custom CSS” setting in section settings. One for each.