Hi all,
Is there a way in Maropost Commerce Cloud to set a different image for mobile devices in Advertising Campaigns? The current banner images appear really small on the mobile home page, so I’d like to use a mobile-optimised version instead of the desktop one.
Thanks!
Hi Scott, You can manage different images for mobile and desktop devices by creating separate advertising groups for each. This involves some theme tweaks. 1. Create Two Advertising Groups: - One for desktop banners (banner-desktop) - One for mobile banners (banner-mobile) 2. Create Adverts for Each Group: Once the groups are set up, you can upload and assign your respective banners to each group. 3. Use Mobile-First CSS for Displaying Ads: You can then use CSS to control which banner is shown based on the device's screen size. Here's a simple implementation approach: .desktop-banner { display: none; } @media (min-width: 992px) { .mobile-banner { display: none; } .desktop-banner { display: block; } } The downside of this approach is that you’ll need to manage two groups for each banner (desktop and mobile), but it's a straightforward way to achieve the desired result. For more complex websites, you could take this a step further by optimizing your HTML and CSS for more efficient loading, especially when dealing with multiple banner sizes and devices. Hope this helps!
Hello Adrian Thanks for the suggestion! the little hack I figgured out is to use the HTML <picture> element with a <source media> tag, which tells the browser to only download the image appropriate for the screen size. I then repurposed the Description field in each Advertising Campaign to store the mobile image path, so you can manage it entirely from the admin without touching the template.
Here's how to set it up:
STEP 1 — Update your carousel.template.html
Replace all the mobile image logic with this single block inside your <picture> element:
[%if [@description@]%] <source media="(max-width: 768px)" srcset="[@description@]"> [%/if%]
<img [%if [@count@] eq '0'%] fetchpriority="high" [%else%] loading="lazy" [%/if%] src="[%asset_url type:'adw' id:'[@ad_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%]" class="d-block w-100" alt="[@headline@]"
Also, update your caption condition — since Description is now used for the mobile image, remove it from the caption check:
[%if [@headline@] or [@linktext@]%]
<div class="carousel-caption d-flex flex-column text-left"> [%if [@linktext@]%]<p><span class="btn btn-primary btn-lg">[@linktext@]</span></p>[%/if%] </div> [%/if%]
STEP 2 — Update each Advertising Campaign in the admin
For each carousel slide, go to Webstore > Advertising Campaigns and paste the mobile image path into the Description field, e.g:
/assets/marketing/image_name.png
Leave it blank on any slide where you're happy for the desktop image to show on mobile.
Hope this helps someone
