← Back to Sections
Image Text Split
A versatile split-screen section that combines compelling visuals with engaging content to tell your brand's story.
Key Features:
- Flexible Media Support: Upload images or videos with full opacity controls and customizable positioning (left or right side)
- Rich Content Areas: Add optional icons, formatted headings, descriptive paragraphs, and up to two call-to-action buttons
- Lucide-Compatible Icons: Use inline SVG icons or upload custom icon images with full color customization
- Responsive Typography: All text elements scale beautifully with clamp() functions and mobile-specific scaling controls
- Advanced Styling Options: Choose between theme color schemes or apply custom colors, backgrounds, borders, and button styling
- Mobile-Optimized: Automatically stacks content vertically on tablets and mobile devices with customizable padding controls
- Video-First Design: Supports autoplay looping videos that take precedence over static images when both are uploaded
- Flexible Button System: Compatible with any Shopify theme's button classes plus custom styling options
Perfect for: Product features, about us sections, service explanations, brand storytelling, testimonials with photos, or any content that combines visual impact with detailed information.
{%- style -%}
.section-{{ section.id }} {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.top_border_color }};
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.bottom_border_color }};
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.section-{{ section.id }} .bc-split-section-right-inner-div {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.inner_box_background_color }};
{% endif %}
}
.section-{{ section.id }} .bc-heading * {
font-size: clamp({{ section.settings.heading_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.heading_size }}rem) !important;
line-height: {{ section.settings.heading_line_height }};
max-width: {{ section.settings.heading_max_width }}ch;
text-align: center;
margin: 0;
}
.section-{{ section.id }} .bc-paragraph * {
font-size: clamp({{ section.settings.paragraph_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.paragraph_size }}rem) !important;
line-height: {{ section.settings.paragraph_line_height }};
max-width: {{ section.settings.paragraph_max_width }}ch;
text-align: center;
margin: 0;
}
{% if section.settings.use_custom_button_style %}
.section-{{ section.id }} .bc-button {
padding: {{ section.settings.button_padding_vertical }}px {{ section.settings.button_padding_horizontal }}px;
border-radius: {{ section.settings.button_border_radius }}px;
border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }};
}
.section-{{ section.id }} .bc-button.bc-button-1 {
background-color: {{ section.settings.button_1_background_color }};
color: {{ section.settings.button_1_text_color }};
}
.section-{{ section.id }} .bc-button.bc-button-2 {
background-color: {{ section.settings.button_2_background_color }};
color: {{ section.settings.button_2_text_color }};
}
.section-{{ section.id }} .bc-button.bc-button-1:hover {
background-color: {{ section.settings.button_1_hover_background_color }};
color: {{ section.settings.button_1_hover_text_color }};
transition-duration: .2s;
transition-timing-function: ease-out;
}
.section-{{ section.id }} .bc-button.bc-button-2:hover {
background-color: {{ section.settings.button_2_hover_background_color }};
color: {{ section.settings.button_2_hover_text_color }};
transition-duration: .2s;
transition-timing-function: ease-out;
}
.section-{{ section.id }} a.bc-button {
text-decoration: none;
}
{% endif %}
.section-{{ section.id }} .bc-split-section {
height: {{ section.settings.section_height }}vh;
flex-direction: row;
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;
}
.section-{{ section.id }} .bc-split-section-left-div {
width: {{ section.settings.image_width }}%;
height: 100%;
padding: 20px 10px 20px 20px;
}
.section-{{ section.id }} .bc-split-section-right-div {
width: calc(100% - {{ section.settings.image_width }}%);
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 20px 20px 10px;
display: flex;
}
.section-{{ section.id }} .bc-split-section-buttons-div {
column-gap: 12px;
display: flex;
}
.section-{{ section.id }} .bc-split-section-image {
width: 100%;
height: 100%;
min-width: 1px;
object-fit: cover;
border-radius: {{ section.settings.boxes_border_radius }}px;
padding: 0;
opacity: {{ section.settings.main_image_opacity }}%;
}
.section-{{ section.id }} video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: {{ section.settings.boxes_border_radius }}px;
opacity: {{ section.settings.main_video_opacity }}%;
}
.section-{{ section.id }} .bc-icon {
width: {{ section.settings.icon_size }}px;
height: {{ section.settings.icon_size }}px;
border-radius: {{ section.settings.boxes_border_radius }}px;
color: {{ section.settings.icon_color }};
}
.section-{{ section.id }} .bc-icon svg {
width: 100%;
height: 100%;
display: block;
}
.section-{{ section.id }} .bc-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
opacity: {{ section.settings.icon_image_opacity }}%;
}
.section-{{ section.id }} .bc-split-section-right-inner-div {
width: 100%;
height: 100%;
grid-row-gap: {{ section.settings.elements_spacing }}px;
border-radius: {{ section.settings.boxes_border_radius }}px;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px;
display: flex;
}
.section-{{ section.id }} .bc-split-section-left-inner-div {
height: 100%;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-split-section-svg-div {
height: 100%;
position: absolute;
}
{% if section.settings.background_image != blank %}
.section-{{ section.id }} .bc-split-section-right-inner-div {
background-image: url({{ section.settings.background_image | img_url: 'original' }});
background-size: cover;
background-position-y: {{ section.settings.background_image_vertical_position }}%;
opacity: {{ section.settings.background_image_opacity }}%;
}
{% endif %}
@media screen and (max-width: 991px) {
.section-{{ section.id }} .bc-split-section {
height: auto;
flex-direction: column;
align-items: center;
}
.section-{{ section.id }} .bc-split-section-left-div {
width: 100%;
}
.section-{{ section.id }} .bc-split-section-right-div {
width: 100%;
padding-top: 10px;
padding-left: 20px;
}
.section-{{ section.id }} .bc-split-section-image {
max-height: 600px;
}
.section-{{ section.id }} .bc-split-section-right-inner-div {
grid-row-gap: calc({{ section.settings.elements_spacing }}px * .7);
padding-top: {{ section.settings.mobile_text_padding_top }}px;
padding-bottom: {{ section.settings.mobile_text_padding_bottom }}px;
}
.section-{{ section.id }} .bc-split-section-left-inner-div {
padding-bottom: 10px;
padding-right: 20px;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} .bc-split-section-right-inner-div {
padding-left: 40px;
padding-right: 40px;
}
.section-{{ section.id }} .bc-split-section-left-inner-div {
padding-right: 0px;
}
}
@media screen and (max-width: 479px) {
.section-{{ section.id }} .bc-split-section-right-inner-div {
padding-left: 20px;
padding-right: 20px;
}
}
{%- endstyle -%}
<div class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
<div class="bc-split-section">
<div class="bc-split-section-left-div">
{% if section.settings.image_position == 'left' %}
<div class="bc-split-section-left-inner-div">
{% if section.settings.main_video != blank %}
{{ section.settings.main_video | video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: "auto", class: "bc-split-section-video" }}
{% elsif section.settings.main_image != blank %}
<img
src="{{ section.settings.main_image | image_url: width: 1200 }}"
alt="{{ section.settings.main_image_alt | default: 'Section image' }}"
{% if section.settings.main_image_loading == 'lazy' %}loading="lazy"{% endif %}
class="bc-split-section-image"
>
{% endif %}
</div>
{% endif %}
{% if section.settings.image_position == 'right' %}
<div class="bc-split-section-right-inner-div">
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
{% if section.settings.icon_image != blank or section.settings.icon_svg != blank %}
<div class="bc-icon">
{% if section.settings.icon_image != blank %}
<img src="{{ section.settings.icon_image | img_url: 'original' }}" alt="{{ section.settings.icon_image_alt | default: 'Icon' }}" loading="lazy">
{% else %}
{{ section.settings.icon_svg }}
{% endif %}
</div>
{% endif %}
{% if section.settings.heading != blank %}
<div class="bc-heading">
{{ section.settings.heading }}
</div>
{% endif %}
{% if section.settings.paragraph != blank %}
<div class="bc-paragraph">
{{ section.settings.paragraph }}
</div>
{% endif %}
<div class="bc-split-section-buttons-div">
{% if section.settings.button_1_link != blank %}
<a href="{{ section.settings.button_1_link }}" class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button bc-button-1{% endif %}">{{ section.settings.button_1_text | default: 'Button 1' }}</a>
{% endif %}
{% if section.settings.button_2_link != blank %}
<a href="{{ section.settings.button_2_link }}" class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button bc-button-2{% endif %}">{{ section.settings.button_2_text | default: 'Button 2' }}</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="bc-split-section-right-div">
{% if section.settings.image_position == 'right' %}
<div class="bc-split-section-left-inner-div">
{% if section.settings.main_video != blank %}
{{ section.settings.main_video | video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: "auto", class: "bc-split-section-video" }}
{% elsif section.settings.main_image != blank %}
<img
src="{{ section.settings.main_image | image_url: width: 1200 }}"
alt="{{ section.settings.main_image_alt | default: 'Section image' }}"
{% if section.settings.main_image_loading == 'lazy' %}loading="lazy"{% endif %}
class="bc-split-section-image"
>
{% endif %}
</div>
{% endif %}
{% if section.settings.image_position == 'left' %}
<div class="bc-split-section-right-inner-div">
{% if section.settings.icon_image != blank or section.settings.icon_svg != blank %}
<div class="bc-icon">
{% if section.settings.icon_image != blank %}
<img src="{{ section.settings.icon_image | img_url: 'original' }}" alt="{{ section.settings.icon_image_alt | default: 'Icon' }}" loading="lazy">
{% else %}
{{ section.settings.icon_svg }}
{% endif %}
</div>
{% endif %}
{% if section.settings.heading != blank %}
<div class="bc-heading">
{{ section.settings.heading }}
</div>
{% endif %}
{% if section.settings.paragraph != blank %}
<div class="bc-paragraph">
{{ section.settings.paragraph }}
</div>
{% endif %}
<div class="bc-split-section-buttons-div">
{% if section.settings.button_1_link != blank %}
<a href="{{ section.settings.button_1_link }}" class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button bc-button-1{% endif %}">{{ section.settings.button_1_text | default: 'Button 1' }}</a>
{% endif %}
{% if section.settings.button_2_link != blank %}
<a href="{{ section.settings.button_2_link }}" class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button bc-button-2{% endif %}">{{ section.settings.button_2_text | default: 'Button 2' }}</a>
{% endif %}
</div>
</div>
{% endif %}
</div>
<div class="bc-split-section-svg-div"></div>
</div>
</div>
{% schema %}
{
"name": "BC Image Text Split",
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "use_custom_colors",
"label": "Use custom colors instead of a Dawn color scheme",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "inner_box_background_color",
"label": "Inner Box Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "top_border_color",
"label": "Top Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "bottom_border_color",
"label": "Bottom Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_1_background_color",
"label": "Button 1 Background Color",
"default": "#DFF799"
},
{
"type": "color",
"id": "button_1_text_color",
"label": "Button 1 Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_1_hover_background_color",
"label": "Button 1 Hover Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_1_hover_text_color",
"label": "Button 1 Hover Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_2_background_color",
"label": "Button 2 Background Color",
"default": "#DFF799"
},
{
"type": "color",
"id": "button_2_text_color",
"label": "Button 2 Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_2_hover_background_color",
"label": "Button 2 Hover Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_2_hover_text_color",
"label": "Button 2 Hover Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_border_color",
"label": "Button Border Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top",
"min": 0,
"max": 150,
"step": 5,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom",
"min": 0,
"max": 150,
"step": 5,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "top_border_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 30,
"step": 1,
"default": 0,
"unit": "px",
"info": "Set to 0 to hide border. If section above has a bottom border applied, do not use."
},
{
"type": "range",
"id": "bottom_border_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 30,
"step": 1,
"default": 0,
"unit": "px",
"info": "Set to 0 to hide border. If section below has a top border applied, do not use."
},
{
"type": "range",
"id": "section_height",
"label": "Section Height",
"min": 40,
"max": 100,
"step": 2,
"default": 90,
"unit": "vh"
},
{
"type": "range",
"id": "boxes_border_radius",
"label": "Boxes Border Radius",
"min": 0,
"max": 200,
"step": 2,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "elements_spacing",
"label": "Spacing Between Elements",
"min": 0,
"max": 80,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "mobile_text_padding_top",
"label": "Mobile Text Area Padding Top",
"min": 20,
"max": 200,
"step": 10,
"default": 100,
"unit": "px",
"info": "Controls the top padding of the text area on mobile devices (tablet and below)"
},
{
"type": "range",
"id": "mobile_text_padding_bottom",
"label": "Mobile Text Area Padding Bottom",
"min": 20,
"max": 200,
"step": 10,
"default": 100,
"unit": "px",
"info": "Controls the bottom padding of the text area on mobile devices (tablet and below)"
},
{
"type": "header",
"content": "Text"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<h2>Heading Here</h2>"
},
{
"type": "richtext",
"id": "paragraph",
"label": "Paragraph",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 5,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "paragraph_size",
"label": "Paragraph Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.4,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "heading_line_height",
"label": "Heading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.2
},
{
"type": "range",
"id": "paragraph_line_height",
"label": "Paragraph Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "heading_max_width",
"label": "Heading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 30,
"unit": "ch"
},
{
"type": "range",
"id": "paragraph_max_width",
"label": "Paragraph Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 40,
"unit": "ch"
},
{
"type": "range",
"id": "mobile_scale_ratio",
"label": "Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.8,
"unit": "×",
"info": "Controls how much ALL text shrinks on smaller screens"
},
{
"type": "header",
"content": "Media"
},
{
"type": "image_picker",
"id": "main_image",
"label": "Main Image"
},
{
"type": "video",
"id": "main_video",
"label": "Main Video",
"info": "Video takes precedence over image if both are uploaded"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Inner Box Background Image",
"info": "Recommended width 1000px"
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Icon Image (Optional)",
"info": "Upload an image to use as the icon. This takes precedence over SVG code if both are provided."
},
{
"type": "text",
"id": "main_image_alt",
"label": "Main Image Alt Text",
"placeholder": "e.g. Product showcase image"
},
{
"type": "text",
"id": "icon_image_alt",
"label": "Icon Image Alt Text",
"placeholder": "e.g. Shipping icon"
},
{
"type": "textarea",
"id": "icon_svg",
"label": "SVG Icon Code",
"info": "Paste the inline SVG code here. You can copy icons directly from https://lucide.dev/icons using the 'Copy SVG' button. Make sure the SVG uses 'stroke=\"currentColor\"' or 'fill=\"currentColor\"' so the color setting works."
},
{
"type": "select",
"id": "main_image_loading",
"label": "Main Image Loading",
"options": [
{
"value": "eager",
"label": "Eager (loads immediately)"
},
{
"value": "lazy",
"label": "Lazy (loads when visible)"
}
],
"default": "lazy",
"info": "Use eager for above-the-fold images, lazy for below-the-fold"
},
{
"type": "select",
"id": "image_position",
"label": "Image Position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
],
"default": "right"
},
{
"type": "range",
"id": "main_image_opacity",
"label": "Main Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "main_video_opacity",
"label": "Main Video Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "background_image_opacity",
"label": "Background Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "background_image_vertical_position",
"label": "Background Image Vertical Position",
"min": 0,
"max": 100,
"step": 1,
"default": 50,
"unit": "%"
},
{
"type": "range",
"id": "icon_size",
"label": "Icon Size",
"min": 20,
"max": 100,
"step": 2,
"default": 36,
"unit": "px"
},
{
"type": "range",
"id": "icon_image_opacity",
"label": "Icon Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "image_width",
"label": "Image Width",
"min": 30,
"max": 70,
"step": 5,
"default": 50,
"unit": "%"
},
{
"type": "header",
"content": "Buttons"
},
{
"type": "text",
"id": "button_1_text",
"label": "Button 1 Text",
"default": "Shop Now",
"placeholder": "Shop Now"
},
{
"type": "url",
"id": "button_1_link",
"label": "Button 1 Link"
},
{
"type": "text",
"id": "button_2_text",
"label": "Button 2 Text",
"default": "Shop Now",
"placeholder": "Shop Now"
},
{
"type": "url",
"id": "button_2_link",
"label": "Button 2 Link"
},
{
"type": "checkbox",
"id": "use_theme_button_class",
"label": "Use theme button styling",
"info": "Only enable this if your theme uses a different class than 'button' for its primary buttons."
},
{
"type": "text",
"id": "theme_button_class",
"label": "Theme button class",
"info": "Enter your theme's main button class (e.g. 'btn', 'primary-button') if it's not 'button'.",
"placeholder": "e.g. btn btn--primary"
},
{
"type": "checkbox",
"id": "use_custom_button_style",
"label": "Use custom button styling",
"info": "Enable this to apply custom styles (padding, colors, radius, etc.) to this section's buttons."
},
{
"type": "range",
"id": "button_padding_horizontal",
"label": "Button Padding - Horizontal",
"min": 0,
"max": 100,
"step": 1,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "button_padding_vertical",
"label": "Button Padding - Vertical",
"min": 0,
"max": 50,
"step": 1,
"default": 8,
"unit": "px"
},
{
"type": "range",
"id": "button_border_radius",
"label": "Button Border Radius",
"min": 0,
"max": 50,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "button_border_width",
"label": "Button Border Width",
"min": 0,
"max": 12,
"step": 1,
"default": 0,
"unit": "px",
"info": "Set to 0 to hide border."
}
],
"presets": [
{
"name": "BC Image Text Split"
}
]
}
{% endschema %}