Mobile images and videos

A wide desktop image often loses its subject on a phone: the person or product ends up cut off at the sides. Many Radian sections let you pick a separate mobile image or mobile video for phones. It is an optional override: leave it empty and the desktop image or video is used everywhere, as before.

How to set it up

Step 1: Prepare the media

1. Make a version of the image for phones, usually portrait (for example 4:5 or 9:16), with the subject in the middle.
2. For video, export a portrait version and upload it to Content > Files in Shopify Admin. Mobile videos must be hosted on Shopify.

Step 2: Add the mobile version

1. In the theme editor, click the section or block.
2. Next to its Image or Video, find Mobile image or Mobile video and select the phone version.
3. Switch the editor preview to mobile (the phone icon at the top) to check it.

Step 3: Remove an override

1. Click the mobile image or video and choose Remove. Phones show the desktop media again.

Where you can set mobile media

Sections that already had a mobile image, such as Slideshow and Image banner, work the same way.

How it works

• Images use the browser's own art direction: phones download only the mobile image and desktops only the desktop one, so pages don't load both.
• Mobile videos use the same player as desktop videos: autoplay, muted looping and pausing while off screen work the same.
• Mobile media shows on screens up to 767px wide, the same breakpoint sections use for their mobile settings.
• Overlays, text and buttons stay the same; only the media changes.

Related

• Section layout and spacing
• Image banner
• Video