Pop-up does not work on some cases

Rubik_Kubik · June 19, 2025, 3:56pm

Hi!
When clicked “Find my size” - all works fine on my developer’s store and the result should be as follows

But is doesn’t work properly on reviewer’s store. There should be a pop-up (or side-bar) window. Seems like it opens, but other parts/sections/divisions overlap it.

You can check how it incorrectly works on reviewer’s store here and console logs 023 – JT - JT - PH "CHECKOUT" and "CUSTOMERS"

I tried lots of things, but can’t replicate error or fix it. Seems like the issue is in animation, but not sure.
How can I replicate the problem from reviewer’s store? What is the problem and how can to fix it?
Feel free to ask any questions, thank you!

In .liquid file this part is responsible for openning modal window:

{% comment %} --- Modal --- {% endcomment %}
    <template x-if="isModalOpen">
      <div
        x-ref="modalOverlay"
        x-transition:enter="transition-opacity ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;"
        @click.self="closeModal()"
      >
        <div
          x-show="isModalOpen"
          x-transition:enter="transition ease-out duration-300 transform"
          x-transition:enter-start="translate-x-full"
          x-transition:enter-end="translate-x-0"
          x-transition:leave="transition ease-in duration-200 transform"
          x-transition:leave-start="translate-x-0"
          x-transition:leave-end="translate-x-full"
          @click.stop
          class="apisizely-modal-panel" 
        >
          {% comment %} --- Modal Header (Title & Close Button) --- {% endcomment %}
          <div class="apisizely-modal-header">
            <h2 x-text="modalTitle"></h2>
            <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">&times;</button>
          </div>

          {% comment %} --- Modal Body (Iframe Container) --- {% endcomment %}
          <div class="apisizely-modal-body">
            <iframe
             x-ref="measurerIframe"
             title="Apisizely Measurer"
             sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
            ></iframe>
          </div>
        </div>
      </div>
    </template>

Dev_Inflame · June 20, 2025, 7:56am

@Rubik_Kubik ,

Try to move modalOverlay code outside of section. Feel free to ask if any question

Rubik_Kubik · June 20, 2025, 9:01pm

@Dev_Inflame
Thank you! I tested direct editing of html section on reviewer’s page (since I can’t test on reviewer’s page in any other way) and it worked! On screenshots you can see what parts and where I have moved and the expected result.
But how can I change this section problem my .liquid script? I don’t control section from my liquid. It seems to be some user-defined “wrapper” (animation or something like that). Bellow is the extended code.

