Can I use different desktop and mobile images inside a countdown section?

Functions
1

I’m working on a Shopify store and I need to display a different image for desktop and mobile, but the image is part of a countdown section rather than a standard image banner. When I upload a regular image elsewhere in the theme, I can control desktop and mobile separately. But inside the countdown section, the image always crops differently on each device, and I can’t find a way to upload two separate images.

Is it possible to modify the Liquid for this section so it accepts a desktop image and a mobile image, and then conditionally renders the right one using CSS breakpoints? Or is there a recommended approach for preventing unwanted cropping when an image sits inside a more complex component like a countdown layout?

Any tips or examples from others who’ve solved this would be a huge help.

2

Hi Ben,

If it’s just for one store, you could hardcode media queries into the CSS file to create a rule where imageA loads when the screen viewer is a specific size range and imageB loads for a different size range. You could also create a Liquid setting so those images can be assigned from a section setting rather than being hardcoded in.