Where you can achieve what your competitors can’t

Video Background Banner To Shopify Homepage

Benefits of Adding a Video Background Banner to Your Shopify Homepage

Adding a video background banner to your Shopify homepage provides several compelling advantages:

Visual Impact Benefits

  • Creates an immersive, visually striking first impression
  • Differentiates your store from competitors using static images
  • Adds depth and dimension to your homepage design
  • Catches the eye without requiring active clicking or interaction

Brand Experience Benefits

  • Establishes a premium, modern feel for your brand
  • Sets the mood or atmosphere for your shopping experience
  • Communicates brand identity through motion and styling
  • Creates emotional connections more effectively than static images

User Experience Benefits

  • Provides context and visual cues while keeping navigation elements accessible
  • Serves as an ambient element that doesn’t interrupt the shopping journey
  • Works as a subtle backdrop that enhances rather than competes with content
  • Can highlight seasonal themes or promotions without major site redesigns

Technical & Design Benefits

  • Seamlessly integrates with overlaid text and call-to-action buttons
  • Creates a cohesive design element spanning the full width of the browser
  • Can be designed to loop seamlessly for continuous engagement
  • Adapts responsively to different screen sizes when properly implemented

NEW CODE : (new improved version – scroll down for the old version)


{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
  {% if block.type == 'video' %}
    <div class="onhow-video-box" data-block-id="{{ block.id }}">
      {%- if block.settings.video_link != blank -%}
        <div class="onhow-fullscreen-video-wrap">
          <video class="onhow-video-js" loop autoplay preload="none" muted playsinline
            poster="https:{{ block.settings.video_image | img_url: 'master' }}">
            <source src="{{ block.settings.video_link }}" type="video/mp4">
          </video>
        </div>
      {%- else -%}
        <div class="onhow-fallback-image" style="background-image: url('{{ block.settings.video_image | img_url: 'master' }}');"></div>
      {%- endif -%}

      <div class="onhow-content-box">
        {% if block.settings.title != blank %}
          <h1 class="onhow-content-title">{{ block.settings.title | escape }}</h1>
        {% endif %}

        {% if block.settings.text != blank %}
          <div class="onhow-content-description" id="{{ block.id }}">
            {{ block.settings.text }}
          </div>
        {% endif %}

        {% if block.settings.button_link != blank and block.settings.button_label != blank %}
          <a href="{{ block.settings.button_link }}" class="onhow-content-btn" 
             style="border-radius: {{ block.settings.button_radius }}px;">
            {{ block.settings.button_label | escape }}
          </a>
        {% endif %}
      </div>
    </div>
  {% else %}
    <div class="onhow-image-box" data-block-id="{{ block.id }}">
      {%- if block.settings.image_bg != blank -%}
        <div class="onhow-background-image" style="background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');"></div>
      {%- else -%}
        <div class="onhow-background-color"></div>
      {%- endif -%}

      <div class="onhow-content-box">
        {% if block.settings.title != blank %}
          <h1 class="onhow-content-title">{{ block.settings.title | escape }}</h1>
        {% endif %}

        {% if block.settings.text != blank %}
          <div class="onhow-content-description" id="{{ block.id }}">
            {{ block.settings.text }}
          </div>
        {% endif %}

        {% if block.settings.button_link != blank and block.settings.button_label != blank %}
          <a href="{{ block.settings.button_link }}" class="onhow-content-btn"
             style="border-radius: {{ block.settings.button_radius }}px;">
            {{ block.settings.button_label | escape }}
          </a>
        {% endif %}
      </div>
    </div>
  {% endif %}
{%- endfor -%}

{% else %}
  <div class="onhow-placeholder-noblocks">
    This section doesn't currently include any content. Add content to this section using the sidebar.
  </div>
{%- endif -%}

{% style %}
:root {
  --onhow-text-color-{{ section.id }}: {{ section.blocks[0].settings.color_text }};
  --onhow-btn-bg-{{ section.id }}: {{ section.blocks[0].settings.color_btn_bg }};
  --onhow-btn-text-{{ section.id }}: {{ section.blocks[0].settings.color_btn_text }};
  --onhow-bg-color-{{ section.id }}: {{ section.blocks[0].settings.color_bg | default: '#16165b' }};
  --onhow-heading-size-{{ section.id }}: {{ section.blocks[0].settings.heading_size | default: 3.8 }}rem;
  --onhow-description-size-{{ section.id }}: {{ section.blocks[0].settings.description_size | default: 1.1 }}rem;
  --onhow-button-size-{{ section.id }}: {{ section.blocks[0].settings.button_size | default: 1.5 }}rem;
}

.onhow-video-background {
  position: relative;
  margin-top: 0;
  z-index: 1;
}

.onhow-video-box,
.onhow-image-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  min-height: calc((100vh - 165px) * 0.6);
  max-height: 480px;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.onhow-fallback-image,
.onhow-background-image,
.onhow-background-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.onhow-background-color {
  background-color: var(--onhow-bg-color-{{ section.id }});
}

.onhow-fullscreen-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.onhow-video-js {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onhow-content-box {
  position: relative;
  padding: 30px 20px;
  text-align: center;
  z-index: 3;
  width: 100%;
  max-width: 900px;
  overflow: hidden;
}

.onhow-content-title {
  color: var(--onhow-text-color-{{ section.id }});
  font-size: var(--onhow-heading-size-{{ section.id }});
  line-height: 1.2;
  margin-bottom: 20px;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
}

.onhow-content-description {
  max-width: 600px;
  margin: 0 auto 25px;
}

.onhow-content-description p {
  color: var(--onhow-text-color-{{ section.id }});
  font-size: var(--onhow-description-size-{{ section.id }});
  line-height: 1.6;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
}

.onhow-content-btn {
  display: inline-block;
  padding: 12px 30px;
  text-decoration: none;
  font-size: var(--onhow-button-size-{{ section.id }});
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  background: var(--onhow-btn-bg-{{ section.id }});
  color: var(--onhow-btn-text-{{ section.id }});
  border: 1px solid transparent;
  transition: all 0.3s ease;
  font-family: var(--font-body-family);
  min-width: 180px;
}

.onhow-content-btn:hover {
  opacity: 0.9;
}

.onhow-placeholder-noblocks {
  text-align: center;
  padding: 50px 20px;
  max-width: 500px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .onhow-video-background {
    margin-top: 0;
  }

  .onhow-video-box,
  .onhow-image-box {
    min-height: 300px;
    height: auto !important;
  }

  .onhow-content-title {
    font-size: calc(var(--onhow-heading-size-{{ section.id }}) * 0.579);
    display: block;
  }

  .onhow-content-description p {
    font-size: calc(var(--onhow-description-size-{{ section.id }}) * 0.909);
  }

  .onhow-content-btn {
    display: inline-block;
    min-width: 150px;
    padding: 10px 20px;
    font-size: calc(var(--onhow-button-size-{{ section.id }}) * 0.6);
  }
}
{% endstyle %}

{% schema %}
{
  "name": { "en": "Video Background" },
  "class": "onhow-video-background",
  "max_blocks": 1,
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "url",
          "id": "video_link",
          "label": { "en": "Video link" }
        },
        {
          "type": "image_picker",
          "id": "video_image",
          "label": { "en": "Cover image" }
        },

        {
          "type": "header",
          "content": { "en": "Text" }
        },
        {
          "type": "text",
          "id": "title",
          "label": { "en": "Heading" },
          "default": "Video Background"
        },
        {
          "type": "range",
          "id": "heading_size",
          "min": 2,
          "max": 6,
          "step": 0.1,
          "unit": "rem",
          "label": { "en": "Heading size" },
          "default": 3.8
        },
        {
          "type": "richtext",
          "id": "text",
          "label": { "en": "Description" },
          "default": { "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>" }
        },
        {
          "type": "range",
          "id": "description_size",
          "min": 0.8,
          "max": 2,
          "step": 0.1,
          "unit": "rem",
          "label": { "en": "Description size" },
          "default": 1.1
        },
        {
          "type": "color",
          "id": "color_text",
          "label": { "en": "Text color" },
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": { "en": "Button label" }
        },
        {
          "type": "url",
          "id": "button_link",
          "label": { "en": "Button link" }
        },
        {
          "type": "range",
          "id": "button_size",
          "min": 0.8,
          "max": 2,
          "step": 0.1,
          "unit": "rem",
          "label": { "en": "Button text size" },
          "default": 1.5
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label": { "en": "Background button color" },
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label": { "en": "Button text color" },
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "button_radius",
          "min": 0,
          "max": 40,
          "step": 2,
          "unit": "px",
          "label": "Button corner radius",
          "default": 4
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "color",
          "id": "color_bg",
          "label": { "en": "Background color" },
          "default": "#16165b"
        },
        {
          "type": "image_picker",
          "id": "image_bg",
          "label": { "en": "Background image" }
        },

        {
          "type": "header",
          "content": { "en": "Text" }
        },
        {
          "type": "text",
          "id": "title",
          "default": "Image Background",
          "label": { "en": "Heading" }
        },
        {
          "type": "range",
          "id": "heading_size",
          "min": 2,
          "max": 6,
          "step": 0.1,
          "unit": "rem",
          "label": { "en": "Heading size" },
          "default": 3.8
        },
        {
          "type": "richtext",
          "id": "text",
          "label": { "en": "Description" },
          "default": { "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>" }
        },
        {
          "type": "range",
          "id": "description_size",
          "min": 0.8,
          "max": 2,
          "step": 0.1,
          "unit": "rem",
          "label": { "en": "Description size" },
          "default": 1.1
        },
        {
          "type": "color",
          "id": "color_text",
          "label": { "en": "Text color" },
          "default": "#ffffff"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": { "en": "Button label" }
        },
        {
          "type": "url",
          "id": "button_link",
          "label": { "en": "Button link" }
        },
        {
          "type": "range",
          "id": "button_size",
          "min": 0.8,
          "max": 2,
          "step": 0.1,
          "unit": "rem",
          "label": { "en": "Button text size" },
          "default": 1.5
        },
        {
          "type": "color",
          "id": "color_btn_bg",
          "label": { "en": "Background button color" },
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "color_btn_text",
          "label": { "en": "Button text color" },
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "button_radius",
          "min": 0,
          "max": 40,
          "step": 2,
          "unit": "px",
          "label": "Button corner radius",
          "default": 4
        }
      ]
    }
  ],
  "presets": [
    {
      "name": { "en": "Video Background" },
      "category": { "en": "Media" },
      "blocks": [
        { "type": "video" }
      ]
    }
  ]
}
{% endschema %}

