Footer column
Footer column is a flexible column container designed specifically for footer layouts. It provides comprehensive layout controls, responsive design options, background media support, and advanced styling capabilities.
This block serves as a structural element for organizing footer content into columns with full control over alignment, sizing, and visual appearance.
How to add the Footer Column 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 Column.
Supported Child Blocks
@theme
Any theme block
@app
Third-party app blocks
_divider
Horizontal divider elements
Footer Column Block - Settings Guide
This guide explains all available settings for the Footer Column 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 (Mobile)
select
Mobile layout direction (column, row)
"column"
Horizontal Alignment
Horizontal Alignment
select
Horizontal alignment (left, center, right, space-between)
"flex-start"
Content Direction is "row"
Horizontal Alignment (Columns)
select
Column horizontal alignment (left, center, right)
"flex-start"
Content Direction is not "row"
Horizontal Alignment (Mobile)
select
Mobile horizontal alignment
"flex-start"
Content Direction (Mobile) is "row"
Horizontal Alignment (Columns, 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 (Columns)
select
Column vertical alignment with space-between
"center"
Content Direction is "column"
Vertical Alignment (Mobile)
select
Mobile vertical alignment
"center"
Content Direction (Mobile) is "row"
Vertical Alignment (Columns, Mobile)
select
Mobile column vertical alignment
"center"
Content Direction (Mobile) is "column"
Additional Layout Controls
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 (Tablet)
select
Tablet width (fit, fill, custom)
"fill"
-
Custom Width (Tablet)
range
Custom tablet width (1-100%)
100
Width (Tablet) 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