Einen Custom block in deinem slide cart hinzufügen

Mit Custom blocks fügst du deinem slide cart Elemente hinzu, die noch nicht standardmäßig eingebaut sind — Logos von Zahlungsmethoden, Social-Proof-Badges, Countdown-Timer, Versandhinweise, USP-Icons und mehr. Schreib sie in HTML und CSS, leg sie in deinen slide cart und positioniere sie genau dort, wo du sie haben willst.

Was du bauen kannst

Ein Custom block ist ein flexibler Container, daher sind die Anwendungsfälle vielfältig. Ein paar beliebte Ideen:

Logos von Zahlungsmethoden — zeige akzeptierte Karten und Wallets, um Vertrauen beim Checkout aufzubauen
Social Proof — Bewertungs-Snippets, Sternebewertungen oder „X Kunden haben heute gekauft"
Countdown-Timer — Frist für kostenlosen Versand, Dringlichkeit am Verkaufsende
Vertrauenssiegel — Sicherer-Checkout-Badges, Telefonsupport-Widget
Versand- und Rückgabehinweise — Schwellen für kostenlosen Versand, einfache Rückgabe-Garantie
USP-Icons — schnelle visuelle Erinnerungen an deine wichtigsten Verkaufsargumente
Promo-Banner — Kampagnenbotschaften oder saisonale Angebote

Wo Custom blocks platziert werden

Du erhältst einen Custom block für jeden der zwei slide-cart-Bereiche:

Body — erscheint neben deinen Warenkorbartikeln
Footer — sitzt in der Nähe des Checkout-Buttons

Die genaue Reihenfolge innerhalb jedes Bereichs kannst du in den Layout-Einstellungen feinjustieren.

Einen Custom block hinzufügen

Öffne die Einstellungen deines slide cart.
Suche die Custom block-Komponente im Body- oder Footer-Bereich.
Füge dein HTML und CSS in das Code-Feld ein.
Speichere deine Änderungen.
Zieh den Block an die gewünschte Stelle in den Layout settings.

JavaScript verwenden

Custom blocks führen Code innerhalb von <script>-Tags nicht aus, unterstützen aber JavaScript über Inline-Event-Attribute wie onclick, onmouseover oder onload. Das reicht für viele kleine Interaktionen:

<button onclick="alert('Kostenloser Versand ab $50!')"    style="background: #000; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Versandinfo</button>

Wenn dein Anwendungsfall etwas Größeres erfordert — Live-Daten abrufen, komplexer State, Drittanbieter-SDKs — sag uns Bescheid. Wir verfolgen das Interesse an umfassenderer JavaScript-Unterstützung und fügen je nach Nachfrage der Händler möglicherweise ein eigenes JS-Feld hinzu.

Vorschau vor dem Live-Gehen

Du kannst einen Custom block speichern, das Feature ausgeschaltet lassen und trotzdem über einen speziellen Vorschau-Link sehen, wie er aussieht. Der Standard-Vorschau-Button in der Navigation zeigt den Block nicht an, solange das Feature aus ist — dieser dedizierte Link ist die einzige Möglichkeit, ihn zu sehen, ohne ihn Käufern preiszugeben.

Das ist nützlich, um Änderungen vorzubereiten, die Zustimmung von Teamkollegen einzuholen oder vor dem Live-Gehen auf echten Geräten zu testen.

Gut zu wissen

HTML und CSS werden vollständig unterstützt
<script>-Tags werden nicht geparst — verwende Inline-Event-Attribute für JavaScript
Ein Custom block pro Zone (Body + Footer = insgesamt zwei Custom blocks pro slide cart)
Das CSS, das du schreibst, wirkt innerhalb des slide cart — halte deine Selektoren spezifisch, um andere slide-cart-Elemente nicht zu beeinflussen

Beispiele zum Verwenden

Du kannst diese Beispiele gerne in deinen Custom block kopieren. Wenn du Änderungen brauchst, füg den Code einfach in ein beliebiges LLM ein (wir empfehlen Claude) und bitte um Anpassungen.

1. Auto-scrollendes Bewertungs-Karussell

Ein automatisch scrollendes Widget, das (fest codierte) Bewertungen zeigt — es pausiert ca. 3,5 Sekunden auf jeder Bewertung, mit fließenden Übergängen dazwischen. Reines CSS, kein JS. Du kannst weitere Bewertungen hinzufügen, das Timing anpassen usw.

Vollständigen Code anzeigen

<div class="reviews-widget">
  <div class="reviews-summary">
    <span class="reviews-stars">★★★★★</span>
    <span class="reviews-meta">4.9 · 2,500+ reviews</span>
  </div>

  <div class="reviews-slider-wrapper">
    <div class="reviews-track">
      <div class="review-slide">
        <p class="review-text">"Absolutely love this product! Best purchase I've made all year."</p>
        <span class="review-author">Sarah M. · Verified buyer</span>
      </div>
      <div class="review-slide">
        <p class="review-text">"Quality is amazing and shipping was fast. Highly recommend!"</p>
        <span class="review-author">David K. · Verified buyer</span>
      </div>
      <div class="review-slide">
        <p class="review-text">"Customer service was incredible. Will definitely buy again."</p>
        <span class="review-author">Emma R. · Verified buyer</span>
      </div>
    </div>
  </div>
