Section Shell + Container
17 settings · Container (9) + Section Shell (6) + two composition groups
The baseline every section ships with. Container (9 settings) is a nested shell with its own max-width, padding, radius, background color/image, overlay, and border. Section Shell (6 settings) wraps it with outer padding, radius, background, and border. Two nested shells give editors full control — outer can be full-bleed with a colored bg, inner can be a bounded card with its own styling.
Fluid builder renders
Container
Max Width
Default (1280px)
Container Padding
0
64
0
64
Container Border Radius
0
0
0
0
Container Background Color
Transparent
Container Background Image
Select or Upload image
Container Overlay Color
Transparent
Container Overlay Opacity
0
Container Border Width
0
Container Border Color
Primary
Section Shell
Section Padding
80
0
80
0
Section Border Radius
0
0
0
0
Background Color
Primary
Background Image
Select or Upload image
Section Border Width
0
Section Border Color
Primary
Schema json
{
"settings": [
{ "type": "header", "content": "Container" },
{ "type": "select", "id": "container_max_width", "label": "Max Width", "default": "1280px",
"options": [
{ "value": "960px", "label": "Narrow (960px)" },
{ "value": "1280px", "label": "Default (1280px)" },
{ "value": "1440px", "label": "Wide (1440px)" },
{ "value": "100%", "label": "Full (100%)" }
] },
{ "type": "padding", "id": "container_padding", "label": "Container Padding" },
{ "type": "corner_radius", "id": "container_border_radius", "label": "Container Border Radius" },
{ "type": "select", "id": "container_background_color", "label": "Container Background Color",
"options": "background_colors", "default": "transparent" },
{ "type": "image_picker", "id": "container_background_image", "label": "Container Background Image" },
{ "type": "select", "id": "container_overlay_color", "label": "Container Overlay Color",
"options": "background_colors", "default": "transparent" },
{ "type": "range", "id": "container_overlay_opacity", "label": "Container Overlay Opacity",
"min": 0, "max": 100, "step": 5, "default": 0, "unit": "%" },
{ "type": "range", "id": "container_border_width", "label": "Container Border Width",
"min": 0, "max": 10, "step": 1, "default": 0, "unit": "px" },
{ "type": "select", "id": "container_border_color", "label": "Container Border Color",
"options": "background_colors", "default": "var(--clr-primary)" },
{ "type": "header", "content": "Section Shell" },
{ "type": "padding", "id": "section_padding", "label": "Section Padding" },
{ "type": "corner_radius", "id": "section_border_radius", "label": "Section Border Radius" },
{ "type": "select", "id": "background_color", "label": "Background Color",
"options": "background_colors", "default": "transparent" },
{ "type": "image_picker", "id": "background_image", "label": "Background Image" },
{ "type": "range", "id": "section_border_width", "label": "Section Border Width",
"min": 0, "max": 10, "step": 1, "default": 0, "unit": "px" },
{ "type": "select", "id": "section_border_color", "label": "Section Border Color",
"options": "background_colors", "default": "var(--clr-primary)" }
]
}Liquid wire-up liquid
{%- style -%}
.my-section.section-{{ section.id }} {
{%- assign p = section.settings.section_padding -%}
{%- if p -%}padding: {{ p.top }}px {{ p.right }}px {{ p.bottom }}px {{ p.left }}px;{%- endif -%}
{%- assign r = section.settings.section_border_radius -%}
{%- if r -%}border-radius: {{ r.tl }}px {{ r.tr }}px {{ r.br }}px {{ r.bl }}px;{%- endif -%}
{% if section.settings.section_border_width > 0 %}
border: {{ section.settings.section_border_width }}px solid {{ section.settings.section_border_color }};
{% endif %}
background-color: {{ section.settings.background_color | default: 'transparent' }};
{%- if section.settings.background_image != blank -%}
background-image: url({{ section.settings.background_image | img_url: '2400x' }});
background-size: cover; background-position: center; background-repeat: no-repeat;
{%- endif -%}
}
.my-section.section-{{ section.id }} .my-section__container {
max-width: {{ section.settings.container_max_width | default: '1280px' }};
margin: 0 auto;
{%- assign cp = section.settings.container_padding -%}
{%- if cp -%}
padding: {{ cp.top | default: 0 }}px {{ cp.right | default: 64 }}px {{ cp.bottom | default: 0 }}px {{ cp.left | default: 64 }}px;
{%- else -%}
padding: 0 64px;
{%- endif -%}
}
@media (max-width: 991px) { .my-section.section-{{ section.id }} .my-section__container { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 767px) { .my-section.section-{{ section.id }} .my-section__container { padding-left: 16px; padding-right: 16px; } }
{%- endstyle -%}
…
Why split Container from Section Shell tip
Think of it as two nested boxes. Section Shell is the outer box — full-width colored area, section-to-section separator. Container is the inner box — bounded content area, optionally styled as a standalone card. Stack them for hero sections with image backgrounds + bordered content containers, or keep the container transparent for a clean centered layout.