← Back to Sections
Arc Hero
A striking hero section featuring elegant curved image layouts and professional typography controls. Perfect for creating impactful landing pages with visual flair.
Key Features:
- Two strategically positioned images with distinctive curved borders and video support
- Rich text controls for captions and headings with responsive font sizing
- Professional button styling with customizable colors, padding, and hover effects
- Theme color scheme integration with optional custom color overrides
- Image and video opacity controls for perfect visual balance
- Mobile-optimized design that stacks content vertically on smaller screens
- Background image support with positioning controls
Perfect for: Landing pages, product showcases, brand introductions, call-to-action sections, or any hero content that needs to make a strong visual impact.
{%- 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 %}
{% if section.settings.background_image != blank %}
background-image: url({{ section.settings.background_image | img_url: 'original' }});
background-size: cover;
background-position-y: {{ section.settings.background_image_vertical_position }}%;
{% 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;
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding-bottom: 0px !important;
}
}
.section-{{ section.id }} .bc-hero-container {
position: relative;
display: flex;
overflow: hidden;
min-height: 750px;
padding-left: 80px;
padding-right: 80px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-{{ section.id }} .bc-hero-content {
position: absolute;
left: 10%;
z-index: 2;
}
.section-{{ section.id }} .bc-caption * {
font-size: clamp({{ section.settings.caption_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.caption_size }}rem) !important;
line-height: {{ section.settings.caption_line_height }};
margin-bottom: 1rem;
max-width: {{ section.settings.caption_max_width }}ch;
color: inherit;
}
.section-{{ section.id }} .bc-heading * {
text-align: left;
line-height: {{ section.settings.heading_line_height }};
margin-top: 30px;
max-width: {{ section.settings.heading_max_width }}ch;
font-size: clamp({{ section.settings.heading_size | times: section.settings.mobile_scale_ratio }}rem, 5vw, {{ section.settings.heading_size }}rem) !important;
color: inherit;
}
.section-{{ section.id }} .bc-image-1 {
position: absolute;
top: 50%;
right: 40%;
z-index: 0;
width: 610px;
height: 640px;
border-top-left-radius: 100%;
border-top-right-radius: 101%;
transform: translate(50%, -50%);
object-fit: cover;
opacity: {{ section.settings.image_1_opacity }}%;
}
.section-{{ section.id }} .bc-image-2 {
position: absolute;
top: 35%;
right: 10%;
z-index: 1;
width: 335px;
height: 370px;
object-fit: cover;
opacity: {{ section.settings.image_2_opacity }}%;
}
{% if section.settings.video_1 != blank %}
.section-{{ section.id }} .bc-video-1 {
position: absolute;
top: 50%;
right: 40%;
z-index: 0;
width: 610px;
height: 640px;
border-top-left-radius: 100%;
border-top-right-radius: 101%;
transform: translate(50%, -50%);
object-fit: cover;
opacity: {{ section.settings.video_1_opacity }}%;
}
{% endif %}
{% if section.settings.video_2 != blank %}
.section-{{ section.id }} .bc-video-2 {
position: absolute;
top: 35%;
right: 10%;
z-index: 1;
width: 335px;
height: 370px;
object-fit: cover;
opacity: {{ section.settings.video_2_opacity }}%;
}
{% endif %}
{% if section.settings.use_custom_button_style %}
.section-{{ section.id }} .bc-button {
background-color: {{ section.settings.button_background_color }};
color: {{ section.settings.button_text_color }};
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 }};
margin-top: {{ section.settings.button_top_margin }}rem;
}
.section-{{ section.id }} .bc-button:hover {
background-color: {{ section.settings.button_hover_background_color }};
color: {{ section.settings.button_hover_text_color }};
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
{% endif %}
@media screen and (max-width: 991px) {
.section-{{ section.id }} .bc-image-2 {
right: 5%;
}
.section-{{ section.id }} .bc-hero-content {
left: 5%;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} .bc-hero-container {
min-height: auto;
}
.section-{{ section.id }} .bc-image-1 {
position: static;
height: 600px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: translate(0%, 0%);
margin-top: 60px;
}
.section-{{ section.id }} .bc-image-2 {
display: none;
}
.section-{{ section.id }} .bc-hero-content {
position: static;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-{{ section.id }} .bc-heading * {
text-align: center;
}
}
@media screen and (max-width: 479px) {
.section-{{ section.id }} .bc-hero-container {
padding: 45px 25px;
}
.section-{{ section.id }} .bc-image-1 {
width: 100%;
height: 300px;
}
.section-{{ section.id }} .bc-hero-content {
padding-top: 55px;
padding-bottom: 55px;
}
}
{%- endstyle -%}
<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
<div class="bc-hero-container">
<div class="bc-hero-content">
<div class="bc-caption">{{ section.settings.caption | default: 'Add your caption here' }}</div>
<div class="bc-heading">{{ section.settings.heading | default: '<h1>Your Heading Here</h1>' }}</div>
{% 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 | default: 'Click me' }}
</a>
{% endif %}
</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.video_1 != blank %}
{{ section.settings.video_1 | video_tag:
controls: false,
autoplay: true,
loop: true,
muted: true,
preload: "auto",
class: "bc-video-1",
sizes: "(max-width: 479px) 90vw, (max-width: 767px) 80vw, 610px"
}}
{% elsif section.settings.image_1 != blank %}
<img src="{{ section.settings.image_1 | image_url: width: 3000 }}"
sizes="(max-width: 479px) 90vw, (max-width: 767px) 80vw, 610px"
alt="{{ section.settings.image_1_alt | default: '' }}"
class="bc-image-1"
{% if section.settings.image_loading == 'lazy' %}loading="lazy"{% else %}loading="eager"{% endif %}>
{% 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",
sizes: "(max-width: 479px) 90vw, (max-width: 767px) 83vw, 335px"
}}
{% elsif section.settings.image_2 != blank %}
<img src="{{ section.settings.image_2 | image_url: width: 3000 }}"
sizes="(max-width: 479px) 90vw, (max-width: 767px) 83vw, 335px"
alt="{{ section.settings.image_2_alt | default: '' }}"
class="bc-image-2"
{% if section.settings.image_loading == 'lazy' %}loading="lazy"{% else %}loading="eager"{% endif %}>
{% endif %}
</div>
</section>
{% schema %}
{
"name": "BC Arc Hero",
"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",
"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": "top_border_color",
"label": "Top Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "bottom_border_color",
"label": "Bottom Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_background_color",
"label": "Button Background Color",
"default": "#DFF799"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_hover_background_color",
"label": "Button Hover Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_hover_text_color",
"label": "Button 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",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding Top",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"label": "Padding Bottom",
"default": 40
},
{
"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"
},
{
"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"
},
{
"type": "header",
"content": "Text"
},
{
"type": "richtext",
"id": "caption",
"label": "Caption",
"default": "<p>Add your caption here</p>"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<h1>Your Heading Here</h1>"
},
{
"type": "range",
"id": "caption_size",
"label": "Caption Font Size",
"min": 0.5,
"max": 3,
"step": 0.1,
"default": 1,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "caption_line_height",
"label": "Caption Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "caption_max_width",
"label": "Caption Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading Font Size",
"min": 1,
"max": 8,
"step": 0.1,
"default": 3.5,
"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": "heading_max_width",
"label": "Heading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 30,
"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 the font shrinks on smaller screens"
},
{
"type": "header",
"content": "Media"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Background Image",
"info": "Recommended width 2200px"
},
{
"type": "video",
"id": "video_1",
"label": "Video 1",
"info": "Upload a video file to replace Image 1"
},
{
"type": "video",
"id": "video_2",
"label": "Video 2",
"info": "Upload a video file to replace Image 2"
},
{
"type": "text",
"id": "image_1_alt",
"label": "Image 1 Alt Text",
"info": "Describe the image for accessibility"
},
{
"type": "text",
"id": "image_2_alt",
"label": "Image 2 Alt Text",
"info": "Describe the image for accessibility"
},
{
"type": "range",
"id": "image_1_opacity",
"label": "Image 1 Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "image_2_opacity",
"label": "Image 2 Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "video_1_opacity",
"label": "Video 1 Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "video_2_opacity",
"label": "Video 2 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": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{ "value": "lazy", "label": "Lazy" },
{ "value": "eager", "label": "Eager" }
],
"default": "lazy",
"info": "Lazy load for images below the fold, eager for above-the-fold images"
},
{
"type": "header",
"content": "Buttons"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"placeholder": "Click me"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"type": "text",
"id": "theme_button_class",
"label": "Theme button class",
"info": "Enter your theme's main button class 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 to this section's buttons",
"default": false
},
{
"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",
"default": false
},
{
"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"
},
{
"type": "range",
"id": "button_top_margin",
"label": "Button Top Margin",
"min": 0,
"max": 5,
"default": 1,
"unit": "rem"
}
],
"presets": [
{
"name": "BC Arc Hero"
}
]
}
{% endschema %}