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

Solved

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

jzcreativespace
Shopify Partner
12 0 2

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!

Accepted Solution (1)

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

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!

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

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!

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
atmosphaera
Shopify Partner
36 0 8

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

Theme: Taste V.14
URL: https://www.atmosphaera.co/?_ab=0&_fd=0&_sc=1
jzcreativespace
Shopify Partner
12 0 2

This worked great, thank you!

jzcreativespace
Shopify Partner
12 0 2

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