</div>

<style>
  .reviews-widget {
    padding: 16px 14px;
    background: #f7fafc;
    margin: 0;
  }
  .reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .reviews-stars {
    color: #f6ad37;
    font-size: 15px;
    letter-spacing: 1px;
  }
  .reviews-meta {
    font-size: 12px;
    color: #4a5568;
    font-weight: 600;
  }
  .reviews-slider-wrapper {
    overflow: hidden;
    position: relative;
  }
  .reviews-track {
    display: flex;
    width: 300%;
    animation: review-slide 12s infinite ease-in-out;
  }
  .review-slide {
    flex: 0 0 33.333%;
    padding: 0 8px;
    text-align: center;
    box-sizing: border-box;
  }
  .review-text {
    font-size: 13px;
    color: #2d3748;
    margin: 0 0 6px;
    line-height: 1.4;
    font-style: italic;
  }
  .review-author {
    font-size: 11px;
    color: #718096;
  }
  @keyframes review-slide {
    0%, 28%   { transform: translateX(0); }
    33%, 61%  { transform: translateX(-33.333%); }
    66%, 94%  { transform: translateX(-66.666%); }
    100%      { transform: translateX(0); }
  }
</style>

2. Countdown-Timer

Countdown-Timer erzeugen Dringlichkeit bei zeitlich begrenzten Angeboten, Flash-Sales und reservierten Warenkörben. Das Beispiel unten ist ein 10-minütiger Session-Timer: Er startet bei 10:00, sobald ein Kunde den slide cart öffnet, zählt Sekunde für Sekunde herunter und zeigt bei Null die Meldung „Angebot abgelaufen" an. Dauer, Nachricht und Farben lassen sich alle leicht im Code ändern.

Vollständigen Code anzeigen

<div class="countdown-widget">
  <div class="countdown-text">
    <div class="countdown-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5ZM12.75 6a.75.75 0 0 0-1.5 0v6c0 .2.08.39.22.53l4 4a.75.75 0 1 0 1.06-1.06l-3.78-3.78V6Z" clip-rule="evenodd"/>
      </svg>
      <span>Hurry — limited offer</span>
    </div>
    <div class="countdown-subtitle">Reserved in your cart for</div>
  </div>
  <div class="countdown-display">
    <div class="cd-block"><span id="cd-m">10</span><small>min</small></div>
    <div class="cd-sep">:</div>
    <div class="cd-block"><span id="cd-s">00</span><small>sec</small></div>
  </div>
  <img src="x" style="display:none" onerror="this.remove();(function(){var endTime=Date.now()+(10*60*1000);function update(){var diff=endTime-Date.now();if(diff<=0){var w=document.querySelector('.countdown-widget');if(w){w.textContent='Offer expired';w.style.padding='14px';w.style.textAlign='center';w.style.color='#718096';w.style.display='block';}return;}var pad=function(n){return String(n).padStart(2,'0');};var m=Math.floor(diff/60000),s=Math.floor((diff%60000)/1000);var dm=document.getElementById('cd-m');var ds=document.getElementById('cd-s');if(dm)dm.textContent=pad(m);if(ds)ds.textContent=pad(s);}if(window.__cdInt)clearInterval(window.__cdInt);update();window.__cdInt=setInterval(update,1000);})();">
</div>

<style>
  .countdown-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: #fff5f5;
    margin: 0;
  }
  .countdown-text {
    flex: 1;
    min-width: 0;
  }
  .countdown-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #c53030;
    margin-bottom: 2px;
  }
  .countdown-subtitle {
    font-size: 11px;
    color: #718096;
  }
  .countdown-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
  }
  .cd-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
  }
  .cd-block span {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #2d3748;
    font-variant-numeric: tabular-nums;
  }
  .cd-block small {
    font-size: 9px;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }
  .cd-sep {
    color: #2d3748;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    padding: 0 2px;
  }
</style>

3. Vertrauenssignale

Ein vollständiges Beispiel, das du einfügen und anpassen kannst. Es zeigt drei Vertrauenssignale, die typischerweise unterhalb des Checkout-Buttons platziert werden.

Vollständigen Code anzeigen

<div class="trust-footer">
  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z" clip-rule="evenodd"/>
    </svg>
    <span class="trust-title">Secure checkout</span>
    <span class="trust-subtitle">256-bit SSL</span>
  </div>

  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z"/>
    </svg>
    <span class="trust-title">50,000+ customers</span>
    <span class="trust-subtitle">Join the community</span>
  </div>

  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"/>
    </svg>
    <span class="trust-title">Need help?</span>
    <span class="trust-subtitle">(555) 123-4567</span>
  </div>
</div>

<style>
  .trust-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    background: #f7fafc;
    border-radius: 8px;
    margin: 8px 0;
  }
  .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: 4px;
  }
  .trust-item svg {
    color: #2d8659;
  }
  .trust-title {
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.2;
  }
  .trust-subtitle {
    font-size: 11px;
    color: #718096;
    line-height: 1.2;
  }
</style>

Brauchst du Hilfe beim Bauen eines bestimmten Blocks? Schreib unseren Support an — wir weisen dir gerne den Weg.