How to create a sticky footer that reveals on scroll - Theme Broadcast

Store Design
, , , , ,

Topic summary

Goal: Implement a “sticky footer that reveals on scroll” on the Broadcast theme, similar to a Chanel page.

Proposed solution: Add custom CSS in theme.css/base.css to make the footer sticky at the bottom and full-height. The snippet sets footer position: sticky; bottom: 0; height: 100vh; and applies footer/background colors. It’s noted to work on the Clean style. A Loom video demonstrates the result.

Initial outcome: The effect worked as intended for the requester.

New issue: After applying the CSS, all footer links became non-functional (disabled). The cause was not identified in the thread, and no fix was provided.

Additional inquiry: Another participant asked if the same code works on the Taste theme v14. No confirmation or guidance was given.

Status: Partial success with a working visual effect but a critical usability bug (footer links not clickable). Compatibility with Taste v14 remains unanswered. Video demo is central to understanding the implemented effect. The discussion is open with unresolved link interactivity and cross-theme support questions.

Summarized with AI on December 26. AI used: gpt-5.
2

Hi @jzcreativespace ,

You can follow these steps to make the footer reveal on scrolling

  1. Open Online Store > Theme > Edit Code

  2. Find and open the theme.css (or base.css, custom.css, styles.css) file

  3. Paste the code snippet below at the bottom of the file and hit save (it works on the Clean style)

body > .container {
    background-color: var(--COLOR-FOOTER-BG) !important;
}

body > footer.footer-sections {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 100vh;
    
}

body > footer.footer-sections .shopify-section.shopify-section-group-group-footer {
    background-color: var(--COLOR-FOOTER-BG);
}

Here is the result

https://www.loom.com/share/fe21226c882c4252a2c3bc23647d1271

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

1 Like