E-Commerce Checkout Pop-up not working on Mobile

Design help CMS
1

Hey guys - hoping to get our site live and launched ASAP, and I’m just struggling to figure out this last little detail. For some reason, the checkout pop up when clicking “add to cart” does not want to function on mobile, even though items are being added to the cart.

My current workaround is to have the waiting message display “check your cart in the nav bar” but thats a pretty horrific UX that I don’t want to wish upon anybody!

Please let me know. Thank you guys!

Read only link below!

Here is my public share link: https://preview.webflow.com/preview/murmur?utm_medium=preview_link&utm_source=designer&utm_content=murmur&preview=9b0ffda89e0f3a094b862aee3e65c915&pageId=5ef64a159d6b28897bff5202&mode=preview
(how to access public share link)

2

I’m having trouble finding products to add to the cart, there’s a preplaced item in the cart always, but that seems to work on mobile!

3

Hi @thomaskim_12,

from my initial research i think the Cart doesn’t show up automatically on mobile, because it’s been placed in a hidden navigation bar. Cart will open automatically upon adding products to it, but the navigation bar doesn’t have an interaction like this.

You could either move the Cart element out of the navigation bar and have it directly on the page or the store customers will need to open the navigation bar first, and then add the product to the Cart (and the navigation bar would need to be less than full height to allow for this to work).

Please let me know if you have additional questions!
Maciej

4

Thanks for getting back to me! So the product is basically just a month long program that we’re selling, so theres not really a product feature or anything that isn’t explained on that page…

5

Thank you for replying!

So if the cart isn’t hidden on the page, this should work right? Or perhaps I need to add an interaction that opens the mobile nav bar when someone clicks on the add to cart button?

6

So I made a really really hacked up solution work - I returned the cart to be right under the headline of the splash, and then made the button components all white so its just “invisible” and low and behold, the add to cart button now pops up on mobile.

Not sure if theres a better solution for this but works for now. Could you think of anything better or a better workaround? Please let me know… thank you!

7

this is incredibly frustrating and even unacceptable for the Ecomm packages… I’ve got a similar bug where the Cart is sitting outside of everything. It works in all version of my site, including Mobile Landscape, but Cart does not open in Mobile Portrait. Pretty rubbish… no reply from support either…

1 Like
8

Hey guys!

I’ve just come across the same issue and was searching for a solution and nada so i played around with things and figured it out!

Just import this code into your page settings “inside tag”

<style>
@media(max-width:480px) {
.cart-wrapper{
height:90vh;
width:100vw;
z-index:1000;

}
</style>

The “@media(max-width:480)” means that it will only effect the mobile portrait view and smaller so your cart look funky on your other screen sizes.

P.S. - Make sure you go to your cart and change the class on your cart wrapper to “cart-wrapper” for this to work. or change the code to match your wrappers class.

Hope this helps! :slight_smile:

1 Like
9

Thanks very much! this was helpful, had the same issue.

10

Unsure if the Webflow team ever put out a real fix for this (doesn’t look like it) but here in 2024 I had the same issue. I found that I could fix it without adding CSS manually. Inside Cart Wrapper (.cart-wrapper in CSS) there’s another div called Cart Container (cart-container in CSS) in the Webflow editor you can change the properties on Cart Container to be 100 vh or in my case 60 vh and this fixed the issue for me.