{% if chart_id_string != blank and chart_id_string.size > 0 and chart_id_string != '0'%}
...
...
...
  <div
    x-data="sizeRecommendation(
      '{{ linked_chart_id }}',
      '{{ shop.permanent_domain }}',
      '{{ final_measurer_url | escape }}',
      '{{ product.id }}',
      '{{ product.title | escape }}',
      '{{ current_customer_id }}',
      '{{ btn_font.family | escape }}',
      '{{ btn_font.style | default: 'normal' | escape }}',
      '{{ btn_font.weight | default: 'normal' | escape }}',
      '{{ recommendation_display_behavior }}'
    )"
    x-init="init()"
    class="apisizely-container"
    data-apisizely-initialized="true"
  >

    {% comment %} --- Main Display Area --- {% endcomment %}
    <div x-cloak>
      {% comment %} Loading State - Conditional Spinner {% endcomment %}
      <div x-show="isLoading" x-cloak style="min-height: {{ btn_font_size | times: 1.5 }}px; display: flex; align-items: center; justify-content: {{ alignment }};">
        {% if spinner_type == 'dots' %}
          <div class="apisizely-spinner-dots" role="status">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
            <span class="visually-hidden">{{ accessibility_loading_text }}</span>
          </div>
        {% else %}
          <div class="apisizely-spinner-border" role="status">
            <span class="visually-hidden">{{ accessibility_loading_text }}</span>
          </div>
        {% endif %}
      </div>

      {% comment %} State 1: Initial Button (No calculation attempted or state reset) {% endcomment %}
      <div x-show="!isLoading && !recommendationCalculated" x-cloak>
        <button type="button" @click="handleFindSizeClick()">
          {% if icon_selection == 'apisizely-default' %}
            <img
              src="{{ 'icon.svg' | asset_url }}"
              alt=""
              width="auto"
              height="{{ btn_font_size | times: 1.1 | round }}"
              loading="lazy"
            >
          {% elsif icon_selection == 'ruler-1' %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.17 5.83l-4-4a2 2 0 0 0-2.83 0L3.37 12.8a2 2 0 0 0 0 2.83l4 4a2 2 0 0 0 2.83 0L21.17 8.66a2 2 0 0 0 0-2.83zM8 18l-4-4M12 14l-4-4M16 10l-4-4M20 6l-4-4"/></svg>
          {% elsif icon_selection == 'custom' and custom_icon_image != blank %}
            <img
              src="{{ custom_icon_image | image_url: height: 30 }}"
              alt=""
              width="auto"
              height="{{ btn_font_size | times: 1.1 | round }}"
              loading="lazy"
            >
          {% endif %}
          <span>{{ btn_text }}</span>
        </button>
      </div>

      {% comment %} State 2: Recommendation Display (Calculated Successfully) {% endcomment %}
      <div x-show="!isLoading && recommendationCalculated && !error && userMeasurementsFromApi && recommendedSize" x-cloak>
        <span>
          {{ rec_prefix }}<span x-text="recommendedSize" style="font-weight: bold; color: {{ rec_color }};"></span>
        </span>
        <button type="button" class="edit-button" @click="openCorrectionModal()" title="{{ correct_measurements_text }}">
          {% if edit_icon_type == 'custom' and custom_edit_icon_image != blank %}
            <img
              src="{{ custom_edit_icon_image | image_url: height: 20 }}"
              alt="{{ correct_measurements_text }}"
              width="auto"
              height="{{ btn_font_size | round }}"
              loading="lazy"
            >
          {% else %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
          {% endif %}
        </button>
      </div>

    </div>

    {% comment %} --- Modal --- {% endcomment %}
    <template x-if="isModalOpen">
      <div
        x-ref="modalOverlay"
        x-transition:enter="transition-opacity ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;"
        @click.self="closeModal()"
      >
        <div
          x-show="isModalOpen"
          x-transition:enter="transition ease-out duration-300 transform"
          x-transition:enter-start="translate-x-full"
          x-transition:enter-end="translate-x-0"
          x-transition:leave="transition ease-in duration-200 transform"
          x-transition:leave-start="translate-x-0"
          x-transition:leave-end="translate-x-full"
          @click.stop
          class="apisizely-modal-panel" 
        >
          {% comment %} --- Modal Header (Title & Close Button) --- {% endcomment %}
          <div class="apisizely-modal-header">
            <h2 x-text="modalTitle"></h2>
            <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">&times;</button>
          </div>

          {% comment %} --- Modal Body (Iframe Container) --- {% endcomment %}
          <div class="apisizely-modal-body">
            <iframe
             x-ref="measurerIframe"
             title="Apisizely Measurer"
             sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
            ></iframe>
          </div>
        </div>
      </div>
    </template>
    {% comment %} Helper class for screen reader only text {% endcomment %}
    <style>.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }</style>
  </div>
{% endif %}```

Dev_Inflame · June 21, 2025, 6:04am

@Rubik_Kubik ,
Try with this solution.

Replace this portion of code :

<template x-if="isModalOpen">
  <div
    x-ref="modalOverlay"
    ...
  >
    ...
  </div>
</template>

With this :

<template x-if="isModalOpen">
  <div x-teleport="body">
    <div
      x-ref="modalOverlay"
      x-transition:enter="transition-opacity ease-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition-opacity ease-in duration-200"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
      style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;"
      @click.self="closeModal()"
    >
      <div
        x-show="isModalOpen"
        x-transition:enter="transition ease-out duration-300 transform"
        x-transition:enter-start="translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition ease-in duration-200 transform"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"
        @click.stop
        class="apisizely-modal-panel" 
      >
        {% comment %} --- Modal Header (Title & Close Button) --- {% endcomment %}
        <div class="apisizely-modal-header">
          <h2 x-text="modalTitle"></h2>
          <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">&times;</button>
        </div>

        {% comment %} --- Modal Body (Iframe Container) --- {% endcomment %}
        <div class="apisizely-modal-body">
          <iframe
            x-ref="measurerIframe"
            title="Apisizely Measurer"
            sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

Liam-Shopify · July 2, 2025, 1:25pm

@Rubik_Kubik - did the technique above help?

Rubik_Kubik · July 22, 2025, 12:19pm

Hi
No, the problem remains. But I managed to get reviewer’s store to manage problem faster. Do you have any other idea, how to fix the problem?
May be add “x-teleport=body” on the more higher levels?

<section id="shopify-section-template--24099689332758__17531849612e1c4226" class="shopify-section section"><div class="page-width scroll-trigger animate--slide-in"><div id="shopify-block-AN2xrQTZsQ29RZ3U1Q__apisizely_size_suggestions_size_suggestion_4fn743" class="shopify-block shopify-app-block">





  <style>
    [x-cloak] { display: none !important; }
    

    .apisizely-container,
    .apisizely-modal-content h2 {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
      font-style: normal;
      font-weight: 400;
    }
    .apisizely-container {
      font-size: 14px;
      color: #333333;
      text-align: left;
      margin-top: 10px;
    }
    .apisizely-container button {
       
         background: rgba(0,0,0,0);
         border: 1px solid rgba(51, 51, 51, 0.5);
         border-radius: 4px;
         padding: 5px 10px;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         color: #333333;
         font-size: inherit;
         font-family: inherit;
         font-style: inherit;
         font-weight: inherit;
       
    }
    .apisizely-container button svg,
    .apisizely-container button img {
       
         height: 1.1em;
         margin-right: 0.4em;
       
       width: auto;
       max-width: 1.5em;
       vertical-align: middle;
    }
     .apisizely-container .edit-button {
        background: none;
        border: none;
        padding: 0 0 0 5px;
        vertical-align: middle;
     }
     .apisizely-container .edit-button svg,
     .apisizely-container .edit-button img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-right: 0;
     }
     .apisizely-container .edit-button svg {
        stroke: #333333;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
     }
     .apisizely-container .edit-button img {
     }
     .apisizely-error {
        color: #FF0000;
        font-size: 0.9em;
        margin-top: 5px;
     }

     .apisizely-spinner-border {
       display: inline-block;
       border: 3px solid rgba(0, 0, 0, 0.1);
       border-left-color: #333333;
       border-radius: 50%;
       width: max(1.2em, 16.8px);
       height: max(1.2em, 16.8px);
       animation: apisizely-spin 0.8s linear infinite;
       vertical-align: middle;
     }

     .apisizely-spinner-dots {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: max(1.2em, 16.8px);
        vertical-align: middle;
     }
     .apisizely-spinner-dots > div {
        width: max(0.4em, 5.6px);
        height: max(0.4em, 5.6px);
        margin: 0 max(0.15em, 2.1px);
        background-color: #333333;
        border-radius: 50%;
        display: inline-block;
        animation: apisizely-bouncedelay 1.4s infinite ease-in-out both;
     }
     .apisizely-spinner-dots .bounce1 { animation-delay: -0.32s; }
     .apisizely-spinner-dots .bounce2 { animation-delay: -0.16s; }

     @keyframes apisizely-spin { to { transform: rotate(360deg); } }
     @keyframes apisizely-bouncedelay {
        0%, 80%, 100% { transform: scale(0); }
        40% { transform: scale(1.0); }
     }

    /* Helper classes for slide-in transition */
    .translate-x-full { transform: translateX(100%); }
    .translate-x-0 { transform: translateX(0%); }

    /* Styling for the slide-in panel */
    .apisizely-modal-panel {
      background-color: white;
      height: 100%;
      box-shadow: -2px 0 8px rgba(0,0,0,0.15);
      overflow: hidden; /* Changed from overflow-y: auto */
      position: relative; /* Ensures close button is positioned relative to this panel */
      display: flex;
      flex-direction: column;
      width: 50%; /* Default desktop width */
    }
    
    .apisizely-modal-header {
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .apisizely-modal-header h2 {
      margin: 0;
      font-size: 1.2em;
      color: #333;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
      font-style: normal;
      font-weight: 400;
    }

    .apisizely-modal-close-btn {
      background: none;
      border: none;
      font-size: 28px; /* Increased for better touch target */
      line-height: 1;
      cursor: pointer;
      color: #888;
      padding: 5px;
    }
    
    .apisizely-modal-body {
      flex-grow: 1;
      overflow-y: auto; /* Scroll within the body if content overflows */
      position: relative; /* For iframe positioning */
    }

    .apisizely-modal-body iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    @media screen and (max-width: 768px) {
      .apisizely-modal-panel {
        width: 100%; /* Full width on mobile */
      }
    }
  </style>

  <div x-data="sizeRecommendation(
      '12',
      'e0a5ac-d0.myshopify.com',
      'https://apisizely.com/measurer?coffe=0&amp;integr=0&amp;rulers=0&amp;hUnit=ft%2Bin&amp;wUnit=lbs&amp;extM=0',
      '10581142306838',
      '023',
      '',
      '-apple-system',
      'normal',
      '400',
      'auto'
    )" x-init="init()" class="apisizely-container" data-apisizely-initialized="true">

    
    <div>
      
      <div x-show="isLoading" style="min-height: 21px; display: none; align-items: center; justify-content: left;">
        
          <div class="apisizely-spinner-border" role="status">
            <span class="visually-hidden">Calculating size</span>
          </div>
        
      </div>

      
      <div x-show="!isLoading &amp;&amp; !recommendationCalculated">
        <button type="button" @click="handleFindSizeClick()">
          
            <img src="https://cdn.shopify.com/extensions/47db2c1e-a095-4f66-ad81-b2aceb05244e/apisizely-size-suggestions-105/assets/icon.svg" alt="" width="auto" height="15" loading="lazy">
          
          <span>Find Your Size</span>
        </button>
      </div>

      
      <div x-show="!isLoading &amp;&amp; recommendationCalculated &amp;&amp; !error &amp;&amp; userMeasurementsFromApi &amp;&amp; recommendedSize" style="display: none;">
        <span>
          Your best fit:<span x-text="recommendedSize" style="font-weight: bold; color: #008000;"></span>
        </span>
        <button type="button" class="edit-button" @click="openCorrectionModal()" title="Correct measurements">
          
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4"></path></svg>
          
        </button>
      </div>

    </div>

    
    <template x-if="isModalOpen">
      <div x-teleport="body">
        <div x-ref="modalOverlay" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;" @click.self="closeModal()">
          <div x-show="isModalOpen" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" @click.stop="" class="apisizely-modal-panel">
            
            <div class="apisizely-modal-header">
              <h2 x-text="modalTitle"></h2>
              <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">×</button>
            </div>

            
            <div class="apisizely-modal-body">
              <iframe x-ref="measurerIframe" title="Apisizely Measurer" sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"></iframe>
            </div>
          </div>
        </div>
      </div>
    </template><div x-teleport="body">
        <div x-ref="modalOverlay" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;" @click.self="closeModal()">
          <div x-show="isModalOpen" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" @click.stop="" class="apisizely-modal-panel">
            
            <div class="apisizely-modal-header">
              <h2 x-text="modalTitle"></h2>
              <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">×</button>
            </div>

            
            <div class="apisizely-modal-body">
              <iframe x-ref="measurerIframe" title="Apisizely Measurer" sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads" src="https://apisizely.com/measurer?coffe=0&amp;integr=0&amp;rulers=0&amp;hUnit=ft%2Bin&amp;wUnit=lbs&amp;extM=0&amp;t=1753186114244"></iframe>
            </div>
          </div>
        </div>
      </div><div x-teleport="body">
        <div x-ref="modalOverlay" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;" @click.self="closeModal()">
          <div x-show="isModalOpen" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" @click.stop="" class="apisizely-modal-panel">
            
            <div class="apisizely-modal-header">
              <h2 x-text="modalTitle"></h2>
              <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">×</button>
            </div>

            
            <div class="apisizely-modal-body">
              <iframe x-ref="measurerIframe" title="Apisizely Measurer" sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"></iframe>
            </div>
          </div>
        </div>
      </div><div x-teleport="body">
        <div x-ref="modalOverlay" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: flex-end; z-index: 9999;" @click.self="closeModal()">
          <div x-show="isModalOpen" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" @click.stop="" class="apisizely-modal-panel">
            
            <div class="apisizely-modal-header">
              <h2 x-text="modalTitle"></h2>
              <button type="button" @click="closeModal()" class="apisizely-modal-close-btn">×</button>
            </div>

            
            <div class="apisizely-modal-body">
              <iframe x-ref="measurerIframe" title="Apisizely Measurer" sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"></iframe>
            </div>
          </div>
        </div>
      </div>
    
    <style>.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }</style>
  </div>



<script defer="" src="https://cdn.shopify.com/extensions/47db2c1e-a095-4f66-ad81-b2aceb05244e/apisizely-size-suggestions-105/assets/size_recommendation.js"></script>
<script defer="" src="https://cdn.shopify.com/extensions/47db2c1e-a095-4f66-ad81-b2aceb05244e/apisizely-size-suggestions-105/assets/alpine.min.js"></script>


</div>
</div>


</section>

Rubik_Kubik · July 22, 2025, 12:27pm

‘May be add “x-teleport=body” on the more higher levels?’
UPD: tried it, doesn’t worked

Rubik_Kubik · July 22, 2025, 12:52pm

Here is the store and product, that should work correctly.
But modal window still doesn’t work properly

Dev_Inflame · July 23, 2025, 11:21am

@Rubik_Kubik ,

I can fix the issue you’re facing, but I will need access to your store. If you’re comfortable with that, I’d be happy to take care of it for you

Topic		Replies	Views
Prestige Theme \| Implement Size Chart Pop-up in a Custom Section Online Store and Theme Development liquid , theme-editor	0	91	March 20, 2025
LoadingDialog overlay blocks clicks on the Shopify Cheat Sheet page Community Feedback	1	29	September 16, 2025
There is an issue with polaris website Popover and Tooltip components that do not work when Modal Component is in full screen state Shopify App Store dev-stores	15	416	February 21, 2025
Trigger Modal Auto - Checkout UI Extensoin Extensions checkout-ui-ext	10	421	December 2, 2025
Display modals after purchase Changelog	0	25	April 26, 2025

Pop-up does not work on some cases

Related topics