Where you can achieve what your competitors can’t

Notify Me When Back In-stock 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 -%}

{%- if product.available == false -%}

  {%- assign onhow_studio_form_id = 'onhow-studio-restock-form--' | append: section.id -%}

  <div class="onhow-studio-section-wrapper-built-by-onhow-studio" style="--onhow-studio-bg: #ffffff; --onhow-studio-text: #111111;">

    <button type="button" id="OnhowNotifyTrigger--{{ section.id }}" class="onhow-studio-notify-trigger-btn button button--primary btn btn--primary">
      Notify me when available
    </button>

    <div id="OnhowNotifyModal--{{ section.id }}" class="onhow-studio-modal-overlay" aria-hidden="true">
      <div class="onhow-studio-modal-content" role="dialog" aria-modal="true" aria-labelledby="OnhowModalTitle--{{ section.id }}">

        <div class="onhow-studio-modal-header">
          <h3 id="OnhowModalTitle--{{ section.id }}" class="onhow-studio-modal-title">Back in stock alert</h3>
          <button type="button" class="onhow-studio-modal-close" aria-label="Close modal">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          </button>
        </div>

        <div class="onhow-studio-modal-body">
          {%- form 'customer', id: onhow_studio_form_id -%}

            {%- if form.posted_successfully? -%}
              <div class="onhow-studio-form-success">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="onhow-studio-success-icon"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                <p>You're on the list! We will notify you when <strong>{{ product.title }}</strong> is restocked.</p>
              </div>
            {%- elsif form.errors -%}
              <div class="onhow-studio-form-error">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="onhow-studio-error-icon"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                {{ form.errors | default_errors }}
              </div>
            {%- endif -%}

            {%- unless form.posted_successfully? -%}
              <p class="onhow-studio-modal-subtitle">Leave your email address to get notified the moment <strong>{{ product.title }}</strong> becomes available again.</p>

              <input type="hidden" name="contact[tags]" value="newsletter, restock-notification, Restock Request: {{ product.title | replace: ',', '' | escape }}">
              <input type="hidden" name="return_to" value="{{ request.path }}#OnhowNotifyModal--{{ section.id }}">

              <div class="onhow-studio-form-field">
                <div class="onhow-studio-field-wrapper">
                  <input
                    id="RestockEmail--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="onhow-studio-email-input"
                    value="{{ customer.email }}"
                    aria-required="true"
                    aria-label="Email address for restock notification"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    placeholder="Enter your email address"
                    required>
                </div>
              </div>

              <button type="submit" class="onhow-studio-notify-button button button--primary btn btn--primary" name="commit" aria-label="Submit email for restock notification">
                Notify me when available
              </button>

              <p class="onhow-studio-privacy-text">We don't share your information with others.</p>
            {%- endunless -%}

          {%- endform -%}
        </div>

      </div>
    </div>

  </div>

  <style>
    .onhow-studio-section-wrapper-built-by-onhow-studio * { box-sizing: border-box; }
    .onhow-studio-section-wrapper-built-by-onhow-studio p,
    .onhow-studio-section-wrapper-built-by-onhow-studio h1,
    .onhow-studio-section-wrapper-built-by-onhow-studio h2,
    .onhow-studio-section-wrapper-built-by-onhow-studio h3,
    .onhow-studio-section-wrapper-built-by-onhow-studio ul { margin: 0; padding: 0; }

    #OnhowNotifyModal--{{ section.id }} * { box-sizing: border-box; }
    #OnhowNotifyModal--{{ section.id }} p,
    #OnhowNotifyModal--{{ section.id }} h3,
    #OnhowNotifyModal--{{ section.id }} ul { margin: 0; padding: 0; }

    :where(#shopify-section-{{ section.id }} .onhow-studio-notify-trigger-btn, #OnhowNotifyModal--{{ section.id }} .onhow-studio-notify-button) {
      background-color: #111111;
      color: #ffffff;
    }

    #shopify-section-{{ section.id }} .onhow-studio-notify-trigger-btn,
    #OnhowNotifyModal--{{ section.id }} .onhow-studio-notify-button {
      width: 100%;
      padding: 14px 24px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      line-height: 1.4;
      display: inline-block;
    }

    #shopify-section-{{ section.id }} .onhow-studio-notify-trigger-btn { margin-top: 10px; }
    #OnhowNotifyModal--{{ section.id }} .onhow-studio-notify-button { margin-top: 8px; }

    #shopify-section-{{ section.id }} .onhow-studio-notify-trigger-btn:hover,
    #OnhowNotifyModal--{{ section.id }} .onhow-studio-notify-button:hover {
      opacity: 0.85;
      transform: translateY(-1px);
    }

    #OnhowNotifyModal--{{ section.id }} {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #OnhowNotifyModal--{{ section.id }}.is-open {
      opacity: 1;
      visibility: visible;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-modal-content {
      background-color: var(--onhow-studio-bg, #ffffff);
      color: var(--onhow-studio-text, #111111);
      width: 90%;
      max-width: 420px;
      border-radius: 12px;
      padding: 24px;
      position: relative;
      transform: translateY(20px);
      transition: transform 0.3s ease;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

    #OnhowNotifyModal--{{ section.id }}.is-open .onhow-studio-modal-content {
      transform: translateY(0);
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-modal-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      font-family: inherit;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-modal-subtitle {
      font-size: 14px;
      margin-top: 0;
      margin-bottom: 20px;
      line-height: 1.5;
      color: #555555;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-modal-close {
      background: none;
      border: none;
      padding: 4px;
      cursor: pointer;
      color: var(--onhow-studio-text, #111111);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-modal-close:hover { opacity: 0.6; }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-modal-close svg {
      width: 24px;
      height: 24px;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-form-field { margin-bottom: 12px; }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-field-wrapper {
      position: relative;
      width: 100%;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-email-input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 16px;
      font-family: inherit;
      background-color: var(--onhow-studio-bg, #ffffff);
      color: var(--onhow-studio-text, #111111);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      box-sizing: border-box;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-email-input:focus {
      outline: none;
      border-color: var(--onhow-studio-text, #111111);
      box-shadow: 0 0 0 1px var(--onhow-studio-text, #111111);
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-privacy-text {
      margin-top: 12px;
      margin-bottom: 0;
      font-size: 12px;
      color: #777777;
      font-family: inherit;
      text-align: center;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-form-success,
    #OnhowNotifyModal--{{ section.id }} .onhow-studio-form-error {
      padding: 16px;
      border-radius: 8px;
      margin-bottom: 16px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      line-height: 1.4;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-form-success {
      background-color: #E8F5E9;
      color: #2E7D32;
      border: 1px solid #C8E6C9;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-form-error {
      background-color: #FFEBEE;
      color: #C62828;
      border: 1px solid #FFCDD2;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-success-icon,
    #OnhowNotifyModal--{{ section.id }} .onhow-studio-error-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    #OnhowNotifyModal--{{ section.id }} .onhow-studio-form-error ul {
      margin: 0;
      padding-left: 16px;
    }
  </style>

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

      const sectionId = "{{ section.id }}";
      const triggerBtn = document.getElementById(`OnhowNotifyTrigger--${sectionId}`);
      const modal = document.getElementById(`OnhowNotifyModal--${sectionId}`);

      if (!triggerBtn || !modal) return;

      const closeBtns = modal.querySelectorAll('.onhow-studio-modal-close');
      const modalParent = modal.parentNode;

      function openModal() {
        document.body.appendChild(modal);
        modal.classList.add('is-open');
        modal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
      }

      function closeModal() {
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
        history.replaceState(null, '', window.location.pathname + window.location.search);
        setTimeout(function() {
          if (!modal.classList.contains('is-open')) modalParent.appendChild(modal);
        }, 300);
      }

      triggerBtn.addEventListener('click', openModal);
      closeBtns.forEach(btn => btn.addEventListener('click', closeModal));
      modal.addEventListener('click', function(e) { if (e.target === modal) closeModal(); });
      document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal(); });

      if (window.location.hash === `#OnhowNotifyModal--${sectionId}`) {
        openModal();
      }
    })();
  </script>

{%- endif -%}

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