Issue with cookie across domains

Question

I'm working on a Shopify project and I've created a pop up that shows, when the page is loaded and asks the user to chose between the US and UK website.

Once the user clicks on one of the options the pop up either closes (UK) or redirects to the US site. This is then stored in a cookie, so when they visit the site again, they're redirected again/ the popup doesn't show anymore.

This is the code:

<div class="modal fade" id="storeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="subscription-grid">
          <div class="grid__item">
            <button type="button" class="close" id="subscription-close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <div class="store_popup_heading">
              <h2>TEXT</h2>
            </div>
            <div class="store_popup_content">
              <a href="#" class="store-btn" id="uk-store" onClick="checkCookie2();">text</a>
              <a href="#" class="store-btn" id="us-store" onClick="checkCookieUS();">text</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  function checkCookieUS() {
    Cookies.set('storelocation', 'true', {
      expires: 7
    });
    Cookies.set('storelocationUS', 'true', {
      expires: 7
    });
  }
</script>
<script>
  var delayInMilliseconds = 2000
  var storelocate = Cookies.get('storelocation');
  var storeUS = Cookies.get('storelocationUS');

  if (storelocate) {
    document.getElementById("storeModal").style.display = "none";
  } else {
    setTimeout(function() {
      document.getElementById("storeModal").style.display = "block";
    }, delayInMilliseconds);
  }

  if (storeUS) {
    window.location.href = "https://us.store.com/";
  }
</script>

Now this works, but my issue is that there's a link on the US site that says "Go back to UK Site", so if the user clicks that they need to be able to go back to the UK site. However, with my current setup they're obviously redirected back to the US site once they go on the UK one.

So I've tried setting another cookie and condition. So if the user clicks on the return link this cookie is set and if both the storechange one and the storeUS cookie exist it's supposed to remove the storeUS cookie.

This is the code:

<script>
function checkCookieChange() {
Cookies.set('storelocationChange', 'true', { expires: 7 });
};
</script>
<script>
var delayInMilliseconds = 1000
var storelocate= Cookies.get('storelocation');
var storeUS= Cookies.get('storelocationUS');
var storeChange= Cookies.get('storelocationChange');
if (storelocate) {
  document.getElementById("storeModal").style.display = "none";
}
else {
  setTimeout(function() {
  document.getElementById("storeModal").style.display = "block";
  }, delayInMilliseconds);
}

if (storeUS){
  window.top.location.href = "https://us.store.com/" + window.location.pathname;
}
else if (storeUS && storeChange ) {
    $.removeCookie("storelocationUS");
}
</script>

Now, the problem with this is that it does set the storeChange cookie, but only on the https://us.store.com/ site, so obviously it doesn't register that cookie once the user was redirected to the https://wwww.store.com/ site. So my question is- is there a way to set the storeChange cookie for both domains in this scenario? Or can anybody think of a bettter way of doing this altogether?