How to use a different image for a mobile banner than the desktop.

New Member
2 0 0
 
 
I've been looking everywhere to try and find a solution but I haven't found a thread with the Ecom turbo them. Any help would be greatly appreciated. I'm also trying to remove the slideshow dot at the bottom so if you know anything about that as well that would be awesome. Thank you

 

https://victorvibes.com/

pass: teoche

 

Theme: Ecom Turbo

0 Likes
Highlighted
Shopify Expert
540 37 110

You have a couple options:

a) Use the html element srcset to display different images for different screensizes. This is the best solution for performance because it loads the closest sized image for the device accessing it. Here's an example from a Shopify optimization guide I wrote: 

srcset-different-sizes-example.jpg

 

b) You can use CSS media queries to hide / show different image depending on the device size. This way is easier but the expense is that some browsers will load both images (since the html is displaying them, the CSS is just hiding one of them).


CSS media queries look like this:

@media screen and (min-width: 768px) {
  .mobile-banner {
    display: none;
  }
}

For hiding the slider dots, you can use this CSS rule:

 

.slick-slider .slick-dots li button {
  display: none;
}

The ideal solution is to disable them in the JavaScript plugin code, but if you don't feel like digging through code the CSS will do just fine.

 

 

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes