Back button on phone/desktop: How to make it close popup instead on going to previous page

[Spr123]

Hi all,

This is a topic that I think concerns the majority of Shopify websites, but I haven't found any answers online on how to handle it.

I am talking about the physical "back" button on a phone/tablet or desktop, rather than clicking "close" or "back" on the screen. Users usually close the modal using the physical back button of the cell phone instead of clicking on the screen.

If a user presses the "back" button on their phone, currently they'll land directly to the previous page (ie homepage). I think it would be extremely useful to close any popup on the first "back button press", and then the second "back" will send to the previous page. (I have seen online that a few small tweaks may be able to make this possible, for example please see here and here). 

This tweak can avoid users getting frustrated and being forced to start all over again with their browsing, if they press the back button. We've been seeing screen recordings of our users having done this, and totally giving up as a result, unfortunately. 

You can test it out yourself with these links:

1) Open the main image and click "back": https://sprixybox.com/products/your-wellness

2) Open any product card and click "back": https://sprixybox.com/apps/builder/sprixy-fai-da-te

 

 

Any hints what codes I can add or edit to modify this behavior? Or any tips you could please share?

I will be sure to give very high reviews to whoever can help me out!

Many thanks!