Aggiungere un blocco personalizzato al tuo slide cart

I blocchi personalizzati ti permettono di aggiungere allo slide cart elementi che non sono già integrati di default — loghi di metodi di pagamento, badge di social proof, timer di conto alla rovescia, avvisi di spedizione, icone USP e molto altro. Scrivili in HTML e CSS, inseriscili nel tuo slide cart e posizionali esattamente dove vuoi.

Cosa puoi costruire

Un blocco personalizzato è un contenitore flessibile, quindi i casi d'uso sono ampi. Qualche idea popolare:

Loghi dei metodi di pagamento — mostra carte e wallet accettati per rafforzare la fiducia al checkout
Social proof — estratti di recensioni, valutazioni a stelle o «X clienti hanno acquistato oggi»
Timer di conto alla rovescia — scadenza per la spedizione gratuita, urgenza fine saldi
Marchi di fiducia — badge di checkout sicuro, widget per il supporto telefonico
Avvisi di spedizione e resi — soglie per la spedizione gratuita, garanzia di reso facile
Icone USP — promemoria visivi rapidi dei tuoi punti di forza
Banner promozionali — messaggi di campagna o offerte stagionali

Dove vivono i blocchi personalizzati

Hai a disposizione un blocco personalizzato per ciascuna delle due aree dello slide cart:

Body — appare accanto agli articoli del carrello
Footer — si trova vicino al pulsante di checkout

Puoi rifinire l'ordine esatto all'interno di ogni area dalle impostazioni Layout.

Aggiungere un blocco personalizzato

Apri le impostazioni del tuo slide cart.
Trova il componente Custom block nella sezione body o footer.
Incolla il tuo HTML e CSS nel campo del codice.
Salva le modifiche.
Trascina il blocco nella posizione preferita in Layout settings.

Usare JavaScript

I blocchi personalizzati non eseguono il codice all'interno dei tag <script>, ma supportano JavaScript tramite attributi di evento inline come onclick, onmouseover o onload. È sufficiente per molte piccole interazioni:

<button onclick="alert('Spedizione gratuita per ordini sopra $50!')"    style="background: #000; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Info spedizione</button>

Se il tuo caso d'uso richiede qualcosa di più pesante — recupero di dati in tempo reale, stato complesso, SDK di terze parti — faccelo sapere. Stiamo monitorando l'interesse per un supporto JavaScript più completo e potremmo aggiungere un campo JS dedicato in base a quanto chiedono i merchant.

Anteprima prima della pubblicazione

Puoi salvare un blocco personalizzato, lasciare la funzione disattivata e comunque vedere come appare grazie a un link di anteprima speciale. Il pulsante di anteprima standard nella navigazione non mostra il blocco finché la funzione è disattivata — questo link dedicato è l'unico modo per vederlo senza esporlo agli acquirenti.

È utile per preparare modifiche, ottenere l'approvazione dei colleghi o testare su dispositivi reali prima della pubblicazione.

Da sapere

HTML e CSS sono pienamente supportati
I tag <script> non vengono interpretati — usa attributi di evento inline per JavaScript
Un blocco personalizzato per zona (body + footer = due blocchi personalizzati totali per slide cart)
Il CSS che scrivi si applica all'interno dello slide cart — mantieni i selettori specifici per non influenzare gli altri elementi dello slide cart

Esempi che puoi usare

Sentiti libero di copiare e incollare questi esempi nel tuo Custom block. Se ti serve qualche modifica, incolla il codice in qualsiasi LLM (consigliamo Claude) e chiedi i cambiamenti.

1. Carosello di recensioni con scorrimento automatico

Un widget a scorrimento automatico che mostra recensioni (codificate in modo statico) — fa una pausa di circa 3,5 secondi su ognuna, con transizioni fluide tra una e l'altra. Solo CSS, senza JS. Puoi aggiungere altre recensioni, regolare la tempistica, ecc.

Mostra codice completo

<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. Timer di conto alla rovescia

I timer di conto alla rovescia creano urgenza per offerte a tempo, vendite flash e messaggi di carrello riservato. L'esempio sotto è un timer di sessione di 10 minuti: parte da 10:00 ogni volta che un cliente apre lo slide cart, scala secondo dopo secondo e mostra un messaggio «Offerta scaduta» quando arriva a zero. Durata, messaggio e colori sono tutti facili da modificare nel codice.

Mostra codice completo

<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. Segnali di fiducia

Un esempio completo che puoi incollare e personalizzare. Mostra tre segnali di fiducia, tipicamente posizionati sotto il pulsante di checkout.

Mostra codice completo

<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>

Hai bisogno di aiuto per costruire un blocco specifico? Contatta il supporto — saremo felici di indirizzarti nella giusta direzione.