Adjust design of popup form on mobile

Store Design
,

Topic summary

A user needs to hide a popup form’s left-side image on mobile devices while keeping it visible on desktop. The popup displays differently across devices, with the image appearing on both when it should only show on desktop.

Technical Solution Provided:

  • The popup was added via an app, requiring JavaScript rather than pure CSS
  • A custom JS class was shared to inject CSS into the app’s shadow DOM
  • Code targets the specific app container and applies display:none to the image element on screens ≤768px wide
  • Implementation: Add code to Assets > global.js file in theme editor

Key Details:

  • Solution uses setInterval to wait for popup element to load before injecting styles
  • Container ID must be customized per site (e.g., #app-embed-container-85724)
  • CSS class names may vary between implementations

Follow-up:
Another user encountered the same issue; adjusted code was provided with their specific container ID and CSS class names to match their site’s configuration.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

I’m currently trying to adjust the design of the popup that appears on my website. That’s how the popup currently looks like:

Desktop

Bildschirmfoto 2024-06-28 um 11.23.49.png
Bildschirmfoto 2024-06-28 um 11.23.49.png2706×1422 269 KB

Mobile

PHOTO-2024-06-28-11-25-13.jpg
PHOTO-2024-06-28-11-25-13.jpg946×2048 108 KB

The idea was that the picture on the left side only appears when customers are visiting the website via desktop.

When they visit it on mobile it shouldn’t appear.

Does anybody know which code I have to add where so that the picture doesn’t show anymore on mobile?

My shop URL: https://mylongevitylife.com/

Thank you very much!

2

Hi @Lara14 ,

I checked and it was added by app?

Therefore, pure CSS instructions are not supported, you can only check your app’s settings or add JS code to it.

Do you have experience with code?

3

Hey @namphan

yes I added it with an app. And I also have experiences in coding.

Do you know which code I would need to add to make the picture not visible on the mobile popup?

Thanks!

4

Hi @Lara14 ,

Please go to Actions > Edit code > Assets > global.js file and paste this at the bottom of the file:

class popupCustom {
  constructor() {
    const checkPopupCustom = setInterval(() => {
      const element = document.querySelector("#app-embed-container-85724");
      if (element) {
        const style = document.createElement('style');
        style.innerHTML = '@media screen and (max-width: 768px) {section._formContainer_whyqz_30._grid_whyqz_145._left_whyqz_192{display:block}._gridItem_whyqz_169._imageLoaded_whyqz_234{display:none}';
        element.shadowRoot.appendChild(style);
        clearInterval(checkPopupCustom);
      }
    }, 10)
  }
}

new popupCustom();
5

Hi Napham,
I have the same problem as Lara14. I tried addding the code above but it does not seem to work.
My site is https://zircular.dk

Should I change something in the code?

Cheers,

Kurt

6

Hi @zircular ,

Please change code:

class popupCustom {
  constructor() {
    const checkPopupCustom = setInterval(() => {
      const element = document.querySelector("#app-embed-container-326993");
      if (element) {
        const style = document.createElement('style');
        style.innerHTML = '@media screen and (max-width: 768px) {
        section._formContainer_stahb_30._grid_stahb_148._right_stahb_204{display:block}._gridItem_stahb_172._imageLoaded_stahb_237{display:none}';
        element.shadowRoot.appendChild(style);
        clearInterval(checkPopupCustom);
      }
    }, 10)
  }
}

new popupCustom();