How Do I Disable The Popup For Location Is Set For Another Country?

[HoodShine]

Hello! I just wanted to get rid of this popup that says what country the user is at. I use the Dawn theme.

My website is Mistmountainz.com/sale (/sale is the product page I direct people)
Also it is optimized for Mobile view and it only pops up when the visitor is outside the U.S (I used a VPN to Canada to show the popup)

[BSS-Commerce]

Hi @HoodShine

To hide the location popup follow these steps:

1. Open Edit code at Online store > Themes > Edit code:


2. Find the file “base.css” and paste the following code at the end of the file:

.recommendation-modal__container {
    display: none !important ;
}

I hope that it will work for your site.

[HoodShine]

Thanks!

[Swaggerlikeme]

will this work for debut theme as well ?

[BSS-Commerce]

Hi @Swaggerlikeme

We’re not sure it will work on the Debut theme because the class of the themes will be almost different. If you want to check if it works, please share your store link with us. Thanks

[Swaggerlikeme]

hi thanks for responding. So i have the following script to check if the recommendation-modal is open and not trigger unless its closed. Once the user interacts with the geolocation recommendation modal it reloads the page at which point it will check and confirm no modal then open.

It works well on chrome desktop and on my android phone using chrome i yet have to test it on iphone and other browsers. (most of the sites vistiors use mobile anyways) but the problem is the geolocation modal is for first time users from a foreign country. So i used my vpn and cleared browsing history and the page load speed is an issue because it takes longer then 10 seconds to load mainly waiting for the app to load. This maybe because its not my published theme and could be on a slower server. it ends up popping both modals at the same time because the delay runs out and will probably cause visitor to leave. is there a way to check if the geo location app is loaded then execute ? i know

window.addEventListener

and

window.onload

both wait for the images but im not sure if they wait for the app.

the current code is as follows:

// Get the modal
var slm_modal = document.getElementById("slm-myModal");

// Get the button that opens the modal
//var slm-btn = document.getElementById("slm-myBtn");

// Get the  element that closes the modal
var slm_span = document.getElementsByClassName("slm-close")[0];

var checks = 0;
var intervalID = setInterval(() => {
  if(!document.querySelector('.recommendation-modal__container') && ++checks > 10) {
    clearInterval(intervalID)
    setTimeout(() => {
      // trigger your own modal here
    //if (!sessionStorage.getItem('slm-shown-modal')){
    slm_modal.style.display = "block";
    //sessionStorage.setItem('slm-shown-modal', 'true');
  //}
    }, 1000)
    // 1000ms, (extra delay before your modal pops up)
  }
}, 1000)

// When the user clicks on  (x), close the modal
slm_span.onclick = function() {
  slm_modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == slm_modal) {
    slm_modal.style.display = "none";
  }
}
// close the modal when button is clicked
function slm_close() {
  slm_modal.style.display = "none";
}

just need a way to ensure the app is loaded.

site url is: https://xotv47r6dfei2kub-52123107526.shopifypreview.com

thanks and sorry for the long message. I hope its not too unclear and my limited knowledge has not confused you. if I am going about this wrong any alternative suggestions would be greatly appreciated.

[BSS-Commerce]

Thank you for your detailed information @Swaggerlikeme !

But your preview link has expired, can you kindly share a new link with us? We will check it for you.

[edjhlim]

Hi there,

Is there a way to change the colour of the button?

[Swaggerlikeme]

Hi @BSS-Commerce thanks for getting back here is a new link.

https://w06arrputv870kl3-52123107526.shopifypreview.com

thanks

RJ

[Haroonalam]

Thank you so much, after a lot of hustle it finally solved the problem.

[Aleksandar89]

This is not a good solution. I used something similar:

And it works with new versions of browsers (Safari, Chrome…) and devices but problem is related to the older versions of browsers and devices. Thing here is that is not enogh to hide just .recommendation-modal__container, because that div is wrapped by div without class, and we need to hide that div too, if not then we have issue on older device. Container is hidden but overlay stays and customers are not able to interact with page.

[Jack112]

Hi, I have this line keep showing on my page. Could you pls let me know how to delete it (as attached pictures). Many thanks> I use DAWN

.recommendation-modal__container { display: none !important ;

[ilyalistore]

Hi,

The code didn’t work for me. My problem is that in the mobile version country and region pop up automatically while I disabled it from the theme both header and footer.

Thanks,