Where you can achieve what your competitors can’t

Add Email Sign Up Pop Up on Shopify

This custom code is completely free to use, but please note it does not include 1-on-1 technical support. If you need a bespoke, done-for-you solution to customize your Shopify store, my team is here to help! Head to my channel homepage and use the link in the trailer to reach out.

{%- comment -%}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{%- endcomment -%}

{%- liquid
  assign onhow_studio_wrapper = section.settings.onhow_studio_core_logic
  assign onhow_studio_layout = section.settings.onhow_studio_layout_style
  assign onhow_studio_size = section.settings.onhow_studio_popup_width
  assign onhow_studio_show_img = section.settings.onhow_studio_show_image
  assign onhow_studio_img = section.settings.onhow_studio_image
-%}

<style>
  .onhow-studio-section-wrapper-{{ onhow_studio_wrapper }} *,
  .onhow-studio-section-wrapper-{{ onhow_studio_wrapper }} *::before,
  .onhow-studio-section-wrapper-{{ onhow_studio_wrapper }} *::after {
    box-sizing: border-box;
  }

  .onhow-studio-section-wrapper-{{ onhow_studio_wrapper }} p,
  .onhow-studio-section-wrapper-{{ onhow_studio_wrapper }} h1,
  .onhow-studio-section-wrapper-{{ onhow_studio_wrapper }} h2,
  .onhow-studio-section-wrapper-{{ onhow_studio_wrapper }} ul {
    margin: 0;
    padding: 0;
  }

  .onhow-studio-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .onhow-studio-popup-backdrop.onhow-studio-popup-active {
    display: block;
    opacity: 1;
  }

  .onhow-studio-popup-container {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .onhow-studio-popup-container.onhow-studio-popup-active {
    display: flex;
    opacity: 1;
  }

  .onhow-studio-popup-modal {
    background: var(--onhow-studio-bg);
    border-radius: 7px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }

  .onhow-studio-popup-size-small {
    max-width: 500px;
  }

  .onhow-studio-popup-size-medium {
    max-width: 650px;
  }

  .onhow-studio-popup-size-large {
    max-width: 800px;
  }

  .onhow-studio-popup-container.onhow-studio-popup-active .onhow-studio-popup-modal {
    transform: scale(1);
  }

  .onhow-studio-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: var(--onhow-studio-popup-close-bg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .onhow-studio-popup-close:hover {
    filter: brightness(1.05);
    transform: scale(1.1);
  }

  .onhow-studio-popup-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--onhow-studio-popup-close-icon);
    stroke-width: 2;
  }

  .onhow-studio-popup-content {
    overflow-y: auto;
    max-height: 90vh;
  }

  .onhow-studio-popup-layout-horizontal .onhow-studio-popup-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .onhow-studio-popup-image-container {
    position: relative;
    overflow: hidden;
  }

  .onhow-studio-popup-layout-horizontal .onhow-studio-popup-image-container {
    height: 100%;
    min-height: 400px;
  }

  .onhow-studio-popup-layout-vertical .onhow-studio-popup-image-container {
    height: 250px;
  }

  .onhow-studio-popup-layout-background .onhow-studio-popup-image-container {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .onhow-studio-popup-layout-background .onhow-studio-popup-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  .onhow-studio-popup-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .onhow-studio-popup-text-content {
    padding: 48px 40px;
    position: relative;
  }

  .onhow-studio-popup-layout-background .onhow-studio-popup-text-content {
    position: relative;
    z-index: 1;
  }

  .onhow-studio-popup-heading {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--onhow-studio-popup-heading);
    line-height: 1.2;
    font-family: var(--font-heading-family);
    text-align: center;
  }

  .onhow-studio-popup-heading.onhow-studio-popup-h0 {
    font-size: 40px;
  }

  .onhow-studio-popup-heading.onhow-studio-popup-h1 {
    font-size: 32px;
  }

  .onhow-studio-popup-heading.onhow-studio-popup-h2 {
    font-size: 24px;
  }

  .onhow-studio-popup-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--onhow-studio-text);
    margin: 0 0 32px 0;
    text-align: center;
  }

  .onhow-studio-popup-description p {
    margin: 0 0 12px 0;
  }

  .onhow-studio-popup-description p:last-child {
    margin-bottom: 0;
  }

  .onhow-studio-popup-form {
    margin-top: 32px;
  }

  .onhow-studio-popup-form-wrapper {
    position: relative;
  }

  .onhow-studio-popup-field {
    position: relative;
    margin-bottom: 16px;
  }

  .onhow-studio-popup-input {
    width: 100%;
    padding: 16px 56px 16px 16px;
    border: 2px solid var(--onhow-studio-text);
    border-radius: 8px;
    font-size: 16px;
    color: var(--onhow-studio-popup-heading);
    background: var(--onhow-studio-bg);
    transition: all 0.2s;
    font-family: var(--font-body-family);
  }

  .onhow-studio-popup-input:focus {
    outline: none;
    border-color: var(--onhow-studio-popup-btn-bg);
  }

  .onhow-studio-popup-input::placeholder {
    color: var(--onhow-studio-text);
  }

  .onhow-studio-popup-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--onhow-studio-text);
    font-size: 16px;
    pointer-events: none;
    transition: all 0.2s;
  }

  .onhow-studio-popup-input:focus + .onhow-studio-popup-label,
  .onhow-studio-popup-input:not(:placeholder-shown) + .onhow-studio-popup-label {
    top: -10px;
    left: 12px;
    font-size: 12px;
    background: var(--onhow-studio-bg);
    padding: 0 4px;
    color: var(--onhow-studio-popup-btn-bg);
  }

  .onhow-studio-popup-submit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--onhow-studio-popup-btn-bg);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .onhow-studio-popup-submit:hover {
    filter: brightness(0.85);
    transform: translateY(-50%) scale(1.05);
  }

  .onhow-studio-popup-submit svg {
    width: 20px;
    height: 20px;
    fill: var(--onhow-studio-popup-btn-text);
  }

  .onhow-studio-popup-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
  }

  .onhow-studio-popup-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .onhow-studio-popup-message-error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
  }

  .onhow-studio-popup-message-error svg {
    fill: #991B1B;
  }

  .onhow-studio-popup-message-success {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
  }

  .onhow-studio-popup-message-success svg {
    fill: #065F46;
  }

  @media (max-width: 768px) {
    .onhow-studio-popup-layout-horizontal .onhow-studio-popup-content {
      grid-template-columns: 1fr;
    }

    .onhow-studio-popup-layout-horizontal .onhow-studio-popup-image-container {
      height: 200px;
      min-height: 200px;
    }

    .onhow-studio-popup-text-content {
      padding: 32px 24px;
    }

    .onhow-studio-popup-heading {
      font-size: 24px;
    }

    .onhow-studio-popup-heading.onhow-studio-popup-h0 {
      font-size: 28px;
    }

    .onhow-studio-popup-heading.onhow-studio-popup-h1 {
      font-size: 24px;
    }

    .onhow-studio-popup-heading.onhow-studio-popup-h2 {
      font-size: 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .onhow-studio-popup-backdrop,
    .onhow-studio-popup-container,
    .onhow-studio-popup-modal,
    .onhow-studio-popup-close,
    .onhow-studio-popup-input,
    .onhow-studio-popup-submit {
      transition: none;
    }
  }
</style>

<div class="onhow-studio-section-wrapper-{{ onhow_studio_wrapper }}">
  <div class="onhow-studio-popup-backdrop"
       id="onhow-studio-popup-backdrop-{{ section.id }}"
       data-popup-id="{{ section.id }}"></div>

  <div class="onhow-studio-popup-container"
       id="onhow-studio-popup-{{ section.id }}"
       role="dialog"
       aria-modal="true"
       aria-labelledby="onhow-studio-popup-title-{{ section.id }}"
       data-popup-id="{{ section.id }}">

    <div class="onhow-studio-popup-modal onhow-studio-popup-layout-{{ onhow_studio_layout }} onhow-studio-popup-size-{{ onhow_studio_size }}"
         style="--onhow-studio-bg: {{ section.settings.onhow_studio_bg_color }}; --onhow-studio-text: {{ section.settings.onhow_studio_text_color }}; --onhow-studio-popup-heading: {{ section.settings.onhow_studio_color_heading }}; --onhow-studio-popup-btn-bg: {{ section.settings.onhow_studio_color_button_bg }}; --onhow-studio-popup-btn-text: {{ section.settings.onhow_studio_color_button_text }}; --onhow-studio-popup-close-bg: {{ section.settings.onhow_studio_color_close_bg }}; --onhow-studio-popup-close-icon: {{ section.settings.onhow_studio_color_close_icon }};">
      <button type="button"
              class="onhow-studio-popup-close"
              aria-label="Close popup"
              data-popup-close="{{ section.id }}">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M18 6L6 18M6 6l12 12"/>
        </svg>
      </button>

      <div class="onhow-studio-popup-content">
        {%- if onhow_studio_img != blank and onhow_studio_show_img -%}
          <div class="onhow-studio-popup-image-container">
            {{- onhow_studio_img | image_url: width: 800 | image_tag:
              loading: 'lazy',
              class: 'onhow-studio-popup-image',
              sizes: '(max-width: 768px) 100vw, 50vw',
              widths: '400,600,800,1200'
            -}}
          </div>
        {%- endif -%}

        <div class="onhow-studio-popup-text-content">
          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'heading' -%}
                <h2 id="onhow-studio-popup-title-{{ section.id }}"
                    class="onhow-studio-popup-heading onhow-studio-popup-{{ block.settings.onhow_studio_heading_size }}"
                    {{ block.shopify_attributes }}>
                  {{- block.settings.onhow_studio_heading | escape -}}
                </h2>

              {%- when 'paragraph' -%}
                <div class="onhow-studio-popup-description" {{ block.shopify_attributes }}>
                  {{- block.settings.onhow_studio_text -}}
                </div>

              {%- when 'email_form' -%}
                <div class="onhow-studio-popup-form" {{ block.shopify_attributes }}>
                  {%- form 'customer', class: 'onhow-studio-popup-form-wrapper' -%}
                    <input type="hidden" name="contact[tags]" value="{{ block.settings.onhow_studio_custom_tag | escape }}">

                    <div class="onhow-studio-popup-field">
                      <input id="onhow-studio-popup-email-{{ section.id }}"
                             type="email"
                             name="contact[email]"
                             class="onhow-studio-popup-input"
                             value="{{ form.email }}"
                             placeholder=" "
                             aria-required="true"
                             autocorrect="off"
                             autocapitalize="off"
                             autocomplete="email"
                             {%- if form.errors %}
                               autofocus
                               aria-invalid="true"
                               aria-describedby="onhow-studio-popup-error-{{ section.id }}"
                             {%- elsif form.posted_successfully? %}
                               aria-describedby="onhow-studio-popup-success-{{ section.id }}"
                             {%- endif %}
                             required>

                      <label class="onhow-studio-popup-label"
                             for="onhow-studio-popup-email-{{ section.id }}">
                        {{- block.settings.onhow_studio_email_placeholder | escape -}}
                      </label>

                      <button type="submit"
                              class="onhow-studio-popup-submit"
                              name="commit"
                              aria-label="{{ block.settings.onhow_studio_submit_label | escape }}">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                          <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                      </button>
                    </div>

                    {%- if form.errors -%}
                      <div class="onhow-studio-popup-message onhow-studio-popup-message-error"
                           id="onhow-studio-popup-error-{{ section.id }}">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                        </svg>
                        <span>
                          {{ form.errors.translated_fields.email | capitalize }}
                          {{ form.errors.messages.email }}
                        </span>
                      </div>
                    {%- endif -%}

                    {%- if form.posted_successfully? -%}
                      <div class="onhow-studio-popup-message onhow-studio-popup-message-success"
                           id="onhow-studio-popup-success-{{ section.id }}"
                           tabindex="-1">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                        </svg>
                        <span>{{- block.settings.onhow_studio_success_message | escape -}}</span>
                      </div>
                    {%- endif -%}
                  {%- endform -%}
                </div>

            {%- endcase -%}
          {%- endfor -%}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function() {
  const onhowStudioCredit = atob("RGVzaWduZWQgYnkgT05IT1cgU3R1ZGlvIC0gU3Vic2NyaWJlIQ==");
  console.log(`%c ${onhowStudioCredit}`, 'background: #222; color: #00ff00; padding: 4px; border-radius: 4px;');

  var sectionId = '{{ section.id }}';
  var triggerDelay = {{ section.settings.onhow_studio_trigger_delay }} * 1000;
  var displayFrequency = '{{ section.settings.onhow_studio_display_frequency }}';
  var enableBackdropClose = {{ section.settings.onhow_studio_enable_backdrop_close }};

  var storageKeys = {
    dismissed: 'onhow_studio_popup_dismissed_' + sectionId,
    shown: 'onhow_studio_popup_shown_' + sectionId,
    formSubmitted: 'onhow_studio_popup_form_submitted_' + sectionId
  };

  var popup = document.getElementById('onhow-studio-popup-' + sectionId);
  var backdrop = document.getElementById('onhow-studio-popup-backdrop-' + sectionId);
  var closeBtn = popup.querySelector('[data-popup-close="' + sectionId + '"]');
  var form = popup.querySelector('.onhow-studio-popup-form-wrapper');

  var isOpen = false;
  var focusableElements = [];
  var firstFocusable = null;
  var lastFocusable = null;
  var previousActiveElement = null;

  function shouldShowPopup() {
    var formSubmitted = sessionStorage.getItem(storageKeys.formSubmitted);
    if (formSubmitted === 'true') return true;

    var shownInSession = sessionStorage.getItem(storageKeys.shown);
    if (displayFrequency === 'once_session' && shownInSession) return false;

    if (displayFrequency === 'once_day') {
      var dismissedDate = localStorage.getItem(storageKeys.dismissed);
      if (dismissedDate) {
        var dismissed = new Date(dismissedDate);
        var now = new Date();
        var hoursDiff = (now - dismissed) / (1000 * 60 * 60);
        if (hoursDiff < 24) return false;
      }
    }

    return true;
  }

  function updateFocusableElements() {
    focusableElements = popup.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    firstFocusable = focusableElements[0];
    lastFocusable = focusableElements[focusableElements.length - 1];
  }

  function trapFocus(e) {
    if (e.key !== 'Tab') return;
    if (e.shiftKey) {
      if (document.activeElement === firstFocusable) {
        lastFocusable.focus();
        e.preventDefault();
      }
    } else {
      if (document.activeElement === lastFocusable) {
        firstFocusable.focus();
        e.preventDefault();
      }
    }
  }

  function openPopup() {
    if (isOpen) return;

    previousActiveElement = document.activeElement;
    backdrop.classList.add('onhow-studio-popup-active');
    popup.classList.add('onhow-studio-popup-active');
    document.body.style.overflow = 'hidden';
    isOpen = true;

    updateFocusableElements();

    setTimeout(function() {
      var errorMessage = popup.querySelector('.onhow-studio-popup-message-error');
      var successMessage = popup.querySelector('.onhow-studio-popup-message-success');
      if (successMessage) {
        successMessage.focus();
      } else if (errorMessage) {
        popup.querySelector('.onhow-studio-popup-input').focus();
      } else if (closeBtn) {
        closeBtn.focus();
      }
    }, 100);

    document.addEventListener('keydown', handleKeyDown);
  }

  function closePopup() {
    if (!isOpen) return;

    backdrop.classList.remove('onhow-studio-popup-active');
    popup.classList.remove('onhow-studio-popup-active');
    document.body.style.overflow = '';
    isOpen = false;

    if (displayFrequency === 'once_day') {
      localStorage.setItem(storageKeys.dismissed, new Date().toISOString());
    }

    sessionStorage.removeItem(storageKeys.formSubmitted);
    document.removeEventListener('keydown', handleKeyDown);

    if (previousActiveElement) {
      previousActiveElement.focus();
    }
  }

  function handleKeyDown(e) {
    if (e.key === 'Escape') {
      closePopup();
    } else if (e.key === 'Tab') {
      trapFocus(e);
    }
  }

  if (closeBtn) {
    closeBtn.addEventListener('click', closePopup);
  }

  if (enableBackdropClose && backdrop) {
    backdrop.addEventListener('click', closePopup);
  }

  if (form) {
    form.addEventListener('submit', function() {
      sessionStorage.setItem(storageKeys.formSubmitted, 'true');
    });
  }

  function init() {
    var formSubmitted = sessionStorage.getItem(storageKeys.formSubmitted);

    if (formSubmitted === 'true') {
      var hasSuccess = popup.querySelector('.onhow-studio-popup-message-success');
      var hasError = popup.querySelector('.onhow-studio-popup-message-error');

      if (hasSuccess || hasError) {
        setTimeout(function() {
          openPopup();
          if (hasSuccess) {
            setTimeout(function() { closePopup(); }, 3000);
          }
        }, 500);
      }
      return;
    }

    if (!shouldShowPopup()) return;

    setTimeout(function() {
      openPopup();
      sessionStorage.setItem(storageKeys.shown, 'true');
    }, triggerDelay);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

{% schema %}
{
  "name": "Email Signup Popup",
  "settings": [
    {
      "type": "header",
      "content": "✨ Built by ONHOW Studio"
    },
    {
      "type": "paragraph",
      "content": "Get free sections & tutorials at youtube.com/@ONHOWStudio"
    },
    {
      "type": "text",
      "id": "onhow_studio_core_logic",
      "label": "Section Architecture (Do Not Edit)",
      "default": "built-by-onhow-studio",
      "info": "Modifying this will break the section's CSS layout."
    },
    {
      "type": "header",
      "content": "― Core Settings ―"
    },
    {
      "type": "color",
      "id": "onhow_studio_bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "onhow_studio_text_color",
      "label": "Text Color",
      "default": "#6B7280"
    },
    {
      "type": "header",
      "content": "― Trigger Settings ―"
    },
    {
      "type": "range",
      "id": "onhow_studio_trigger_delay",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "s",
      "label": "Delay before showing",
      "default": 5,
      "info": "Seconds after page load to show the popup"
    },
    {
      "type": "select",
      "id": "onhow_studio_display_frequency",
      "label": "Display frequency",
      "options": [
        {
          "value": "every_visit",
          "label": "Every visit"
        },
        {
          "value": "once_session",
          "label": "Once per session"
        },
        {
          "value": "once_day",
          "label": "Once per day"
        }
      ],
      "default": "once_day",
      "info": "How often to show the popup to the same visitor"
    },
    {
      "type": "header",
      "content": "― Layout ―"
    },
    {
      "type": "select",
      "id": "onhow_studio_popup_width",
      "label": "Popup size",
      "options": [
        {
          "value": "small",
          "label": "Small (500px)"
        },
        {
          "value": "medium",
          "label": "Medium (650px)"
        },
        {
          "value": "large",
          "label": "Large (800px)"
        }
      ],
      "default": "medium"
    },
    {
      "type": "select",
      "id": "onhow_studio_layout_style",
      "label": "Layout style",
      "options": [
        {
          "value": "vertical",
          "label": "Vertical (image on top)"
        },
        {
          "value": "horizontal",
          "label": "Horizontal (image on left)"
        },
        {
          "value": "background",
          "label": "Background image"
        }
      ],
      "default": "horizontal",
      "info": "How to display the image and content"
    },
    {
      "type": "header",
      "content": "― Image ―"
    },
    {
      "type": "image_picker",
      "id": "onhow_studio_image",
      "label": "Popup image"
    },
    {
      "type": "checkbox",
      "id": "onhow_studio_show_image",
      "label": "Show image",
      "default": true
    },
    {
      "type": "header",
      "content": "― Colors ―"
    },
    {
      "type": "color",
      "id": "onhow_studio_color_heading",
      "label": "Heading",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "onhow_studio_color_button_bg",
      "label": "Button background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "onhow_studio_color_button_text",
      "label": "Button text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "onhow_studio_color_close_bg",
      "label": "Close button background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "onhow_studio_color_close_icon",
      "label": "Close button icon",
      "default": "#111111"
    },
    {
      "type": "header",
      "content": "― Behavior ―"
    },
    {
      "type": "checkbox",
      "id": "onhow_studio_enable_backdrop_close",
      "label": "Close when clicking outside",
      "default": true,
      "info": "Allow closing popup by clicking the backdrop"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "Heading",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "onhow_studio_heading",
          "label": "Heading text",
          "default": "Join Our Newsletter"
        },
        {
          "type": "select",
          "id": "onhow_studio_heading_size",
          "label": "Heading size",
          "options": [
            {
              "value": "h2",
              "label": "Small"
            },
            {
              "value": "h1",
              "label": "Medium"
            },
            {
              "value": "h0",
              "label": "Large"
            }
          ],
          "default": "h1"
        }
      ]
    },
    {
      "type": "paragraph",
      "name": "Description",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "onhow_studio_text",
          "label": "Description text",
          "default": "<p>Subscribe to get special offers, free giveaways, and exclusive deals.</p>"
        }
      ]
    },
    {
      "type": "email_form",
      "name": "Email Form",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "onhow_studio_custom_tag",
          "label": "Customer tag",
          "default": "newsletter",
          "info": "Tag applied to the customer on signup."
        },
        {
          "type": "text",
          "id": "onhow_studio_email_placeholder",
          "label": "Email placeholder",
          "default": "Enter your email"
        },
        {
          "type": "text",
          "id": "onhow_studio_submit_label",
          "label": "Submit button label",
          "default": "Subscribe",
          "info": "Accessible label for the submit button"
        },
        {
          "type": "text",
          "id": "onhow_studio_success_message",
          "label": "Success message",
          "default": "Thanks for subscribing!"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Email Signup Popup (By ONHOW Studio)",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "paragraph"
        },
        {
          "type": "email_form"
        }
      ]
    }
  ]
}
{% endschema %}

{%- comment -%}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{%- endcomment -%}