Want to upload video in Grid Banner -> Banner card

Store Design
1

Hi friends , I am using Hyper Theme , my website is TOAIArt.com. I want to use ‘Grid Banner’ section , but instead of uploading images in ‘Banner Cards’ , I want to upload videos.

Please see the attached image.

I am using Grid Banner section in : TOAI Exclusive – TOAIArt.com page of my website.

grid banner stacked
grid banner stacked1920×1200 298 KB

2

Hey @SurTri

The way your section is built is probably to only handle images and not videos so obviously you’ll have to make some code changes in your section file to be able to handle both videos and images.

If you’re not familiar with coding then I suggest let a Shopify developer handle this so that they can custom code it to manage both. If you’d like my help then feel free to share your collaborator code in my private messages and I’ll sort that out for you.

Cheers,
Moeed

4

thanks for your response . this requirement is closed .

5

Hi @SurTri ,
The Hyper theme Grid Banner supports images only by default. To use videos in Banner Cards, you need a small theme customization.

In the Grid Banner card block file (usually something like
sections/grid-banner.liquid or snippets/banner-card.liquid):

1) Add a video setting in the block schema

{
  "type": "video_url",
  "id": "banner_video",
  "label": "Banner video",
  "accept": ["youtube", "vimeo"]
}

2) Update the markup to render video if available

{% if block.settings.banner_video != blank %}
  <div class="banner-video">
    {{ block.settings.banner_video | video_tag: autoplay: true, loop: true, muted: true, controls: false }}
  </div>
{% elsif block.settings.image != blank %}
  {{ block.settings.image | image_url: width: 2000 | image_tag }}
{% endif %}
6

Nice store — Hyper is a solid theme.

Regarding the Grid Banner section in Hyper: by default, that section is built to accept images only, not videos. So unfortunately, there isn’t a native setting in the theme editor to upload videos directly into the Banner Cards.

That said, you do have a few workable options:

:white_check_mark: Option 1: Use a custom section (recommended if you’re comfortable with code)

You (or a developer) can duplicate the Grid Banner section and modify it to accept video URLs or MP4 files instead of images. This usually involves:

  • Adding a video setting in the section schema

  • Replacing the <img> tag with a <video> tag (with autoplay / loop / muted if needed)

This keeps the same layout but gives you full control.

:white_check_mark: Option 2: Use background videos instead of Grid Banner

Hyper includes video or media-focused sections that support videos out of the box. If your goal is visual impact rather than a strict grid layout, this might be the easiest no-code solution.

:white_check_mark: Option 3: Upload short videos as GIFs (quick workaround)

Some merchants export short looping videos as high-quality GIFs and upload them as images. This works inside Grid Banner without code, but:

  • File sizes can get large

  • No sound or playback controls

:cross_mark: What won’t work

  • Apps won’t help much here, since the Grid Banner is theme-controlled

  • Shopify doesn’t allow mixing image/video uploads in a section unless the theme explicitly supports it

Recommendation

If video banners are core to your brand, I’d suggest either:

  • A small theme customization, or

  • Rebuilding that section using a custom video grid section

7

thanks all , this requirement is closed now.