Cart wrapper is stuck at top of page

Community resources Bugs
1

https://preview.webflow.com/preview/foreverlovedpets?utm_medium=preview_link&utm_source=designer&utm_content=foreverlovedpets&preview=d3a1621bbea6025a5cd58addbdb11cee&pageId=5e879e3a58eddee7906a4bab&mode=preview

When you get to the store page on my test site, scroll down to the Men’s section of merchandise. Add any of them to the cart by selecting a size, then clicking “Add to Cart.” See what happens? An annoying nothing. The screen dims while the pop-up cart modal appears out of view. Bad UX.

The cart is stuck at the top of the page. Here is what I have tried, none of which has helped:

  1. Change the position of “cart form wrapper” div block to sticky. This helped somewhat, but not if you’re low on the page and add something to your cart. (Note the “Cart” element’s position cannot be changed.)
  2. Make the cart or cart wrapper 100% VH. Nope.
  3. Idea: What if I gave all “Add to Cart” buttons an interaction so that on mouse click, it would automatically scroll to the top of the screen. Nope. Doesn’t seem possible with Webflow.

Any ideas? Surely someone has come across this with Webflow ecommerce…
Thanks for your input.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

any help appreciated

3

Site is now live. If you go here: Store - Get Forever Loved Pet Sanctuary merchandise … scroll down to the Men’s section. Add any item to the cart. Nothing happens other than the whole page turns gray. Where is the cart? It only appears if you scroll up. 50% of the time it never appears at all.

Note if you add women’s items to the cart (which are at the top of the page), it works fine.

4

Hello,
​
​Riley here from the Webflow support team. Thank you so much for reaching out!

It looks like you’ve been able to workaround this; when I test the cart, everything works great.

Let me know if you’re still experiencing any issues.
​
​My best,
​Riley

1 Like
5

Hi @RileyJones - thanks! Oh wow, it actually worked haha! Here is what I did. I’m not sure if 1 or both made the difference.

https://preview.webflow.com/preview/foreverlovedpets?utm_medium=preview_link&utm_source=designer&utm_content=foreverlovedpets&preview=d3a1621bbea6025a5cd58addbdb11cee&pageId=5ea795b9f85abcff26cc1803&mode=preview

  1. I made the “section” layer (which contains the Cart) have a position of “sticky.”
  2. I also made the div block called “Cart Form Wrapper” have a position of “sticky.”

So this is working on desktop, but it’s still not working on tablet or either mobile view. Do you have any ideas for that? Thank you!

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.