Customization for mobile and desktop image

carlosct
New Member
2 0 1

Hello,

I am trying to follow these instructions for my Debut template, but for any reason I think that the versions described in this previous link has changed from what I have:

https://community.shopify.com/c/Shopify-Design/optimise-the-customized-image-for-mobile/m-p/766919/h...

Also, links and images from this previous link are not working, so if anyone can help me on making work a specific image for desktop version and another image for mobile version.

I will try to describe what I did:

1. Image picker, this step I was able to add it in hero.liquid:

{
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile Image"
}

2. Then the previous link mentions that it is needed to edit theme.scss.liquid, but this file is no available on my coding section, I do not know if it has changed on this version.

.mobile-only{ display: none}
.desktop-only{ display: block}

@media (max-width:768px){
  .mobile-only{ display: block}
  .desktop-only{ display: none}
}

3. Add div class for mobile and desktop version in hero.liquid before <noscript> section, I tried to add these sections, but I think that probably are incomplete.

@KetanKumar could you be very kind to help me on this?

Regards,

Replies 2 (2)
carlosct
New Member
2 0 1

I forgot to mention website where I want to modify the desktop/mobile image.

www.kofekoffee.com

Regards,

KetanKumar
Shopify Partner
36588 3628 11811

@carlosct 

sorry for late reply yes i can do this customization code if you need this can you please send pm details 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing