Shopify themes, liquid, logos, and UX
is it possible to use two different pictures for desktop and mobile homepage?
dawn theme
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?
Sandesh Paudyal |
| Shopify Developer
Need help with your store?
sandeshpaudyal99@gmail.comFor quick response - Message Me : +9779851353732
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
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.
Like this? it only shows the first image on both desktop and mobile.
thanks for the help
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?
Sandesh Paudyal |
| Shopify Developer
Need help with your store?
sandeshpaudyal99@gmail.comFor quick response - Message Me : +9779851353732
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.
it now shows both images one next to another on desktop
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025