popup.liquid

<!-- Theme.liquid -->
  {% if settings.enable-popup %}
    {% include 'subscribe' %}
  {% endif %}


<!-- snippets/subscribe.liquid -->
<div class="subscribe-popup mfp-hide">

  <h3>{{settings.subscribe-heading}}</h3>

  {{settings.subscribe-text}}

  {% form 'customer' %}
    {% if form.posted_successfully? %}
      <p><em>{{ 'general.newsletter_form.success_text' | t }}</em></p>
    {% elsif form.errors %}
      {% for field in form.errors %}
        <p><em>{{ field }} - {{ form.errors.messages[field] }}</em></p>
      {% endfor %}
    {% endif %}

    <input type="hidden" name="contact[tags]" value="prospect,newsletter"/>

    <div class="input-row">
      <input type="hidden" name="challenge" value="false" />
      <input type="email" class="contact_email" name="contact[email]" required placeholder="Email" />
      <input type='submit' class="action_button sign_up" value="Subscribe" />
    </div>
  {% endform %}
</div>

<!-- JS -->
<script>
{% if settings.enable-popup %}
    function subscribePop() {
      $.magnificPopup.open({
        items: {
          src: '.subscribe-popup', 
          type: 'inline'
        }
      });
    }
    if($(window).width() > 500) {
      var check_cookie = Cookies.get('subscribe_popup');
      if(check_cookie == null){
        Cookies.set('subscribe_popup', { expires: {{ settings.cookie-expiry }} });
        setTimeout(function(){
          subscribePop();
        }, {{ settings.subscribe-delay | times: 1000 }});
      }
    }
  {% endif %}

</script>


<!-- settings_schema.json (wihtout schema tags) -->
{% schema %}


{
    "name": "Newsletter",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable-popup",
        "label": "Enable Popup"
      },
      {
        "type": "text",
        "id": "subscribe-heading",
        "label": "Popup Heading",
        "default": "Subscribe to our newsletter!"
      },
      {
        "type": "richtext",
        "id": "subscribe-text",
        "label": "Popup Text"
      },
      {
        "type": "color",
        "id": "popup-background",
        "label": "Popup Background Color",
        "default": "#ffffff"
      },
      {
        "type": "text",
        "id": "subscribe-delay",
        "label": "Popup Delay (seconds)"
      },
      {
        "type": "text",
        "id": "cookie-expiry",
        "label": "Cookie Expiry (days)",
        "info": "How often you want people to see the popup."
      }
    ]
  }

{% endschema %}



<!-- styles -->

<style>

.subscribe-popup {
  position: relative;
  background: {{ settings.popup-background }};
  padding: 50px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
  .mfp-close {
    margin: 0;
  }
  h3 {
    margin-bottom: 20px;
  }
  h3 + p {
    margin-bottom: 40px;
  }
  .input-row {
    display: flex;
    .contact_email {
      margin-right: 5px;
      flex: 1;
    }
    .sign_up {
      background: black;
      color: white;
      font-style: normal;
    }
  }
  @media (max-width: 321px) {
    .input-row {
      display: block;
      .contact_email {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
      }
      .sign_up {
        width: 100%;
      }
    }
  }
}
.mfp-bg {
  background: #0b0b0b;
  opacity: 0.5;
}

</style>

Hello, how do you use this?