How can I set up a responsive video banner on the Dawn theme?

Store Design
, , ,

Topic summary

Request: Replace the image banner in Shopify’s Dawn theme with a video that switches sources by device—portrait video on mobile and landscape on desktop.

Proposed approaches:

  • App-based: Use a Shopify App Store solution for “responsive video banner” or “slideshow with mobile support” to manage separate mobile/desktop video sources via a UI.
  • Code customization: Edit the Dawn theme to swap the image banner with video embeds, using JavaScript and/or CSS media queries (CSS rules that change styles based on screen size) to load/display different videos on mobile vs. desktop.

Notes:

  • No specific app recommendations, code snippets, or step-by-step instructions were provided.
  • This leans developer-oriented for the code path and suggests searching the App Store for a no-code option.

Status: No confirmed implementation; solution remains open pending app selection or custom coding.

Summarized with AI on January 3. AI used: gpt-5.
1

I am using the Dawn theme and would like to have a video instead of the image banner

Also, I want the video banner to be in portrait mode on mobile, and landscape in desktop. Basically if you are on mobile the source video is different to the source video on the desktop..

Can someone help please?

2

Hi @GLC123 ,
This is Theodore from PageFly - Shopify Page Builder App.

You want a responsive video banner for your Dawn theme Shopify store that uses different videos for mobile and desktop. Here are your options:

Option 1: Shopify App

The Shopify App Store offers apps specifically designed for responsive video banners. These apps might have a user-friendly interface to manage different video sources for mobile and desktop versions. Search for terms like “responsive video banner” or “slideshow with mobile support.”

Option 2: Code Customization

This option requires editing the Dawn theme code (recommended for developers). You’ll need to replace the image banner code with video embed code that uses JavaScript libraries or media queries to display different videos on mobile and desktop.

Best regards,
Theodore | PageFly