OLD CODE : 

{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%}

{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

 

{% if block.type == 'video' %}

<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">

 

{%- if block.settings.video_link != blank -%}

<div class="fullscreen-video-wrap">

<video class="video-js" loop autoplay preload="none" muted playsinline

poster="https:{{ block.settings.video_image | img_url: 'master' }}">

<source src="{{ block.settings.video_link }}" type="video/mp4">

</video>

</div>

{% endif %}

 


<div class="videoBoxInfo">

{% if block.settings.title != blank %}

<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">

{{ block.settings.title | escape }}

</h1>

{% endif %}

 

{%- style -%}

.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}

{%- endstyle -%}

 

{% if block.settings.text != blank %}

<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">

{{ block.settings.text }}

</div>

{% endif %}

 

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% else %}

<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">

 


 

<div class="imageBoxInfo">

{% if block.settings.title != blank %}

<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">

{{ block.settings.title | escape }}

</h1>

{% endif %}

 

{%- style -%}

.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}

{%- endstyle -%}

 

{% if block.settings.text != blank %}

<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">

{{ block.settings.text }}

</div>

{% endif %}

 

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% endif %}

{%- endfor -%}

 

{% else %}

<div class="placeholderNoblocks">

This section doesn’t currently include any content. Add content to this section using the sidebar.

    </div>

