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

Store Design
, , , , ,
1

Hi! I am hoping to get some help in creating a sticky footer that reveals on scroll - below is a link to the effect I am trying to achieve. I am using the Broadcast Theme.

https://www.chanel.com/us/fashion/collection/chanel-coco-beach-2024/

Any help is appreciated!

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
3

Hello, I also want this effect. Will this code work on Taste theme V14?

4

This worked great, thank you!

1 Like
5

I actually just realized this disabled all the footer links - none of them seem to be working. Any idea what that could be?