Image/Video Overlay Banner Section
Theme > Edit Code > Sections > Create section (name.liquid) > Add the code below:
—————————————————————————————————————————
{% schema %}
{
"name": "Custom Image/Video Banner",
"tag": "section",
"class": "custom-image-banner",
"settings": [
{
"type": "image_picker",
"id": "desktop_image",
"label": "Desktop image (fallback)"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image (fallback)"
},
{
"type": "url",
"id": "video_url",
"label": "MP4 Video URL (optional)"
},
{
"type": "text",
"id": "youtube_id",
"label": "YouTube Video ID (optional)",
"info": "Example: For https://www.youtube.com/watch?v=dQw4w9WgXcQ use 'dQw4w9WgXcQ'"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Your Banner Heading"
},
{
"type": "select",
"id": "heading_tag",
"label": "Heading Tag",
"default": "h2",
"options": [
{ "value": "h1", "label": "H1" },
{ "value": "h2", "label": "H2" }
]
},
{
"type": "richtext",
"id": "subheading",
"label": "Subheading",
"default": "<p>Your banner subheading goes here.</p>"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "select",
"id": "text_position",
"label": "Text alignment",
"default": "center",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
]
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"min": 0,
"max": 1,
"step": 0.1,
"default": 0.4
},
{
"type": "range",
"id": "desktop_height",
"label": "Desktop height (vh)",
"min": 5,
"max": 100,
"step": 1,
"default": 70
},
{
"type": "range",
"id": "mobile_height",
"label": "Mobile height (vh)",
"min": 5,
"max": 100,
"step": 1,
"default": 50
},
{
"type": "color",
"id": "button_bg_color",
"label": "Button Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#ffffff"
}
],
"presets": [
{
"name": "Image/Video Banner",
"category": "Media"
}
]
}
{% endschema %}
{% style %}
.custom-image-banner {
position: relative;
overflow: hidden;
height: {{ section.settings.desktop_height }}vh;
}
@media screen and (max-width: 749px) {
.custom-image-banner {
height: {{ section.settings.mobile_height }}vh;
}
}
.custom-image-banner__media,
.custom-image-banner video,.custom-image-banner iframe {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
pointer-events: none;
}
.custom-image-banner__overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: {{ section.settings.overlay_color }};
opacity: {{ section.settings.overlay_opacity }};
z-index: 1;
}
.custom-image-banner__text {
position: relative;
z-index: 2;
top: 50%;
transform: translateY(-50%);
text-align: {{ section.settings.text_position }};
padding: 2rem;
color: white;
}
.custom-image-banner__button {
margin-top: 1rem;
display: inline-block;
padding: 0.7rem 1.5rem;
background: {{ section.settings.button_bg_color }};
color: {{ section.settings.button_text_color }};
text-decoration: none;
}
{% endstyle %}
<div class="custom-image-banner">
{% if section.settings.video_url != blank %}
<video class="custom-image-banner__media" autoplay muted loop playsinline>
<source src="{{ section.settings.video_url }}" type="video/mp4">
</video>
{% elsif section.settings.youtube_id != blank %}
<iframe class="custom-image-banner__media"
src="https://www.youtube.com/embed/{{ section.settings.youtube_id }}?autoplay=1&mute=1&loop=1&playlist={{ section.settings.youtube_id }}&controls=0&showinfo=0&rel=0&modestbranding=1"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen>
</iframe>
{% else %}
<div class="custom-image-banner__media">
{% if section.settings.desktop_image %}
<img src="{{ section.settings.desktop_image | img_url: 'master' }}" alt="Banner image" loading="lazy" style="width:100%; height:100%; object-fit:cover;">
{% endif %}
</div>
{% endif %}
<div class="custom-image-banner__overlay"></div>
<div class="custom-image-banner__text">
{% if section.settings.heading %}
<{{ section.settings.heading_tag }}>{{ section.settings.heading }}</{{ section.settings.heading_tag }}>
{% endif %}
{% if section.settings.subheading != blank %}
{{ section.settings.subheading }}
{% endif %}
{% if section.settings.button_text and section.settings.button_link %}
<a href="{{ section.settings.button_link }}" class="custom-image-banner__button">{{ section.settings.button_text }}</a>
{% endif %}
</div>
</div>