{%- endif -%}

 

<style>

.main-content .videoBackground {

margin-top: -55px;

}

.videoBackground {

position: relative;

}

.videoBackground .fullscreen-video-wrap {

position: absolute;

top: 0;

left: 0;

min-width: 100%;

width: 100%;

height: 100%;

overflow: hidden;

}

.videoBackground .fullscreen-video-wrap .video-js {

position: absolute;

top: 0;

left: 0;

min-height: 100%;

min-width: 100%;

width: 100%;

height: 100%;

object-fit: cover;

}

.videoBackground .fullscreen-video-wrap video {

min-height: 100%;

min-width: 100%;

object-fit: cover;

}

.videoBackground .videoBox {

display: flex;

align-items: center;

justify-content: flex-end;

flex-direction: column;

padding: 100px 20px 80px;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

min-height: 500px;

max-height: 800px;

        height: calc(100vh - 165px);

position: relative;

}

.videoBackground .imageBox {

display: flex;

align-items: center;

justify-content: flex-end;

flex-direction: column;

padding: 100px 20px 80px;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

position: relative;

min-height: calc(100vh - 165px);

height: auto;

}

.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {

z-index: 2;
  
margin: auto;

text-align: center;

}

.videoBackground .overlay {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: #000;

z-index: 1;

}

