Modal Setting

Elements
1

I am trying to add a modal which I will reuse for offers throughout year on my store. I can do modal and I can make it pop up. What I am struggling with is I just want it to pop up once per visit and not every time someone goes from one page back to home again.

Is there a setting or a piece of HTML code I need to make it appear once only per visit? TIA

@dan @ben @handshaper @upssjw

2

Yes you can do this with a little script and a little inspector work:

This script goes in “head end” of the pages code editor.

<script>
(function () {
  const MODAL_ID = "rwCE065B09_D924_438B_8C61_8F18EB615320";
  const TRIGGER_ID = "mymodal";
  const KEY = "modal_last_shown_" + MODAL_ID;
  const COOLDOWN_DAYS = 7;
  function allowed() {
    const last = parseInt(localStorage.getItem(KEY) || "0", 10);
    if (!last) return true;
    const days = (Date.now() - last) / (1000 * 60 * 60 * 24);
    return days >= COOLDOWN_DAYS;
  }
  function hideDialog() {
    const dlg = document.querySelector(`[data-modal-id="${MODAL_ID}"]`);
    if (dlg) {
      dlg.style.display = "none";
      dlg.setAttribute("aria-hidden", "true");
    }
    if (document.documentElement) document.documentElement.style.overflow = "";
    if (document.body) document.body.style.overflow = "";
  }
  function neutralizeTrigger() {
    const trigger = document.getElementById(TRIGGER_ID);
    if (trigger) trigger.removeAttribute("x-init");
  }
  window.addEventListener("open-modal", (e) => {
    if (e?.detail?.id !== MODAL_ID) return;
    if (!allowed()) {
      e.stopImmediatePropagation?.();
      e.stopPropagation?.();
      hideDialog();
      neutralizeTrigger();
      return;
    }
    localStorage.setItem(KEY, String(Date.now()));
  }, true);
  function enforceIfBlocked() {
    if (!allowed()) {
      neutralizeTrigger();
      hideDialog();
    }
  }
  enforceIfBlocked();
  document.addEventListener("DOMContentLoaded", enforceIfBlocked);
  window.addEventListener("load", enforceIfBlocked);
  const mo = new MutationObserver(enforceIfBlocked);
  mo.observe(document.documentElement || document, { childList: true, subtree: true });
})();
</script>

const MODAL_ID = "rwCE065B09_D924_438B_8C61_8F18EB615320";

You will need to change this (const MODAL_ID) :index_pointing_up: to that of your modal, this is not one you can set in advanced setting, you need to inspect the page with teh modal open, right click the modal background > inspect element, you are looking for the data-modal-id

CleanShot 2025-12-12 at 12 .42.29@2x
CleanShot 2025-12-12 at 12 .42.29@2x3360Ă—284 117 KB

With the modal selected inside elements add the id “mymodal” in advanced setting to match the script.

in the script you can change the number of cooldown days before the visitor will see the modal again.

const COOLDOWN_DAYS = 7;

If you want to re-set it for your own testing, in the inspector go to storage > local storage, and delete this key

CleanShot 2025-12-12 at 12 .48.10@2x
CleanShot 2025-12-12 at 12 .48.10@2x1946Ă—492 52.7 KB

2 Likes
3

Gary wow the simple route! :slight_smile: :slight_smile: :slight_smile: I will have alook at this over weekend. as always I’m indebted to your prompt response. Just been using a little app called “Rapid Icons” which I’ve used for years! Ever heard of it? :slight_smile: :slight_smile: :slight_smile:

4

Vaguely remember that one. It’s still working on the current OS then :exploding_head:

I think it was Yosemite I released that.

5

Yes I’m on ios26! Your work lasts forever! :slight_smile: