A user implemented custom JavaScript code to keep customers on the same page after adding items to cart (instead of auto-redirecting to checkout). This caused an unintended issue on mobile: the delete/bin icon in the cart scrolls down with the page content instead of staying fixed in position.
Resolution:
The problem was solved by adding CSS to the component-cart-items.css file:
This fixed positioning prevents the icon from moving during scroll.
Open Question:
The original poster also asked whether products with variant options (sizes, colors, etc.) could redirect back to the collections page after adding to cart, rather than staying on the product page. One commenter suggested detecting variants and adding a conditional redirect in the Ajax success function, but no definitive solution was provided. This secondary issue remains unresolved.
Summarized with AI on October 27.
AI used: claude-sonnet-4-5-20250929.
First of all, thanks a lot for all the help in my lasts posts ! very much appreciated ! I’m very close to finalize my website so I won’t bother for too long I promise !
I have 2 questions… while digging a little bit, I found a way to add to cart and remain in the same page (so it doesn’t go to checkout automatically anymore). However, when I click on view cart on my mobile and I scroll down to see the list of items, the bin icon goes down as well. so I’m thinking that maybe it’s related to the code that I added to remain on the same page ?
Here is the code :
{% comment %}
If you want to animate your feedback message.
{% endcomment %}
Also, this code works perfectly for items that have the add to cart button as it remains in the collections page. However, for articles that have options, I would like if possible to go back to the collections page instead of staying on the products page. Is that possible ?
First off, I want to express my gratitude for the incredible help I’ve received from this community in my previous posts – your support means the world to me! With my website’s completion on the horizon, I promise not to keep you for too long!
I’m currently facing two questions. As I delved deeper into customization, I discovered a way to keep users on the same page after clicking “Add to Cart” (goodbye automatic checkout!). However, on mobile devices, I’ve noticed that when I scroll down to view the cart items after clicking “View Cart,” the delete icon moves along with the scroll. Could this be related to the code that’s keeping users on the same page?
Now, on to my second question. The code works like a charm for items with a direct “Add to Cart” button, elegantly keeping users on the collections page. However, I’m facing a quandary with articles that have multiple options. Ideally, I’d love for users to return to the collections page instead of lingering on the products page. Any insights on achieving this?
Your expertise is invaluable to me, and I can’t thank you enough in advance for your guidance!
Hey, thanks for sharing everything in so much detail. Honestly, you’re really close to getting this all wrapped up, and it’s cool to see how much you’ve already figured out on your own.
I was reading through your post and a couple of things came to mind. About the first issue where the bin icon moves down when you scroll the cart on mobile — do you think it could be more of a CSS thing instead of the Ajax cart script itself? It kind of sounds like maybe the icon isn’t fixed properly, and when the cart content grows and you scroll, it just scrolls along with everything else. I’m wondering if removing or tweaking the slideDown animation for the feedback messages would make any difference too. Maybe the animation is shifting the layout somehow without it being obvious.
Also, since you’ve made it so the page doesn’t reload after adding to cart anymore, maybe some parts of the cart layout that usually reset on reload aren’t doing that now, which might be throwing off the position of stuff like the bin icon. Would be interesting to see if the problem still happens if you load the page fresh after adding a few items.
And about your second question — wanting to go back to the collection page after adding a product with options — that totally makes sense. I was thinking, is there a way you could detect if the product has variants (like sizes, colors, etc.) and then after a successful add to cart, just automatically redirect them back to the collection page? Maybe you could add a small redirect inside the success function of your Ajax code but only for products with options? Just throwing the idea out there, not sure if it’s the cleanest way but could be a start.
Anyway, just wanted to put these thoughts out there and see if anyone else has tackled something like this. You’re doing great and super close to the finish line, honestly.
