Elements overlapping fixed sticky add to cart

Solved

Elements overlapping fixed sticky add to cart

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
7553 2037 2508

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
7553 2037 2508

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


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 Partner
349 7 34

@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 | eCommerce Experts, Shopify Apps & Development since 2015 -- www.pasilobus.com