How can I create a video with text section in the Dawn theme?

Store Design

Topic summary

Users are seeking to create a “Video with Text” section in Shopify’s Dawn theme, similar to the existing “Image with Text” section, with autoplay and loop functionality.

Primary Solution:

  • User vincentdh hired a coder and shared complete code for creating video-with-text.liquid and component-video-with-text.css files
  • This involves duplicating the “Image with Text” section structure and replacing image elements with video elements

Common Issues & Fixes:

Mobile Display Problems:

  • Videos not appearing on mobile devices
  • Fix: Add CSS code to base.css making video position relative on screens under 749px

Video Freezing:

  • Videos stop when selecting product variants
  • Solution: Remove specific code from media-gallery.js (line 84) that pauses all media
  • Alternative: Add play/pause buttons for manual control

Additional Improvements:

  • User Spac-es provided enhanced code with play/pause buttons, better mobile animations, and additional customization options (alignment, captions, color schemes)
  • Audio controls can be enabled by adding controls="true" to the video tag

Ongoing Requests:

  • Removing padding/white space around videos
  • Adding colored backgrounds to text sections
  • Making videos full-width
  • Creating video columns without text

The discussion remains active with users requesting help for specific customization needs and styling adjustments.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
123

hello! I did this, but then… nothing happens. What is the next step? I can’t find where to paste my vimeo url. Any help would be greatly appreciated!

1 Like