Footer Group Block
This is a flexible container component designed for organizing footer content within theme. It provides comprehensive layout controls, responsive design options, background media support, and advanced styling capabilities.
This block serves as a wrapper that can contain multiple footer columns and other content blocks.
How to add the Footer Group block?
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
In the Footer Group -> Footer -> Add block -> choose Footer Group.
Supported Child Blocks
@theme
Any theme block
@app
Third-party app blocks
_divider
Horizontal divider elements
_footer-column
Structured footer column containers
Footer Group Block - Settings Guide
This guide explains all available settings for the Footer Group Block in order from top to bottom as they appear in the Theme Editor.
Link Settings
Link
url
Optional link for the entire column
-
Open In New Tab
checkbox
Open link in new tab/window
false
Layout Configuration
Content Direction
content_direction
select
Primary layout direction (column, row)
"column"
-
content_direction_tablet
select
Tablet layout direction
"column"
-
content_direction_mobile
select
Mobile layout direction
"column"
-
Horizontal Alignment
horizontal_alignment
select
Horizontal alignment (left, center, right, space-between)
"flex-start"
content_direction is "row"
horizontal_alignment_flex_direction_column
select
Column horizontal alignment
"flex-start"
content_direction is not "row"
horizontal_alignment_tablet
select
Tablet horizontal alignment
"flex-start"
content_direction_tablet is "row"
horizontal_alignment_flex_direction_column_tablet
select
Tablet column alignment
"flex-start"
content_direction_tablet is not "row"
horizontal_alignment_mobile
select
Mobile horizontal alignment
"flex-start"
content_direction_mobile is "row"
horizontal_alignment_flex_direction_column_mobile
select
Mobile column alignment
"flex-start"
content_direction_mobile is not "row"
Vertical Alignment
vertical_alignment
select
Vertical alignment (stretch, top, center, bottom)
"center"
content_direction is "row"
vertical_alignment_flex_direction_column
select
Column vertical alignment with space-between
"center"
content_direction is "column"
vertical_alignment_tablet
select
Tablet vertical alignment
"center"
content_direction_tablet is "row"
vertical_alignment_flex_direction_column_tablet
select
Tablet column vertical alignment
"center"
content_direction_tablet is "column"
vertical_alignment_mobile
select
Mobile vertical alignment
"center"
content_direction_mobile is "row"
vertical_alignment_flex_direction_column_mobile
select
Mobile column vertical alignment
"center"
content_direction_mobile is "column"
Additional Layout Controls
wrap
select
Flex wrap behavior (nowrap, wrap)
"wrap"
-
align_baseline
checkbox
Align items to baseline
false
vertical_alignment is "flex-end"
gap
range
Space between elements (0-100px)
12
-
Size Configuration
width
select
Block width (fit-content, fill, custom)
"fill"
-
custom_width
range
Custom width percentage (0-100%)
100
width is "custom"
width_mobile
select
Mobile width (fit-content, fill, custom)
"fill"
-
custom_width_mobile
range
Custom mobile width (0-100%)
100
width_mobile is "custom"
height
select
Block height (auto, fit, fill, custom)
"fit"
-
custom_height
range
Custom height percentage (0-100%)
100
height is "custom"
Appearance Settings
Color Scheme
inherit_color_scheme
checkbox
Use parent color scheme
true
-
scheme_background
color
Custom background color
#FFFFFF
inherit_color_scheme is false
scheme_background_gradient
color_background
Background gradient
-
inherit_color_scheme is false
scheme_foreground_heading
color
Heading text color
#000000
inherit_color_scheme is false
scheme_foreground
color
Body text color
#000000
inherit_color_scheme is false
scheme_primary
color
Primary accent color
#000F9F
inherit_color_scheme is false
scheme_primary_hover
color
Primary hover color
#000000
inherit_color_scheme is false
scheme_border
color
Border color
#E6E6E6
inherit_color_scheme is false
scheme_shadow
color
Shadow color
#000000
inherit_color_scheme is false
Background Media
background_media
select
Media type (none, image, video)
"none"
-
video
video
Background video file
-
background_media is "video"
video_position
select
Video positioning (cover, contain)
"cover"
background_media is "video"
background_image
image_picker
Background image
-
background_media is "image"
background_image_position
select
Image positioning (cover, fit)
"cover"
background_media is "image"
content_overlay
checkbox
Enable content overlay
false
Media is enabled
image_ratio
select
Image aspect ratio (adapt, portrait, square, landscape)
"adapt"
Media enabled and overlay active
Borders and Styling
border
select
Border style (none, solid)
"none"
-
border_width
range
Border thickness (0-10px)
1
border is not "none"
border_radius
range
Corner radius (0-100px)
0
-
Overlay Effects
toggle_overlay
checkbox
Enable background overlay
false
-
overlay_color
color
Overlay color with alpha
#00000026
toggle_overlay is true
extend_left_overlay
checkbox
Extend overlay to left edge
false
toggle_overlay is true
extend_right_overlay
checkbox
Extend overlay to right edge
false
toggle_overlay is true
overlay_style
select
Overlay type (solid, gradient)
"solid"
toggle_overlay is true
gradient_direction
select
Gradient direction (to top, to bottom)
"to top"
Overlay is gradient
Animation Settings
enable_parallax
checkbox
Enable parallax scrolling
false
-
disable_parallax_mobile
checkbox
Disable parallax on mobile
false
enable_parallax is true
parallax_speed
range
Parallax speed (0-4)
0.5
enable_parallax is true
horizontal_position
range
Horizontal offset (-50% to 50%)
0
enable_parallax is true
vertical_position
range
Vertical offset (-50% to 50%)
0
enable_parallax is true
Shadow Settings
shadow_color
color
Shadow color with alpha
#00000000
shadow_horizontal_offset
range
Horizontal shadow offset (-12px to 12px)
0
shadow_vertical_offset
range
Vertical shadow offset (-12px to 12px)
0
shadow_blur
range
Shadow blur radius (0-20px)
0
spread_radius
range
Shadow spread (0-100px)
0
Spacing Settings
Margin Controls
margin-block-start
range
Top margin (0-100px)
0
margin-block-start-mobile
range
Mobile top margin (0-100px)
0
margin-block-end
range
Bottom margin (0-100px)
0
margin-block-end-mobile
range
Mobile bottom margin (0-100px)
0
margin-inline-start
range
Left margin (0-100px)
0
margin-inline-start-mobile
range
Mobile left margin (0-100px)
0
margin-inline-end
range
Right margin (0-100px)
0
margin-inline-end-mobile
range
Mobile right margin (0-100px)
0
Padding Controls
padding-block-start
range
Top padding (0-100px)
0
padding-block-end
range
Bottom padding (0-100px)
0
padding-inline-start
range
Left padding (0-100px)
0
padding-inline-end
range
Right padding (0-100px)
0
Last updated