How can I fix my website's footer to stay at the bottom of the page?

Technical Q&A

Topic summary

A user encountered an issue where their website footer appeared in the middle of pages with minimal content on larger screens, rather than staying at the bottom. Initial attempts using position: fixed caused the footer to overlap with content.

Solution Process:

  • First attempt used CSS Grid (display: grid with grid-template-rows) to position the footer at the bottom, but this caused all content to align to the bottom, creating unwanted white space.
  • The working solution involved using Flexbox on the body element with display: flex, flex-direction: column, and min-height: 100vh.
  • Initially applied only to specific templates (like #template-customers-login), but the user wanted a site-wide fix.

Final Implementation:
Since the theme lacked a main wrapper class, the solution required:

  1. Adding a class="main-content" to the main content div in theme.liquid
  2. Applying CSS that makes the body a flex container, the main content flexible (flex: 1 0 auto), and the footer non-shrinking (flex-shrink: 0)

The discussion was marked as solved, with the solution successfully fixing the footer positioning across the entire website. An alternative Flexbox approach using margin-top: auto on the footer was also suggested.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
2

Hi,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > style.css and paste this at the bottom of the file:
body {
	min-height: 100vh !important;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	grid-template-columns: 100%;
}

Hope it helps!