# 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 | Block Type | Description | | ---------- | --------------------------- | | `@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 | Setting | Type | Description | Default | | ----------------- | -------- | ----------------------------------- | ------- | | `link` | url | Optional link for the entire column | - | | `open_in_new_tab` | checkbox | Open link in new tab/window | false | #### Layout Configuration **Content Direction** | Setting | Type | Description | Default | | -------------------------- | ------ | -------------------------------------- | -------- | | Content Direction | select | Primary layout direction (column, row) | "column" | | Content Direction (Mobile) | select | Mobile layout direction (column, row) | "column" | **Horizontal Alignment** | Setting | Type | Description | Default | Visibility Condition | | -------------------------------------- | ------ | --------------------------------------------------------- | ------------ | --------------------------------------- | | 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** | Setting | Type | Description | Default | Visibility Condition | | ------------------------------------ | ------ | ------------------------------------------------- | -------- | -------------------------------------- | | 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** | Setting | Type | Description | Default | Visibility Condition | | -------------- | -------- | -------------------------------- | ------- | -------------------------------- | | Align Baseline | checkbox | Align items to baseline | false | Vertical Alignment is "flex-end" | | Gap | range | Space between elements (0-100px) | 12 | - | #### Size Configuration | Setting | Type | Description | Default | Visibility Condition | | --------------------- | ------ | ---------------------------------------- | ------- | -------------------------- | | 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** | Setting | Type | Description | Default | Visibility Condition | | -------------------------- | ----------------- | ----------------------- | ------- | ----------------------------- | | 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** | Setting | Type | Description | Default | Visibility Condition | | ------------------------- | ------------- | ------------------------------------------------------- | ------- | -------------------------------- | | 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** | Setting | Type | Description | Default | Visibility Condition | | ------------- | ------ | -------------------------- | ------- | -------------------- | | 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** | Setting | Type | Description | Default | Visibility Condition | | -------------------- | -------- | -------------------------------------- | --------- | ---------------------- | | 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 | Setting | Type | Description | Default | Visibility Condition | | ----------------------- | -------- | ------------------------------- | ------- | ----------------------- | | 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 | Setting | Type | Description | Default | | ------------------------ | ----- | ---------------------------------------- | --------- | | 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** | Setting | Type | Description | Default | | ---------------------------- | ----- | ------------------------------ | ------- | | 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** | Setting | Type | Description | Default | | -------------------- | ----- | ------------------------ | ------- | | 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 |