Newsletter pop-up keeps reappearing every time I change pages, even after I’ve closed it

IvoireSkincare · ‎05-15-2025

Hi, this is the code from my pop up and my theme.liquid if it helps!

{% if settings.newsletter_popup_image != blank %}
<div class="popup__image">
{%
render 'rimg',
img: settings.newsletter_popup_image,
size: '1000x',
lazy: true,
crop: center,
canvas: true
%}
</div>
{% endif %}

<div class="popup__content text-align-center">
{% if settings.newsletter_popup_title != blank %}
<h2 class="popup__heading">{{ settings.newsletter_popup_title }}</h2>
{% endif %}

{% if settings.newsletter_popup_text != blank %}
<div class="popup__text">{{ settings.newsletter_popup_text }}</div>
{% endif %}

{% if settings.newsletter_popup_form == true %}
<div class="popup__text-newsletter">
{% render 'newsletter' %}
</div>
{% endif %}

{% if settings.newsletter_popup_link != blank and settings.newsletter_popup_link_text != blank %}
<div class="popup__link-container">
<a class="popup__link" href="{{ settings.newsletter_popup_link }}">
{{ settings.newsletter_popup_link_text }}
</a>
</div>
{% endif %}

</div>
</aside>

and this is the code from my theme.liquid:

<!DOCTYPE html>
<html lang="{{ request.locale.iso_code }}" class="no-js">
<head>
<script>
window.Store = window.Store || {};
window.Store.id = {{ shop.id }};
</script>
<meta charset="utf-8">
<meta http-equiv="cleartype" content="on">
<meta name="robots" content="index,follow">

{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %}{% endif %}
<title>
{% if template contains "index" %}
{{ page_title }}
{% else %}
{{ page_title }}
{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags }}{% endif %}
{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}{% endif %}
{% unless page_title contains shop.name %} - {{ shop.name }}{% endunless %}
{% endif %}
</title>

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags | escape }}.{% endif %}{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}.{% endif %}" />
{% endif %}

{% render 'social-meta-info' %}

{% if collection.previous_product %}
<link rel="prev" href="{{ collection.previous_product }}">
{% endif %}
{% if collection.next_product %}
<link rel="next" href="{{ collection.next_product }}">
{% endif %}

{% if settings.favicon != nil %}
<link rel="shortcut icon" type="image/x-icon" href="{{ settings.favicon | img_url: '180x180' }}">
{% else %}
<link rel="shortcut icon" type="image/x-icon" href="{{ 'favicon.png' | asset_url }}">
{% endif %}

{% if template contains 'customer' %}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer></script>
<script src="{{ 'customer_area.js' | shopify_asset_url }}" defer></script>
{% endif %}

{% if settings.show_shipping_calculator %}
<script src="{{ '/services/javascripts/countries.js' }}" defer></script>
{% endif %}

<body
class="{{ template | replace: '.', '-' | handle }}"
data-money-format="
{%- if settings.currency_format == 'money_with_currency_format' -%}
{{ shop.money_with_currency_format | strip_html }}
{%- else -%}
{{ shop.money_format | strip_html }}
{%- endif -%}"
style="--full-header-height: 0;"
data-active-currency="{{ cart.currency.iso_code }}"
data-shop-url="{{ shop.url }}"
data-predictive-search="{{ settings.enable_autocomplete }}"
>
<div style="--background-color: {{ settings.header_bg_color }}">
{% render 'age-gate', id: 'page', sections: content_for_layout %}
</div>

<a class="skip-to-main" href="#main-content">{{ 'general.accessibility.skip_to_content' | t }}</a>

{% comment %}Icon star SVG{% endcomment %}
<svg class="icon-star-reference" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="3 3 17 17" fill="none">
<symbol id="icon-star">
<rect class="icon-star-background" width="20" height="20" fill="currentColor"/>
<path d="M10 3L12.163 7.60778L17 8.35121L13.5 11.9359L14.326 17L10 14.6078L5.674 17L6.5 11.9359L3 8.35121L7.837 7.60778L10 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</symbol>
<clipPath id="icon-star-clip">
<path d="M10 3L12.163 7.60778L17 8.35121L13.5 11.9359L14.326 17L10 14.6078L5.674 17L6.5 11.9359L3 8.35121L7.837 7.60778L10 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</clipPath>
</svg>

