Hero Video on Image Banner

Store Design
, , , , ,
1

I’m using an image banner. One side is a photo while the other I’m trying to use a video. I was using a gif file but it takes to long to load and loses a lot of quality. I saw another site do this and I’m trying to add that to my site. I’m hoping using a Hero video will allow it to load faster and be a better resolution.

Example Site - The second image banner or the 3rd banner with the ring rotating.

My Site - The banner is towards the bottom of the site.

2

Hi @WaataBlasters ,

To add a high-quality hero video on your banner, replacing the GIF with a video file can provide both better resolution and faster loading. Here’s how to implement it:

  1. Upload the Video File:

    • In Shopify Admin, go to Settings > Files.
    • Upload your video file here. Using an MP4 format generally provides high quality with manageable file size.

  2. Edit Your Theme Code:

    • In Online Store > Themes, click on Actions > Edit Code.
    • Locate the banner section file in the Sections folder, usually named banner.liquid or similar.

  3. Embed the Video in the Banner Section:

    • Replace the GIF code with HTML for a video tag:

  

​

Adjust styling or positioning within the CSS file if necessary to make sure the video aligns with the image on the other side of the banner.

  • CSS Adjustments for Responsiveness:

    • To ensure the video scales well on mobile and desktop, add this CSS to your theme’s main CSS file (e.g., theme.css):
.banner-video video {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensure the video fills the area */
}
​

  1. Preview and Test:

    • Save your changes and preview the banner section to ensure the video displays smoothly and loads quickly.

Using a hero video in MP4 format should load faster than a GIF and retain quality, giving the banner a polished look.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

3

I’m not sure if I’m pasting the code right in the correct section but when I do it adds the MP4 video to both image banners on the home page. I only want to replace the GIF image with the one at the bottom of the page.

Screenshot 2024-11-14 212107.png
Screenshot 2024-11-14 212107.png2992×731 400 KB

Is there a way to code it so that I can upload an MP4 in the future through the store customization and not have to go through the code to edit the src and file URL?