Hello
I’m trying to add a video with text and button overlay However the video section doesn’t offer such add-ons.
Is there a CSS code I can add or should I be using a different section type all together?
Thanks!
You will need to add a bit of theme customisations on the video section to let you include button and text
Hey Adrian.Nathalia. Unfortunately the banner section won’t allow for a video , it only allows for images.
How can I add liquid code to obtain such result
Hey yousseffhe5
can you give me a code to just copy and paste into the section? no coding background here 
@Adrian.Nathalia how do I replace the image markup with a video tag?
What theme are you using?
Theme I’m using is Rise
So you can go to image-banner.liquid file from the code editor and paste all this code. Please make sure to do any changes in the duplicate theme. You get a good setting, just need to work on the video a bit.
{{ ‘section-image-banner.css’ | asset_url | stylesheet_tag }}
{%- if section.settings.image_height == ‘adapt’ and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
{%- liquid
assign full_width = ‘100vw’
assign widths = ‘375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840’
if section.settings.image_behavior == ‘ambient’
assign half_width = '60vw'
assign full_width = '120vw'
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
elsif section.settings.image_behavior == ‘fixed’ or section.settings.image_behavior == ‘zoom-in’
assign half_width = '100vw'
assign stacked_sizes = '100vw'
else
assign half_width = '50vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
endif
assign fetch_priority = ‘auto’
if section.index == 1
assign fetch_priority = 'high'
endif
-%}
<divid=“Banner-{{ section.id }}”
class=“banner banner–content-align-{{ section.settings.desktop_content_alignment }} banner–content-align-mobile-{{ section.settings.mobile_content_alignment }} banner–{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner–stacked{% endif %}{% if section.settings.image_height == ‘adapt’ and section.settings.image != blank %} banner–adapt{% endif %}{% if section.settings.show_text_below %} banner–mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner–desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate–fade-in{% endif %}”
>
{%- if section.settings.image != blank or section.settings.banner_video != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{% if section.settings.choose_media == 'video' and section.settings.banner_video != blank %}
{{
section.settings.banner_video
| video_tag:
autoplay: true,
loop: true,
muted: true,
controls: false,
playsinline: true,
width: 100,
height: 100
}}
{% endif %}
{%- liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = 'banner__media-image-half'
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image
| image_url: width: 3840
| image_tag:
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = 'banner__media-image-half'
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image_2
| image_url: width: 3840
| image_tag:
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority
}}
</div>
{%- endif -%}
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2
class="banner__heading inline-richtext {{ block.settings.heading_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.heading }}
</h2>
{%- when 'text' -%}
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
</div>
{%- when 'buttons' -%}
<div
class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
{{ block.shopify_attributes }}
>
{%- if block.settings.button_label_1 != blank -%}
<a
{% if block.settings.button_link_1 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_1 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_2 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
{% schema %}
{
“name”: “t:sections.image-banner.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
"groups": \["header", "footer"\]
},
“settings”: [
{
"type": "select",
"id": "choose_media",
"label": "Choose to Show Image or Video",
"options": \[
{
"value": "image",
"label": "Image"
},
{
"value": "video",
"label": "Video"
},
\],
"default": "video",
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label",
"visible_if": "{{ section.settings.choose_media == 'image' }}"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label",
"visible_if": "{{ section.settings.choose_media == 'image' }}"
},
{
"type": "video",
"id": "banner_video",
"label": "Add Video",
"visible_if": "{{ section.settings.choose_media == 'video' }}"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": \[
{
"value": "adapt",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__4.label"
}
\],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label"
},
{
"type": "select",
"id": "image_behavior",
"options": \[
{
"value": "none",
"label": "t:sections.all.animation.image_behavior.options__1.label"
},
{
"value": "ambient",
"label": "t:sections.all.animation.image_behavior.options__2.label"
},
{
"value": "fixed",
"label": "t:sections.all.animation.image_behavior.options__3.label"
},
{
"value": "zoom-in",
"label": "t:sections.all.animation.image_behavior.options__4.label"
}
\],
"default": "none",
"label": "t:sections.all.animation.image_behavior.label"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.content.content"
},
{
"type": "select",
"id": "desktop_content_position",
"options": \[
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
\],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": \[
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
\],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.mobile.content"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": \[
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
\],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
“blocks”: [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": \[
{
"type": "inline_richtext",
"id": "heading",
"default": "t:sections.image-banner.blocks.heading.settings.heading.default",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": \[
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
\],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
\]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": \[
{
"type": "inline_richtext",
"id": "text",
"default": "t:sections.image-banner.blocks.text.settings.text.default",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": \[
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
\],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
\]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": \[
{
"type": "header",
"content": "t:sections.image-banner.blocks.buttons.settings.header_1.content"
},
{
"type": "text",
"id": "button_label_1",
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "header",
"content": "t:sections.image-banner.blocks.buttons.settings.header_2.content"
},
{
"type": "text",
"id": "button_label_2",
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
\]
}
],
“presets”: [
{
"name": "t:sections.image-banner.presets.name",
"blocks": \[
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
\]
}
]
}
{% endschema %}
Here’s the updated code
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
{%- liquid
assign full_width = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
if section.settings.image_behavior == 'ambient'
assign half_width = '60vw'
assign full_width = '120vw'
assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
assign half_width = '100vw'
assign stacked_sizes = '100vw'
else
assign half_width = '50vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
endif
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
-%}
<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>
{%- if section.settings.image != blank or section.settings.banner_video != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{% if section.settings.choose_media == 'video' and section.settings.banner_video != blank %}
{{
section.settings.banner_video
| video_tag:
autoplay: true,
loop: true,
muted: true,
controls: false,
playsinline: true,
width: 100,
height: 100,
style: "object-fit: cover;"
}}
{% endif %}
{%- liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = 'banner__media-image-half'
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image
| image_url: width: 3840
| image_tag:
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = 'banner__media-image-half'
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image_2
| image_url: width: 3840
| image_tag:
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2
class="banner__heading inline-richtext {{ block.settings.heading_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.heading }}
</h2>
{%- when 'text' -%}
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
</div>
{%- when 'buttons' -%}
<div
class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
{{ block.shopify_attributes }}
>
{%- if block.settings.button_label_1 != blank -%}
<a
{% if block.settings.button_link_1 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_1 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_2 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "choose_media",
"label": "Choose to Show Image or Video",
"options": [
{
"value": "image",
"label": "Image"
},
{
"value": "video",
"label": "Video"
},
],
"default": "video",
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label",
"visible_if": "{{ section.settings.choose_media == 'image' }}"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label",
"visible_if": "{{ section.settings.choose_media == 'image' }}"
},
{
"type": "video",
"id": "banner_video",
"label": "Add Video",
"visible_if": "{{ section.settings.choose_media == 'video' }}"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label"
},
{
"type": "select",
"id": "image_behavior",
"options": [
{
"value": "none",
"label": "t:sections.all.animation.image_behavior.options__1.label"
},
{
"value": "ambient",
"label": "t:sections.all.animation.image_behavior.options__2.label"
},
{
"value": "fixed",
"label": "t:sections.all.animation.image_behavior.options__3.label"
},
{
"value": "zoom-in",
"label": "t:sections.all.animation.image_behavior.options__4.label"
}
],
"default": "none",
"label": "t:sections.all.animation.image_behavior.label"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.content.content"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.mobile.content"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "t:sections.image-banner.blocks.heading.settings.heading.default",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "text",
"default": "t:sections.image-banner.blocks.text.settings.text.default",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "header",
"content": "t:sections.image-banner.blocks.buttons.settings.header_1.content"
},
{
"type": "text",
"id": "button_label_1",
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "header",
"content": "t:sections.image-banner.blocks.buttons.settings.header_2.content"
},
{
"type": "text",
"id": "button_label_2",
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
Hey @Shadab_dev were should I add this code? I tried opening the code editor and searching for the file name you mentioned (image-banner.liquid) but no results were found.
Can you give me the steps to reaching the place where I should be adding the code you shared above?
Also, how do I embed the video, text, button label and link?
I’m not a developer so I’m not familiar with these things
@Shadab_dev yeah found it now, it didn’t come up with the search I looked it up manually
Okay so I replaced the original code with what you shared and saved, then went back to the theme editor but nothing changed. What should happen? Should I be embedding the video, text and all in the code?
Add an image banner section like this from the customizer
Click on the image banner to open it, you will see a setting to choose media. Just note that when you are showing video the image blocks are empty so no image is selected.
You can add the heading text and blocks inside the section itself with add block.
thank you @Shadab_dev it worked!
Glad it did. Wish you luck on your store and your business.
Best