{% section 'header' %}

<main id="main-content" class="main-content--section-headings-{{ settings.section_heading_position }}" role="main">
<div class="main__wrapper">
{{ content_for_layout }}
</div>
</main>

{% section 'footer' %}
{% if settings.newsletter_popup %}{% render 'newsletter-popup' %}{% endif %}
{% if settings.size_chart != blank and template contains 'product' %}{% render 'size-chart-popup' %}{% endif %}
{% render 'modal' %}
{% render 'gallery-modal' %}
{% render 'predictive-search' %}
{% if settings.cart_action == 'ajax' %}{% render 'cart-drawer' %}{% endif %}

// Gestion popup newsletter avec localStorage
document.addEventListener("DOMContentLoaded", function () {
const popup = document.querySelector('.popup-newsletter');
const closeBtn = popup?.querySelector('.close-popup');

if (!popup || !closeBtn) return;

const isClosed = localStorage.getItem('newsletterPopupClosed');

if (!isClosed) {
popup.style.display = 'block';

closeBtn.addEventListener('click', function () {
popup.style.display = 'none';
localStorage.setItem('newsletterPopupClosed', 'true');
});

document.addEventListener('click', function(event) {
if (!popup.contains(event.target) && event.target !== closeBtn) {
popup.style.display = 'none';
localStorage.setItem('newsletterPopupClosed', 'true');
}
});
}
});
</script>

collapsibles.forEach(collapsible => {
const button = collapsible.querySelector(".collapsible-btn");
const content = collapsible.querySelector(".collapsible-content");

if (!button || !content) return;

// Évite de dupliquer les listeners
if (!button.dataset.listenerAdded) {
button.addEventListener("click", function () {
collapsible.classList.toggle("active");
content.style.display = content.style.display === "block" ? "none" : "block";
});
button.dataset.listenerAdded = true;
}
});
}

document.addEventListener("DOMContentLoaded", initCollapsibles);
document.addEventListener("shopify:section:load", initCollapsibles);
document.addEventListener("shopify:section:select", initCollapsibles);
</script>

</body>
</html>

mageplaza-cs · ‎05-19-2025

Hi @IvoireSkincare ,

I am from Mageplaza - Shopify solution expert.

Your JavaScript is targeting the wrong popup class, so the close state is never saved properly.

Specific issue:
In your JavaScript code (at the end of theme.liquid), you have:

const popup = document.querySelector('.popup-newsletter');
const closeBtn = popup?.querySelector('.close-popup');

But in your actual HTML for the popup, you wrote:

<aside class="newsletter-popup ...">
<button class="popup__close" data-popup-close>

So:

.popup-newsletter doesn’t exist -> popup is null
As a result, the script does nothing, the popup is never hidden, and the closed state is never saved.

You just need to update the selectors to match the actual class names. Specifically, change this:

const popup = document.querySelector('.newsletter-popup');
const closeBtn = popup?.querySelector('[data-popup-close]');

Updated working script:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const popup = document.querySelector('.newsletter-popup');
  const closeBtn = popup?.querySelector('[data-popup-close]');

  if (!popup || !closeBtn) return;

  const isClosed = localStorage.getItem('newsletterPopupClosed');

  if (!isClosed) {
    popup.classList.add('is-visible'); // Or use popup.style.display = 'block' if necessary

    closeBtn.addEventListener('click', function () {
      popup.classList.remove('is-visible'); // Or use style.display = 'none'
      localStorage.setItem('newsletterPopupClosed', 'true');
    });

    document.addEventListener('click', function(event) {
      if (!popup.contains(event.target) && event.target !== closeBtn) {
        popup.classList.remove('is-visible');
        localStorage.setItem('newsletterPopupClosed', 'true');
      }
    });
  }
});
</script>

Make sure you have CSS like .newsletter-popup.is-visible { display: block; } if you’re using classList.add.

Please let me know if it works as expected!

Best regards!

Mageplaza | Top-Rated Shopify Agency | Trusted by 230,000+ worldwide merchants

If our suggestion works for you, please give it a Like or mark it as a Solution!

Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com

Newsletter pop-up keeps reappearing every time I change pages, even after I’ve closed it

Newsletter pop-up keeps reappearing every time I change pages, even after I’ve closed it

Community Blog Articles