> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/footer.md). # Footer Customize your store's footer — layout, background media, color scheme, spacing, and all available blocks for building a polished, conversion-friendly bottom section.
The Footer is the section at the very bottom of every page on your store. It anchors your site with essential links, trust signals, newsletter signups, and brand information. A well-built footer keeps customers engaged even after they've scrolled to the end of your content. The Footer is automatically placed on every page of your store — you don't need to assign it manually. *** ### What you can customize * **Layout** — arrange blocks vertically or horizontally, with full control over alignment and gaps * **Fullscreen mode** — make the footer fill the entire browser window * **Height** — control how tall the footer is (auto, small, medium, large, or full viewport) * **Background and media** — add solid colors, gradients, images, or video backgrounds * **Spacing** — fine-tune padding around the footer content * **Available blocks** — add menus, newsletters, social icons, logos, testimonials, and more *** ### How to access this template 1. In the **Theme Editor (Customize)**, click the **template selector** (dropdown at the top). 2. Select **Footer**. 3. The page editor will show the **Footer** section with all its settings. {% hint style="success" icon="lightbulb" %} **Tip:** The Footer uses the same block system as Custom Sections. You can add any block from the block picker to build exactly the layout you want — from a simple menu + copyright to a full multi-column grid with newsletter, social links, and testimonials. {% endhint %} *** ### Section overview | Area | What customers see | Why it matters | | -------------- | ----------------------------------------------- | ----------------------------------------------------- | | **Top blocks** | Content like menus, images, or branded sections | Sets the tone and adds structure above the bottom bar | | **Bottom bar** | Typically menus, social icons, copyright | Provides navigation fallback and legal clarity | | **Background** | Optional color, gradient, image, or video | Creates visual continuity with the rest of your store | *** ### General settings **Invisible mode** When enabled, removes the footer's background and padding so the content sits directly on your page background — creating a seamless, clean feel. **Fullscreen mode** When enabled , the footer fills the entire browser window (100vh height) — creating an immersive, full-page layout. Useful for dramatic footer designs with strong background visuals. **Container width** Controls the maximum width of the footer content. **Options:** *Inherit / Full width / Standard / Wide / Narrow* {% hint style="info" icon="note-sticky" %} **Note:** On mobile, the container is always full width regardless of this setting. {% endhint %} **Height** Controls how tall the footer is when **Fullscreen mode** is disabled. **Options:** * *Auto* — The footer height is determined by its content. * *Small* — A compact footer height. * *Medium* — A moderate footer height. * *Large* — A large footer height. * *Full* — Full viewport height. *** ### Inner content layout Controls how blocks are arranged within the footer and how they are spaced apart. **Direction** Controls whether blocks stack vertically or sit side by side horizontally. **Options:** * *Vertical* — Blocks stack on top of each other, one after another. * *Horizontal* — Blocks sit side by side in a row. **Alignment (horizontal direction)** When Direction is *Horizontal*: controls how blocks are distributed across the row. **Options:** * *Left* — Blocks align to the left edge of the footer. * *Center* — Blocks are centered within the footer. * *Right* — Blocks align to the right edge. * *Space Between* — Blocks spread out with equal space between them. **Position (horizontal direction)** When Direction is *Horizontal*: controls vertical alignment of blocks within the row. **Options:** * *Top* — Blocks align to the top of the row. * *Middle* — Blocks align to the middle of the row. * *Bottom* — Blocks align to the bottom of the row. **Alignment (vertical direction)** When Direction is *Vertical*: controls how blocks are aligned horizontally within the footer width. **Options:** *Left / Center / Right* **Position (vertical direction)** When Direction is *Vertical*: controls vertical spacing between blocks. **Options:** * *Top* — Blocks start at the top; content fills downward. * *Middle* — Blocks are centered vertically within the footer. * *Bottom* — Blocks push to the bottom of the footer. * *Space Between* — Extra space is distributed evenly between blocks. **Gap** Controls the spacing between blocks within the footer. **Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom* **Custom Gap** — When Gap is set to *Custom*: enter a value from 0–200px. **Default:** *4px* **Custom on mobile** Enable different layout values for mobile devices. **Mobile Direction** — *Vertical / Horizontal* **Mobile Alignment** — *Left / Center / Right / Space Between* **Mobile Position** — *Top / Middle / Bottom* **Mobile Gap** — *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom* **Mobile Custom Gap** — When Mobile Gap is *Custom*: enter a value from 0–200px. *** ### Style settings **Inherit color scheme** When enabled, the footer uses your theme's default color scheme. **Color scheme** When **Inherit color scheme** is disabled, pick a color scheme to override the footer's background and text colors. **Custom background** Enable to add a color or media background behind the footer. **Background** — When Custom background is enabled: *None / Color / Media* **Color style** — When Background is *Color*: *Solid* or *Gradient* **Color code** — The actual color values. **Media type** — When Background is *Media*: *Image* or *Video* **Image** — Upload or select an image from your Shopify files. **Video** — Upload or select a video file from your Shopify files. **Media overlay** — Add a semi-transparent layer over the background media to improve text readability. **Overlay style** — When Media overlay is enabled: *Solid* or *Gradient* **Overlay color** — The overlay color values. **Enable parallax effect** — Adds a subtle depth effect where the background media scrolls slower than the content on top. {% hint style="success" icon="lightbulb" %} **Tip:** For video backgrounds in the footer, use a short loop (5–10 seconds) of slow-moving ambient footage — a workspace, a gentle texture, or a subtle pattern. A calm, looping video behind a newsletter signup feels premium without being distracting. {% endhint %} *** ### Spacing settings **Padding** Enable to add custom padding values around the footer content. **Top / Bottom / Left / Right** — Padding from 0–200px. **Custom on mobile** — Enable different padding values for mobile. **Mobile Top / Bottom / Left / Right** — Padding from 0–100px. *** ### Available blocks The Footer uses the same block system as Custom Sections. Click **Add block** in the Theme Editor to choose from: | Block | What it adds | | ----------------------------- | ------------------------------------------------------- | | **Group** | A nested container for grouping related blocks together | | **Form** | A customizable form for collecting customer input | | **Marquee** | An animated scrolling text banner | | **Spacer** | Empty vertical space | | **Title** | A section heading | | **Rich Text** | Formatted text content | | **Button** | A clickable call-to-action button | | **Divider** | A horizontal line separator | | **Icon** | A single icon with optional text | | **Social Media** | Social media icons linked to your profiles | | **Logo** | A logo or brand image | | **Jumbo Text** | Extra-large display text | | **Image** | A standalone image | | **Video** | An embedded video | | **Highlight Text with Image** | Text with a companion image or graphic | | **Email Form** | A newsletter signup form | | **Countdown** | A countdown timer | | **Listing** | A styled list of items | | **Testimonial Item** | A customer quote card | | **Featured Product** | A highlighted product card | | **Product Listing** | A grid of products | | **Article Listing** | A grid of blog posts | | **Accordion** | A collapsible content panel | | **Icon Box Listing** | A row of icons with labels | | **Tabs** | A tabbed content interface | | **Map** | An embedded Google Map | | **Menu** | A list of navigation links | | **Store Locator** | A store location finder | | **Banner** | A full-width promotional banner | | **Before & After** | An image comparison slider | | **Instagram List** | A feed of Instagram posts | | **Shop by Collection** | A collection showcase | | **Collection List** | A row or grid of collections | | **Slideshow** | An auto-playing image carousel | | **Localization** | Language or region selector | | **Follow on Shop** | A Shopify follow button | | **Payment Icons** | Payment method logos | | **Copyright** | An auto-updating copyright notice | | **Custom Liquid** | Custom Liquid code (requires developer support) | *** ### Design ideas #### The classic multi-column footer Build a professional, information-rich footer: 1. Add a **Group** block — this will contain the top row of columns 2. Inside the Group, add **Menu** blocks side by side — "Shop", "Support", "Company" 3. Add a **Social Media** block — icons below the menus 4. Add a **Divider** block — a thin line separating content from the bottom bar 5. Add a **Copyright** block — "© 2024 Your Store Name" #### The branded newsletter footer 1. Set **Container width = Full width** and **Height = Large** 2. Set **Custom background = Color** with a bold brand color 3. Add a **Title** block — "Stay in the loop" 4. Add a **Rich Text** block — "Get exclusive deals, new arrivals, and style tips." 5. Add an **Email Form** block — the signup field and button 6. Add a **Social Media** block — below the form 7. Set **Alignment = Center** so all content is centered #### The minimal bottom bar 1. Set **Height = Small** 2. Add a **Menu** block — a single row of essential links 3. Add a **Copyright** block 4. Set **Alignment = Space Between** so links are on the left and copyright is on the right *** ### Tips & best practices {% hint style="success" %} **Tip:** * Always include your most important links in the footer — at minimum, a copyright notice and links to your privacy policy and terms of service. These are legally required in many regions and build trust with customers. *** * Use the **Menu** block to create footer link columns. Group related links together (e.g., "Shop: Men, Women, Sale" and "Support: FAQ, Contact, Returns"). Keep each column to 5–7 links maximum. *** * Add a **Follow on Shop** or **Email Form** block to your footer. Customers who scroll all the way to the bottom have engaged deeply with your content — they are prime candidates for newsletter or follow signups. {% endhint %}