can i use different pictures for desktop and mobile homepage?

can i use different pictures for desktop and mobile homepage?

מלבושים
Excursionist
33 0 8

is it possible to use two different pictures for desktop and mobile homepage?

dawn theme

Replies 8 (8)

BrewBrains
Shopify Partner
160 26 33

Hi @מלבושים ,

This is possible. We can create an option to upload image for desktop and mobile differently. Let me know on which section you want this feature and I can help on that. 

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

PageFly-Amelia
Shopify Partner
626 165 238

Hello @מלבושים 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Select two images like as shown below. The first image is for desktop, the second is image for mobile

PageFlyAmelia_0-1711353487645.png

Step 2: Online Stores > Themes > Edit code

Step 3: Choose file theme.liquid

Step 4: Add code above the tag </head>

 

 

<style>
@media only screen and (max-width: 767px) {
   .banner .banner__media:first-child {
      display: none !important;
   }

   .banner .banner__media:nth-child(2) {
      width: 100% !important;
   }
}
@media only screen and (min-width: 768px) {
   .banner .banner__media:first-child {
      width: 100% !important;
   }

   .banner .banner__media:nth-child(2) {
      display: none !important;
   }
}
</style>

 

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

מלבושים
Excursionist
33 0 8

 

Like this? it only shows the first image on both desktop and mobile.

thanks for the help

צילום מסך 2024-03-26 010919.png

BrewBrains
Shopify Partner
160 26 33

Hi @מלבושים , You need to write some custom code to have the functionality to upload seperate image for desktop and mobile from customization. You can provide me the store access on my email, if you want me to help.

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

PageFly-Amelia
Shopify Partner
626 165 238

Hello @מלבושים,

 

Sorry my code didn't work above, after previewing it again I found another way to help you, could you try changing the code to the one below for me?

<style>
@media only screen and (max-width: 767px) {
   .banner .banner__media:first-child {
      display: none !important;
   }

   .banner .banner__media:nth-child(2) {
      width: 100% !important;
   }
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

מלבושים
Excursionist
33 0 8

 

it now shows both images one next to another on desktop

צילום מסך 2024-03-26 102817.png

PageFly-Amelia
Shopify Partner
626 165 238

Hello @מלבושים 

Could you please provide me with the URL of your page so that I can check what the issue is?

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

מלבושים
Excursionist
33 0 8