🔧 INTERNAL — Pop-Up Welcome-Code (HTML zum Einbauen)

🎁 POP-UP WELCOME-CODE — HTML zum Einbauen

3 Optionen: Theme-Code, Klaviyo-Form, oder Shopify-App

OPTION A: Klaviyo Pop-Up (EMPFOHLEN!)

Klaviyo → Sign-Up Forms → Create Form
Format: 'Pop-Up' wählen
Trigger: 'After 10 seconds on site'
Mobile + Desktop Versionen
Headline: '🎁 10% Welcome-Bonus'
List: Newsletter Subscribers
Publish

→ Klaviyo Forms

OPTION B: Theme-Liquid Code (Manuell einfügen)

Theme-Editor → Theme-Code → assets/popup.liquid

📋 HTML/CSS/JS POP-UP CODE

Kopiere diesen Code in dein Theme:

<!-- LuxeStyle Pop-Up Welcome Code -->
<div id="lx-popup-overlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;justify-content:center;align-items:center;">
  <div style="background:linear-gradient(135deg,#1B2845,#3E5C76);color:white;padding:40px;border-radius:20px;max-width:450px;width:90%;text-align:center;position:relative;animation:lxPopIn 0.4s ease;">
    <button onclick="lxClosePopup()" style="position:absolute;top:15px;right:15px;background:none;border:none;color:white;font-size:24px;cursor:pointer;">✕</button>
    <h2 style="font-size:32px;margin:0 0 10px;">🎁 10% Welcome-Bonus</h2>
    <p style="opacity:0.9;margin-bottom:20px;">Trag dich ein und sichere dir sofort:</p>
    <div style="background:#D4AF37;color:#1B2845;padding:10px 20px;border-radius:8px;font-family:monospace;font-weight:800;font-size:22px;display:inline-block;margin-bottom:20px;">WELCOME10</div>
    <form onsubmit="lxSubmitPopup(event)" style="margin-top:15px;">
      <input type="email" id="lx-email" placeholder="deine@email.ch" required style="width:100%;padding:14px;border:none;border-radius:8px;margin-bottom:10px;font-size:16px;box-sizing:border-box;">
      <button type="submit" style="background:#D4AF37;color:#1B2845;border:none;padding:14px 30px;border-radius:8px;font-weight:800;cursor:pointer;width:100%;font-size:16px;">🎁 Code sichern</button>
    </form>
    <p style="font-size:11px;opacity:0.7;margin-top:15px;">Du kannst dich jederzeit abmelden.</p>
  </div>
</div>

<style>
@keyframes lxPopIn{from{opacity:0;transform:scale(0.8);}to{opacity:1;transform:scale(1);}}
@media(max-width:600px){#lx-popup-overlay>div{padding:25px 20px;}#lx-popup-overlay h2{font-size:24px;}}
</style>

<script>
(function(){
  // Show after 10 seconds, only once per session
  if(sessionStorage.getItem('lx-popup-shown'))return;
  setTimeout(function(){
    document.getElementById('lx-popup-overlay').style.display='flex';
    sessionStorage.setItem('lx-popup-shown','true');
  }, 10000);
})();

function lxClosePopup(){
  document.getElementById('lx-popup-overlay').style.display='none';
}

function lxSubmitPopup(e){
  e.preventDefault();
  var email = document.getElementById('lx-email').value;
  // Klaviyo Sub via API (mit deinem Public Key)
  // ODER: einfach localStorage + Code anzeigen
  localStorage.setItem('lx-newsletter-email', email);
  alert('🎉 Geschafft! Dein Code WELCOME10 wurde an ' + email + ' geschickt. Wende ihn beim Checkout an!');
  lxClosePopup();
  // Klaviyo Tracking falls API verbunden:
  if(window._learnq){
    _learnq.push(['identify', {'$email': email}]);
    _learnq.push(['track', 'Newsletter Signup', {'source': 'popup'}]);
  }
}
</script>

📦 SO INSTALLIERST DU:

Shopify Admin → Online Store → Themes
3 Punkte am Theme → 'Edit code'
Layout → theme.liquid
Suche: </body>
Code OBEN drüber einfügen
Save

⚙️ Konfiguration anpassen:

Timing: Ändere 10000 (= 10 Sek) zu 30000 für 30 Sek
Code-Text: Ändere WELCOME10 wenn anderer Code
Headline: Ändere 10% Welcome-Bonus
Farben: #1B2845 (BG) und #D4AF37 (Akzent)

💡 EXIT-INTENT (Bonus)

Ändere im Script:

document.addEventListener('mouseleave', function(e){
  if(e.clientY <= 0 && !sessionStorage.getItem('lx-popup-shown')){
    document.getElementById('lx-popup-overlay').style.display='flex';
    sessionStorage.setItem('lx-popup-shown','true');
  }
});

→ Pop-Up erscheint wenn Maus den Browser verlässt (Exit-Intent)