Elements overlapping fixed sticky add to cart

Solved
siddharthbhan
Visitor
3 0 0

I added some css to my add to add to cart and buy now and made the section fixed on bottom, now my 2nd section which is Recommended products and the footer payment icons are overlapping the sticky bar whenever I scroll down. I tried with z-index as well as positions, didn't work for me.

 

Please see the replicated issue here: https://carbonvelocity.com/products/lorem-ipsum-dolor-sit-amet

 

 

 

Accepted Solution (1)
Moeed
Shopify Partner
3046 760 924

This is an accepted solution.

Hey @siddharthbhan 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
.scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    z-index: 1;
}
product-recommendations.related-products.page-width.section-template--19964272673083__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded {
    z-index: 0;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 3 (3)
Moeed
Shopify Partner
3046 760 924

This is an accepted solution.

Hey @siddharthbhan 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
.scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    z-index: 1;
}
product-recommendations.related-products.page-width.section-template--19964272673083__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded {
    z-index: 0;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
siddharthbhan
Visitor
3 0 0

Hey Moeed, 

Thanks for the help, this is working perfectly fine for me. I initially tried the same thing in base.css but it did not work. How come this works and that did not?

 

Ugurcan
Shopify Expert
321 5 31

@siddharthbhan  We recently released a sticky cart app with a free plan you can use that instead, check it out: https://apps.shopify.com/pasilobus-sticky-cart

Pasilobus, Inc - Shopify Experts -- www.pasilobus.com - Fast, efficient apps that do not slow down your store, Stellar support & Premier Services