.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {

-moz-user-select: none;

-ms-user-select: none;

-webkit-user-select: none;

user-select: none;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

display: inline-block;

width: auto;

text-decoration: none;

text-align: center;

vertical-align: middle;

cursor: pointer;

border: 1px solid transparent;

border-radius: 2px;

padding: 10px 30px;

font-style: normal;

font-weight: normal;

letter-spacing: 0.06em;

white-space: normal;

font-size: 16px;

margin-top: 20px;

}

.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {

color: #FFF;
  
font-size: 65px;

line-height: 40px;

}

.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {

max-width: 500px;

margin: 0 auto;

}

.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
  
font-size: 17px;

line-height: 28px;

}

.videoBackground .placeholderNoblocks {

text-align: center;

max-width: 500px;

margin: 0 auto;

}

    @media screen and (max-width: 767px) {

.main-content .videoBackground {

margin-top: -35px;

}

.videoBackground .fullscreen-video-wrap {

z-index: 3;

}

.videoBackground .videoBox {

min-height: 300px;

height: 100%;

position: relative;

padding: 0;

}

.videoBackground .fullscreen-video-wrap {

position: relative;

min-height: 300px;

z-index: -2;

}

.videoBackground .videoBoxInfo {

padding: 2px 20px;

width: 100%;

}

.videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn {
display: none;

}

    }

</style>

 

{% schema %}

{

"name": {

"en": "Video Background"

},

"class": "videoBackground",

"max_blocks": 1,

"blocks": [

{

"type": "video",

"name": "Video",

"settings": [

{

"type": "url",

"id": "video_link",

"label": {

"en": "Video link"

}

},

{

"type": "image_picker",

"id": "video_image",

"label": {

"en": "Cover image"

}

},

{


"type": "header",

"content": {

"en": "Text"

}

},

{

"type": "text",

"id": "title",

"label": {

"en": "Heading"

},

"default": "Video slide"

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color"

},

"default": "#ffffff"

}

]

},

{

"type": "image",

"name": "Image",

"settings": [

{

"type": "color",

"id": "color_bg",

"label": {

"en": "Background color (optional)"

},

"default": "#16165b"

},

{

"type": "image_picker",

"id": "image_bg",

"label": {

"en": "or use an image (required)"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text"

}

},

{

"type": "text",

"id": "title",

"default": "Image slide",

"label": {

"en": "Heading"

}

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color"

},

"default": "#ffffff"

}

]

}

],

"presets": [

{

"name": {

"en": "Video Background"

},

"category": {

"en": "Main"

},

"blocks": [

{

"type": "video"

}

]

}

]

}

{% endschema %}