Image and video Fully Customized Shopify Section
Create a fully customizable Shopify section that seamlessly integrates both images and videos for your online store. This dynamic section empowers you to captivate your audience with visually stunning content tailored to your brand. With complete control over font styles, text alignment, colors, and responsive settings for both desktop and mobile views, this Shopify section ensures optimal user experience across all devices. Perfect for showcasing products, highlighting campaigns, or telling your brand story, this section brings creativity and functionality together for a visually appealing and SEO-optimized store design.
Liquid Code
<section class="video-hero-section" style="position: relative; overflow: hidden;">
{% if section.settings.background_type == 'video' and section.settings.video != blank %}
<video class="video-hero-background" autoplay muted loop playsinline style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;">
<source src="{{ section.settings.video.sources[1].url }}" type="video/mp4">
</video>
{% elsif section.settings.background_type == 'image' and section.settings.image != blank %}
<img src="{{ section.settings.image | img_url: 'master' }}" alt="Background Image" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;">
{% endif %}
<div class="video-hero-content" style="
position: relative;
z-index: 1;
display: flex;
justify-content: {% case section.settings.desktop_content_position %}
{% when 'top-left' %} flex-start; align-items: flex-start;
{% when 'top-center' %} center; align-items: flex-start;
{% when 'top-right' %} flex-end; align-items: flex-start;
{% when 'middle-left' %} flex-start; align-items: center;
{% when 'middle-center' %} center; align-items: center;
{% when 'middle-right' %} flex-end; align-items: center;
{% when 'bottom-left' %} flex-start; align-items: flex-end;
{% when 'bottom-center' %} center; align-items: flex-end;
{% when 'bottom-right' %} flex-end; align-items: flex-end;
{% endcase %}
text-align: {{ section.settings.desktop_text_alignment }};
min-height: {{ section.settings.section_height }}vh;
padding: 20px;
">
<div class="video-hero-blocks" style="width: {{ section.settings.content_width }}%;">
{% for block in section.blocks %}
<div class="video-hero-block">
{% if block.settings.caption != blank %}
<div class="video-hero-caption" style="
color: {{ section.settings.caption_color }};
font-size: {{ section.settings.caption_font_size }}px;
font-weight: {{ section.settings.caption_font_weight }};
">
{{ block.settings.caption }}
</div>
{% endif %}
{% if block.settings.title != blank %}
<h2 class="video-hero-title" style="
color: {{ section.settings.title_color }};
font-size: {{ section.settings.title_font_size }}px;
font-weight: {{ section.settings.title_font_weight }};
">
{{ block.settings.title }}
</h2>
{% endif %}
{% if block.settings.text != blank %}
<div class="video-hero-text" style="
color: {{ section.settings.text_color }};
font-size: {{ section.settings.text_font_size }}px;
font-weight: {{ section.settings.text_font_weight }};
">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.button_text != blank %}
<a href="{{ block.settings.button_link }}" class="video-hero-button" style="
background-color: {{ section.settings.button_bg_color }};
color: {{ section.settings.button_text_color }};
font-size: {{ section.settings.button_font_size }}px;
font-weight: {{ section.settings.button_font_weight }};
">
{{ block.settings.button_text }}
</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</section>
<style>
.video-hero-section {
position: relative;
overflow: hidden;
}
.video-hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.video-hero-content {
position: relative;
z-index: 1;
padding: 20px;
}
.video-hero-blocks {
max-width: 100%;
}
.video-hero-caption {
margin-bottom: 1rem;
}
.video-hero-title {
margin-bottom: 1.5rem;
}
.video-hero-text {
margin-bottom: 2rem;
line-height: 1.6;
}
.video-hero-button {
padding: 12px 30px;
text-decoration: none;
border-radius: 4px;
display: inline-block;
transition: opacity 0.3s ease;
}
.video-hero-button:hover {
opacity: 0.9;
}
@media (max-width: 540px) {
.video-hero-caption {
font-size: {{ section.settings.mobile_caption_font_size }}px !important;
font-weight: {{ section.settings.mobile_caption_font_weight }} !important;
}
.video-hero-title {
font-size: {{ section.settings.mobile_title_font_size }}px !important;
font-weight: {{ section.settings.mobile_title_font_weight }} !important;
}
.video-hero-text {
font-size: {{ section.settings.mobile_text_font_size }}px !important;
font-weight: {{ section.settings.mobile_text_font_weight }} !important;
}
.video-hero-button {
font-size: {{ section.settings.mobile_button_font_size }}px !important;
font-weight: {{ section.settings.mobile_button_font_weight }} !important;
}
}
</style>
{% schema %}
{
"name": "Responsive Video Hero",
"settings": [
{
"type": "select",
"id": "background_type",
"label": "Background Type",
"options": [
{ "value": "video", "label": "Video" },
{ "value": "image", "label": "Image" }
],
"default": "video"
},
{
"type": "video",
"id": "video",
"label": "Background Video"
},
{
"type": "image_picker",
"id": "image",
"label": "Background Image"
},
{
"type": "range",
"id": "section_height",
"label": "Section Height",
"min": 50,
"max": 100,
"step": 5,
"default": 80,
"unit": "vh"
},
{
"type": "range",
"id": "content_width",
"label": "Content Width",
"min": 30,
"max": 100,
"step": 5,
"default": 50,
"unit": "%"
},
{
"type": "select",
"id": "desktop_content_position",
"label": "Desktop Content Position",
"options": [
{ "value": "top-left", "label": "Top Left" },
{ "value": "top-center", "label": "Top Center" },
{ "value": "top-right", "label": "Top Right" },
{ "value": "middle-left", "label": "Middle Left" },
{ "value": "middle-center", "label": "Middle Center" },
{ "value": "middle-right", "label": "Middle Right" },
{ "value": "bottom-left", "label": "Bottom Left" },
{ "value": "bottom-center", "label": "Bottom Center" },
{ "value": "bottom-right", "label": "Bottom Right" }
],
"default": "middle-center"
},
{
"type": "select",
"id": "desktop_text_alignment",
"label": "Desktop Text Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "range",
"id": "caption_font_size",
"label": "Caption Font Size",
"min": 12,
"max": 36,
"step": 1,
"default": 16,
"unit": "px"
},
{
"type": "range",
"id": "caption_font_weight",
"label": "Caption Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 400
},
{
"type": "range",
"id": "title_font_size",
"label": "Title Font Size",
"min": 18,
"max": 72,
"step": 1,
"default": 36,
"unit": "px"
},
{
"type": "range",
"id": "title_font_weight",
"label": "Title Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 700
},
{
"type": "range",
"id": "text_font_size",
"label": "Text Font Size",
"min": 12,
"max": 36,
"step": 1,
"default": 16,
"unit": "px"
},
{
"type": "range",
"id": "text_font_weight",
"label": "Text Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 400
},
{
"type": "range",
"id": "button_font_size",
"label": "Button Font Size",
"min": 12,
"max": 24,
"step": 1,
"default": 16,
"unit": "px"
},
{
"type": "range",
"id": "button_font_weight",
"label": "Button Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 600
},
{
"type": "color",
"id": "caption_color",
"label": "Caption Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "title_color",
"label": "Title Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_bg_color",
"label": "Button Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "mobile_caption_font_size",
"label": "Mobile Caption Font Size",
"min": 12,
"max": 36,
"step": 1,
"default": 14,
"unit": "px"
},
{
"type": "range",
"id": "mobile_caption_font_weight",
"label": "Mobile Caption Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 400
},
{
"type": "range",
"id": "mobile_title_font_size",
"label": "Mobile Title Font Size",
"min": 18,
"max": 72,
"step": 1,
"default": 28,
"unit": "px"
},
{
"type": "range",
"id": "mobile_title_font_weight",
"label": "Mobile Title Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 600
},
{
"type": "range",
"id": "mobile_text_font_size",
"label": "Mobile Text Font Size",
"min": 12,
"max": 36,
"step": 1,
"default": 14,
"unit": "px"
},
{
"type": "range",
"id": "mobile_text_font_weight",
"label": "Mobile Text Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 400
},
{
"type": "range",
"id": "mobile_button_font_size",
"label": "Mobile Button Font Size",
"min": 12,
"max": 24,
"step": 1,
"default": 14,
"unit": "px"
},
{
"type": "range",
"id": "mobile_button_font_weight",
"label": "Mobile Button Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 500
}
],
"blocks": [
{
"type": "content",
"name": "Content Block",
"settings": [
{
"type": "text",
"id": "caption",
"label": "Caption",
"default": "Lorem Ipsum Caption"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Lorem Ipsum Title"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Learn More"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
}
]
}
],
"presets": [
{
"name": "Responsive Video Hero",
"category": "Custom Sections"
}
]
}
{% endschema %}