How to display video on the collection page header?

Store Design
, , ,

Topic summary

A user wants to replace the default featured image on a Dawn theme collection page header with an autoplay video, similar to a reference site example.

Proposed Solutions:

  • Custom code approach (most detailed): Edit main-collection-banner.liquid to conditionally display video. Steps include:

    • Upload video file via Shopify Admin → Content → Files (keep under 20MB)
    • Create a custom metafield (custom.header_video) under Settings → Custom data → Collections to assign videos per collection
    • Modify the liquid template to check for the metafield and render a <video> tag with autoplay/loop/muted attributes, falling back to the default image if no video exists

  • Alternative suggestions:

    • Check collection handle in collection.liquid and conditionally insert video code (requires coding knowledge)
    • Use “Custom Liquid” block in theme customizer and embed YouTube video code

Key limitation: Dawn theme lacks built-in video header functionality, requiring manual code customization.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to display and autoplay a header video instead of a featured image on the collection page of the Dawn theme.

How I want it to display on my website: https://baristacollection.com/collections/ahmad-tea

Where I want it to display: baristacollections

Store Pass: barista

Looking forward to the best solution.

2 Likes
2

@ArafatWeb it looks like the reference site is having other theme than dawn, so if you want to add it to dawn then you can edit collection .liquid file to check collection handle, and if this collection handle is the one you want then add code for the video.

This will not be easy if you do not know the coding but it is due to the fact that dawn theme do not have readymade functionality to add the video.

3

Hello @ArafatWeb

Best Solution (Direct Code Customization in Dawn):

We’ll add a conditional block in your main-collection-banner.liquid or main-collection.liquid file to show a video if you’ve uploaded one, else fallback to the default banner.

Let’s proceed step-by-step:

Step 1: Upload Your Video

Go to Shopify Admin → Content → Files.

Upload your MP4 video (keep size < 20MB for performance).

Step 2: Add a Metafield to Each Collection (Optional but Ideal)

To dynamically assign videos to different collections:

Go to Settings → Custom data → Collections.

Click “Add definition”:

Name: Header Video

Namespace and key: custom.header_video

Type: File → Select “File” (not image-only)

Check “Accept video”

Then edit the Ahmad Tea collection → Scroll to Metafields → Upload the video file (or paste the previously uploaded video file URL).

Step 3: Edit main-collection-banner.liquid

Go to Online Store → Themes → Dawn → Edit Code

sections/main-collection-banner.liquid

{%- if collection.image -%}

{%- endif -%}

Replace or modify it like this:

{%- assign video = collection.metafields.custom.header_video -%}

{% if video %}

{% elsif collection.image %}

{% endif %}
1 Like
4

try to “customize” the theme in your backend and select “custom liquid” and then copy the youtube embed code from your youtube page of the video.