← Back to Sections
Image Cards and Text
A flexible content section combining overlapping image cards with structured text content. Perfect for showcasing products, services, or brand messaging with an artistic visual presentation that draws attention to key information.
Key Features:
- Dual image layout with customizable positioning, rotation, and opacity controls
- Video support for both image positions with autoplay and background video options
- Rich text support for subheadings, main headlines, and descriptive content
- Responsive typography using clamp() for perfect scaling across all devices
- Flexible button styling with theme integration and custom color options
- Complete color scheme control with Dawn theme compatibility or custom branding
- Mobile-first responsive design with separate tablet and mobile layout controls
- Advanced spacing controls using CSS gap for consistent, professional layouts
Perfect for: Product features, service highlights, about sections, brand storytelling, featured content blocks, or any layout requiring visual interest with overlapping imagery and informative text.
{%- 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 %}
justify-content: center;
align-items: center;
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
padding-left: {{ section.settings.padding_horizontal }}px;
padding-right: {{ section.settings.padding_horizontal }}px;
border-top: {{ section.settings.border_top_thickness }}px solid {{ section.settings.border_top_color }};
border-bottom: {{ section.settings.border_bottom_thickness }}px solid {{ section.settings.border_bottom_color }};
display: flex;
overflow: hidden;
gap: {{ section.settings.content_gap }}px;
position: relative;
}
{% if section.settings.background_image != blank %}
.section-{{ section.id }}::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('{{ section.settings.background_image | img_url: '1920x' }}');
background-size: cover;
background-position: center;
opacity: {{ section.settings.background_image_opacity }}%;
z-index: 1;
}
{% endif %}
{% if section.settings.background_video != blank %}
.section-{{ section.id }} video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: {{ section.settings.background_video_opacity }}%;
z-index: 1;
}
{% endif %}
.section-{{ section.id }} .bc-content-wrapper {
position: relative;
z-index: 2;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: {{ section.settings.content_gap }}px;
}
.section-{{ section.id }} .bc-text-content {
max-width: {{ section.settings.text_max_width }}ch;
display: flex;
flex-direction: column;
gap: {{ section.settings.text_content_gap }}px;
}
.section-{{ section.id }} .bc-text-content a {
align-self: center;
}
@media screen and (min-width: 992px) {
.section-{{ section.id }} .bc-text-content a {
align-self: flex-start;
}
}
.section-{{ section.id }} .bc-image-container {
width: {{ section.settings.image_container_width }}px;
height: {{ section.settings.image_container_height }}px;
position: relative;
}
.section-{{ section.id }} h1,
.section-{{ section.id }} h2,
.section-{{ section.id }} h3,
.section-{{ section.id }} h4,
.section-{{ section.id }} h5,
.section-{{ section.id }} h6,
.section-{{ section.id }} p {
margin: 0 !important;
margin-block: 0 !important;
margin-inline: 0 !important;
}
.section-{{ section.id }} .bc-subheading *,
.section-{{ section.id }} .bc-subheading {
font-size: clamp({{ section.settings.subheading_size | times: section.settings.subheading_mobile_scale_ratio }}rem, 4vw, {{ section.settings.subheading_size }}rem) !important;
line-height: {{ section.settings.subheading_line_height }};
max-width: {{ section.settings.subheading_max_width }}ch;
margin-bottom: {{ section.settings.subheading_margin }}px !important;
}
.section-{{ section.id }} .bc-heading *,
.section-{{ section.id }} .bc-heading {
font-size: clamp({{ section.settings.heading_size | times: section.settings.heading_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;
margin-bottom: {{ section.settings.heading_margin }}px !important;
}
.section-{{ section.id }} .bc-text *,
.section-{{ section.id }} .bc-text {
font-size: clamp({{ section.settings.text_size | times: section.settings.text_mobile_scale_ratio }}rem, 4vw, {{ section.settings.text_size }}rem) !important;
line-height: {{ section.settings.text_line_height }};
max-width: {{ section.settings.text_max_width }}ch;
margin-bottom: {{ section.settings.button_top_margin }}px !important;
}
.section-{{ section.id }} .bc-image-1 {
aspect-ratio: auto;
object-fit: cover;
border-radius: {{ section.settings.image_border_radius }}px;
width: {{ section.settings.image_1_width }}px;
height: {{ section.settings.image_1_height }}px;
position: absolute;
right: {{ section.settings.image_1_position_right }}%;
transform: rotate({{ section.settings.image_1_rotation }}deg);
opacity: {{ section.settings.image_1_opacity }}%;
}
.section-{{ section.id }} .bc-image-2 {
z-index: 2;
object-fit: cover;
border-radius: {{ section.settings.image_border_radius }}px;
width: {{ section.settings.image_2_width }}px;
height: {{ section.settings.image_2_height }}px;
position: absolute;
top: 50%;
left: {{ section.settings.image_2_position_left }}%;
transform: rotate({{ section.settings.image_2_rotation }}deg) translate(0, -50%);
opacity: {{ section.settings.image_2_opacity }}%;
}
{% if section.settings.video_1 != blank %}
.section-{{ section.id }} .bc-video-1 {
aspect-ratio: auto;
object-fit: cover;
border-radius: {{ section.settings.image_border_radius }}px;
width: {{ section.settings.image_1_width }}px;
height: {{ section.settings.image_1_height }}px;
position: absolute;
right: {{ section.settings.image_1_position_right }}%;
transform: rotate({{ section.settings.image_1_rotation }}deg);
opacity: {{ section.settings.video_1_opacity }}%;
}
{% endif %}
{% if section.settings.video_2 != blank %}
.section-{{ section.id }} .bc-video-2 {
z-index: 2;
object-fit: cover;
border-radius: {{ section.settings.image_border_radius }}px;
width: {{ section.settings.image_2_width }}px;
height: {{ section.settings.image_2_height }}px;
position: absolute;
top: 50%;
left: {{ section.settings.image_2_position_left }}%;
transform: rotate({{ section.settings.image_2_rotation }}deg) translate(0, -50%);
opacity: {{ section.settings.video_2_opacity }}%;
}
{% endif %}
{% if section.settings.use_custom_button_style %}
.section-{{ section.id }} .bc-button {
display: inline-block;
padding: {{ section.settings.button_padding_vertical }}px {{ section.settings.button_padding_horizontal }}px;
background-color: {{ section.settings.button_background_color }};
color: {{ section.settings.button_text_color }};
text-decoration: none;
border-radius: {{ section.settings.button_border_radius }}px;
border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }};
transition: all 0.3s ease;
}
.section-{{ section.id }} .bc-button:hover {
background-color: {{ section.settings.button_hover_background_color }};
color: {{ section.settings.button_hover_text_color }};
border-color: {{ section.settings.button_hover_border_color }};
}
{% endif %}
@media screen and (max-width: 991px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.padding_horizontal_tablet }}px;
padding-right: {{ section.settings.padding_horizontal_tablet }}px;
gap: {{ section.settings.content_gap_tablet }}px;
}
.section-{{ section.id }} .bc-content-wrapper {
flex-direction: {{ section.settings.layout_tablet }};
gap: {{ section.settings.content_gap_tablet }}px;
}
.section-{{ section.id }} .bc-text-content {
text-align: {{ section.settings.text_align_tablet }};
align-items: {{ section.settings.content_align_tablet }};
gap: {{ section.settings.text_content_gap_tablet }}px;
}
.section-{{ section.id }} .bc-image-1 {
width: {{ section.settings.image_1_width_tablet }}px;
height: {{ section.settings.image_1_height_tablet }}px;
}
.section-{{ section.id }} .bc-image-2 {
width: {{ section.settings.image_2_width_tablet }}px;
height: {{ section.settings.image_2_height_tablet }}px;
left: {{ section.settings.image_2_position_left_tablet }}%;
}
{% if section.settings.video_1 != blank %}
.section-{{ section.id }} .bc-video-1 {
width: {{ section.settings.image_1_width_tablet }}px;
height: {{ section.settings.image_1_height_tablet }}px;
}
{% endif %}
{% if section.settings.video_2 != blank %}
.section-{{ section.id }} .bc-video-2 {
width: {{ section.settings.image_2_width_tablet }}px;
height: {{ section.settings.image_2_height_tablet }}px;
left: {{ section.settings.image_2_position_left_tablet }}%;
}
{% endif %}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
flex-direction: column;
padding-top: {{ section.settings.padding_top_mobile }}px;
padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
padding-left: {{ section.settings.padding_horizontal_mobile }}px;
padding-right: {{ section.settings.padding_horizontal_mobile }}px;
gap: {{ section.settings.content_gap_mobile }}px;
}
.section-{{ section.id }} .bc-content-wrapper {
flex-direction: column;
gap: {{ section.settings.content_gap_mobile }}px;
}
.section-{{ section.id }} .bc-text-content {
text-align: {{ section.settings.text_align_mobile }};
align-items: {{ section.settings.content_align_mobile }};
gap: {{ section.settings.text_content_gap_mobile }}px;
}
.section-{{ section.id }} .bc-text-content a {
align-self: center;
}
.section-{{ section.id }} .bc-image-1 {
width: {{ section.settings.image_1_width_mobile }}px;
height: {{ section.settings.image_1_height_mobile }}px;
}
.section-{{ section.id }} .bc-image-2 {
width: {{ section.settings.image_2_width_mobile }}px;
height: {{ section.settings.image_2_height_mobile }}px;
left: {{ section.settings.image_2_position_left_mobile }}%;
}
{% if section.settings.video_1 != blank %}
.section-{{ section.id }} .bc-video-1 {
width: {{ section.settings.image_1_width_mobile }}px;
height: {{ section.settings.image_1_height_mobile }}px;
}
{% endif %}
{% if section.settings.video_2 != blank %}
.section-{{ section.id }} .bc-video-2 {
width: {{ section.settings.image_2_width_mobile }}px;
height: {{ section.settings.image_2_height_mobile }}px;
left: {{ section.settings.image_2_position_left_mobile }}%;
}
{% endif %}
{% if section.settings.use_custom_button_style %}
.section-{{ section.id }} .bc-button {
padding: {{ section.settings.button_padding_vertical_mobile }}px {{ section.settings.button_padding_horizontal_mobile }}px;
}
{% endif %}
}
{%- endstyle -%}
<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
{% 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.background_video != blank %}
{{
section.settings.background_video
| video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: 'auto'
}}
{% endif %}
<div class="bc-content-wrapper">
{% if section.settings.layout == 'image-text' %}
<div class="bc-image-container">
{% if section.settings.video_1 != blank %}
{{
section.settings.video_1
| video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: 'auto', class: 'bc-video-1'
}}
{% elsif section.settings.image_1 != blank %}
<img
src="{{ section.settings.image_1 | img_url: '800x' }}"
loading="{{ section.settings.image_loading }}"
alt="{{ section.settings.alt_text_1 | default: 'Product image' }}"
class="bc-image-1"
>
{% endif %}
{% if section.settings.video_2 != blank %}
{{
section.settings.video_2
| video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: 'auto', class: 'bc-video-2'
}}
{% elsif section.settings.image_2 != blank %}
<img
src="{{ section.settings.image_2 | img_url: '800x' }}"
loading="{{ section.settings.image_loading }}"
alt="{{ section.settings.alt_text_2 | default: 'Product image' }}"
class="bc-image-2"
>
{% endif %}
</div>
<div class="bc-text-content">
{% if section.settings.subheading_text != blank %}
<div class="bc-subheading">{{ section.settings.subheading_text }}</div>
{% endif %}
{% if section.settings.heading_text != blank %}
<div class="bc-heading">{{ section.settings.heading_text }}</div>
{% endif %}
{% if section.settings.main_text != blank %}
<div class="bc-text">{{ section.settings.main_text }}</div>
{% endif %}
{% if section.settings.button_text != blank %}
<a
href="{{ section.settings.button_link | default: '#' }}"
class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button{% endif %}"
>
{{- section.settings.button_text -}}
</a>
{% endif %}
</div>
{% else %}
<div class="bc-text-content">
{% if section.settings.subheading_text != blank %}
<div class="bc-subheading">{{ section.settings.subheading_text }}</div>
{% endif %}
{% if section.settings.heading_text != blank %}
<div class="bc-heading">{{ section.settings.heading_text }}</div>
{% endif %}
{% if section.settings.main_text != blank %}
<div class="bc-text">{{ section.settings.main_text }}</div>
{% endif %}
{% if section.settings.button_text != blank %}
<a
href="{{ section.settings.button_link | default: '#' }}"
class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button{% endif %}"
>
{{- section.settings.button_text -}}
</a>
{% endif %}
</div>
<div class="bc-image-container">
{% if section.settings.video_1 != blank %}
{{
section.settings.video_1
| video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: 'auto', class: 'bc-video-1'
}}
{% elsif section.settings.image_1 != blank %}
<img
src="{{ section.settings.image_1 | img_url: '800x' }}"
loading="{{ section.settings.image_loading }}"
alt="{{ section.settings.alt_text_1 | default: 'Product image' }}"
class="bc-image-1"
>
{% endif %}
{% if section.settings.video_2 != blank %}
{{
section.settings.video_2
| video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: 'auto', class: 'bc-video-2'
}}
{% elsif section.settings.image_2 != blank %}
<img
src="{{ section.settings.image_2 | img_url: '800x' }}"
loading="{{ section.settings.image_loading }}"
alt="{{ section.settings.alt_text_2 | default: 'Product image' }}"
class="bc-image-2"
>
{% endif %}
</div>
{% endif %}
</div>
</section>
{% schema %}
{
"name": "BC Image Cards and Text",
"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": "border_top_color",
"label": "Top Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "border_bottom_color",
"label": "Bottom Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_background_color",
"label": "Button Background Color",
"default": "#333333"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_border_color",
"label": "Button Border Color",
"default": "#333333"
},
{
"type": "color",
"id": "button_hover_background_color",
"label": "Button Hover Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_hover_text_color",
"label": "Button Hover Text Color",
"default": "#333333"
},
{
"type": "color",
"id": "button_hover_border_color",
"label": "Button Hover Border Color",
"default": "#333333"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "padding_top",
"label": "Top Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 30,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 30,
"unit": "px"
},
{
"type": "range",
"id": "padding_horizontal",
"label": "Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "padding_horizontal_tablet",
"label": "Horizontal Padding (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "padding_top_mobile",
"label": "Top Padding (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom_mobile",
"label": "Bottom Padding (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "range",
"id": "padding_horizontal_mobile",
"label": "Horizontal Padding (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"default": 10,
"unit": "px"
},
{
"type": "range",
"id": "border_top_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "border_bottom_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "content_gap",
"label": "Content Gap",
"min": 0,
"max": 200,
"step": 10,
"default": 100,
"unit": "px"
},
{
"type": "range",
"id": "content_gap_tablet",
"label": "Content Gap (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "content_gap_mobile",
"label": "Content Gap (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "select",
"id": "layout",
"label": "Desktop Layout",
"options": [
{
"value": "image-text",
"label": "Image Left, Text Right"
},
{
"value": "text-image",
"label": "Text Left, Image Right"
}
],
"default": "image-text"
},
{
"type": "select",
"id": "layout_tablet",
"label": "Tablet Layout",
"options": [
{
"value": "column",
"label": "Vertical (Image above Text)"
},
{
"value": "column-reverse",
"label": "Vertical (Text above Image)"
},
{
"value": "row",
"label": "Horizontal"
}
],
"default": "column"
},
{
"type": "select",
"id": "text_align_tablet",
"label": "Text Alignment (Tablet)",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "content_align_tablet",
"label": "Content Alignment (Tablet)",
"options": [
{
"value": "flex-start",
"label": "Start"
},
{
"value": "center",
"label": "Center"
},
{
"value": "flex-end",
"label": "End"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_align_mobile",
"label": "Text Alignment (Mobile)",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "content_align_mobile",
"label": "Content Alignment (Mobile)",
"options": [
{
"value": "flex-start",
"label": "Start"
},
{
"value": "center",
"label": "Center"
},
{
"value": "flex-end",
"label": "End"
}
],
"default": "center"
},
{
"type": "header",
"content": "Text Section"
},
{
"type": "richtext",
"id": "subheading_text",
"label": "Subheading Text",
"default": "<p>Your subheading goes here</p>"
},
{
"type": "richtext",
"id": "heading_text",
"label": "Heading Text",
"default": "<h2>Your Heading Goes Here</h2>"
},
{
"type": "richtext",
"id": "main_text",
"label": "Main Text",
"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": "subheading_size",
"label": "Subheading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.0,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 5.0,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "text_size",
"label": "Text 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": "subheading_line_height",
"label": "Subheading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "heading_line_height",
"label": "Heading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.2
},
{
"type": "range",
"id": "text_line_height",
"label": "Text Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.5
},
{
"type": "range",
"id": "subheading_max_width",
"label": "Subheading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "heading_max_width",
"label": "Heading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "text_max_width",
"label": "Text Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "subheading_mobile_scale_ratio",
"label": "Subheading Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.9,
"unit": "×",
"info": "Controls how much subheading shrinks on smaller screens"
},
{
"type": "range",
"id": "heading_mobile_scale_ratio",
"label": "Heading Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.7,
"unit": "×",
"info": "Controls how much heading shrinks on smaller screens"
},
{
"type": "range",
"id": "text_mobile_scale_ratio",
"label": "Text Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 1.0,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "range",
"id": "text_content_gap",
"label": "Text Content Gap",
"min": 0,
"max": 50,
"step": 5,
"default": 30,
"unit": "px",
"info": "Space between text elements (subheading, heading, paragraph, button)"
},
{
"type": "range",
"id": "text_content_gap_tablet",
"label": "Text Content Gap (Tablet)",
"min": 0,
"max": 50,
"step": 5,
"default": 30,
"unit": "px"
},
{
"type": "range",
"id": "text_content_gap_mobile",
"label": "Text Content Gap (Mobile)",
"min": 0,
"max": 50,
"step": 5,
"default": 30,
"unit": "px"
},
{
"type": "header",
"content": "Media Section"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image"
},
{
"type": "video",
"id": "background_video",
"label": "Background Video"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "video",
"id": "video_1",
"label": "Video 1"
},
{
"type": "text",
"id": "alt_text_1",
"label": "Alt Text for Image 1",
"default": "Product image"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
},
{
"type": "video",
"id": "video_2",
"label": "Video 2"
},
{
"type": "text",
"id": "alt_text_2",
"label": "Alt Text for Image 2",
"default": "Product image"
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{
"value": "lazy",
"label": "Lazy"
},
{
"value": "eager",
"label": "Eager"
}
],
"default": "lazy",
"info": "Lazy loading improves page speed, eager loading loads images immediately"
},
{
"type": "range",
"id": "background_image_opacity",
"label": "Background Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"default": 50,
"unit": "%"
},
{
"type": "range",
"id": "background_video_opacity",
"label": "Background Video Opacity",
"min": 10,
"max": 100,
"step": 5,
"default": 50,
"unit": "%"
},
{
"type": "range",
"id": "image_1_opacity",
"label": "Image 1 Opacity",
"min": 10,
"max": 100,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "range",
"id": "image_2_opacity",
"label": "Image 2 Opacity",
"min": 10,
"max": 100,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "range",
"id": "video_1_opacity",
"label": "Video 1 Opacity",
"min": 10,
"max": 100,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "range",
"id": "video_2_opacity",
"label": "Video 2 Opacity",
"min": 10,
"max": 100,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "range",
"id": "image_container_width",
"label": "Image Container Width",
"min": 200,
"max": 500,
"step": 10,
"default": 300,
"unit": "px"
},
{
"type": "range",
"id": "image_container_height",
"label": "Image Container Height",
"min": 200,
"max": 500,
"step": 10,
"default": 300,
"unit": "px"
},
{
"type": "range",
"id": "image_border_radius",
"label": "Image Border Radius",
"min": 0,
"max": 20,
"step": 1,
"default": 4,
"unit": "px"
},
{
"type": "range",
"id": "image_1_width",
"label": "Image 1 Width",
"min": 100,
"max": 400,
"step": 10,
"default": 200,
"unit": "px"
},
{
"type": "range",
"id": "image_1_height",
"label": "Image 1 Height",
"min": 100,
"max": 500,
"step": 10,
"default": 300,
"unit": "px"
},
{
"type": "range",
"id": "image_1_position_right",
"label": "Image 1 Position Right",
"min": -50,
"max": 50,
"step": 1,
"default": -10,
"unit": "%"
},
{
"type": "range",
"id": "image_1_rotation",
"label": "Image 1 Rotation",
"min": -10,
"max": 10,
"step": 1,
"default": 2,
"unit": "deg"
},
{
"type": "range",
"id": "image_2_width",
"label": "Image 2 Width",
"min": 100,
"max": 400,
"step": 10,
"default": 200,
"unit": "px"
},
{
"type": "range",
"id": "image_2_height",
"label": "Image 2 Height",
"min": 100,
"max": 400,
"step": 10,
"default": 200,
"unit": "px"
},
{
"type": "range",
"id": "image_2_position_left",
"label": "Image 2 Position Left",
"min": -50,
"max": 50,
"step": 1,
"default": -10,
"unit": "%"
},
{
"type": "range",
"id": "image_2_rotation",
"label": "Image 2 Rotation",
"min": -10,
"max": 10,
"step": 1,
"default": -4,
"unit": "deg"
},
{
"type": "range",
"id": "image_1_width_tablet",
"label": "Image 1 Width (Tablet)",
"min": 100,
"max": 300,
"step": 10,
"default": 180,
"unit": "px"
},
{
"type": "range",
"id": "image_1_height_tablet",
"label": "Image 1 Height (Tablet)",
"min": 100,
"max": 400,
"step": 10,
"default": 280,
"unit": "px"
},
{
"type": "range",
"id": "image_2_width_tablet",
"label": "Image 2 Width (Tablet)",
"min": 100,
"max": 300,
"step": 10,
"default": 180,
"unit": "px"
},
{
"type": "range",
"id": "image_2_height_tablet",
"label": "Image 2 Height (Tablet)",
"min": 100,
"max": 300,
"step": 10,
"default": 180,
"unit": "px"
},
{
"type": "range",
"id": "image_2_position_left_tablet",
"label": "Image 2 Position Left (Tablet)",
"min": -50,
"max": 50,
"step": 1,
"default": 10,
"unit": "%"
},
{
"type": "range",
"id": "image_1_width_mobile",
"label": "Image 1 Width (Mobile)",
"min": 100,
"max": 300,
"step": 10,
"default": 200,
"unit": "px"
},
{
"type": "range",
"id": "image_1_height_mobile",
"label": "Image 1 Height (Mobile)",
"min": 100,
"max": 400,
"step": 10,
"default": 300,
"unit": "px"
},
{
"type": "range",
"id": "image_2_width_mobile",
"label": "Image 2 Width (Mobile)",
"min": 100,
"max": 300,
"step": 10,
"default": 200,
"unit": "px"
},
{
"type": "range",
"id": "image_2_height_mobile",
"label": "Image 2 Height (Mobile)",
"min": 100,
"max": 300,
"step": 10,
"default": 200,
"unit": "px"
},
{
"type": "range",
"id": "image_2_position_left_mobile",
"label": "Image 2 Position Left (Mobile)",
"min": -50,
"max": 50,
"step": 1,
"default": -10,
"unit": "%"
},
{
"type": "header",
"content": "Buttons"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"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": "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": "range",
"id": "button_padding_vertical",
"label": "Button Vertical Padding",
"min": 5,
"max": 30,
"step": 1,
"default": 10,
"unit": "px"
},
{
"type": "range",
"id": "button_padding_horizontal",
"label": "Button Horizontal Padding",
"min": 10,
"max": 50,
"step": 1,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "button_border_radius",
"label": "Button Border Radius",
"min": 0,
"max": 50,
"step": 1,
"default": 4,
"unit": "px"
},
{
"type": "range",
"id": "button_border_width",
"label": "Button Border Width",
"min": 0,
"max": 5,
"step": 1,
"default": 1,
"unit": "px"
},
{
"type": "range",
"id": "button_padding_vertical_mobile",
"label": "Button Vertical Padding (Mobile)",
"min": 5,
"max": 20,
"step": 1,
"default": 8,
"unit": "px"
},
{
"type": "range",
"id": "button_padding_horizontal_mobile",
"label": "Button Horizontal Padding (Mobile)",
"min": 10,
"max": 40,
"step": 1,
"default": 16,
"unit": "px"
}
],
"presets": [
{
"name": "BC Image Cards and Text",
"settings": {
"subheading_text": "<p>Your subheading goes here</p>",
"heading_text": "<h2>Your Heading Goes Here</h2>",
"main_text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
}
}
]
}
{% endschema %}
