Branding del checkout

Il checkout brandizzato è il motivo principale per cui i merchant scelgono WooshPayment invece di Shop Pay o Bolt. Configurarlo bene alza il tasso di conversione del 10-25% vs un checkout generico.

Cosa puoi personalizzare

Setup base (60 secondi)

1. Vai su Dashboard → Branding
2. Carica il logo (consigliato 200×200px PNG con sfondo trasparente, o SVG)
3. Inserisci il colore brand (esa, es. #FF6B35). WooshPayment lo usa per:
   • Bottone "Paga ora"
   • Bordi input al focus
   • Badge "Selezionato" su shipping
   • Linee di separazione
4. Aggiungi nome visualizzato (es. "Mio Store" — appare in header + email)
5. Salva → l'anteprima a destra aggiorna live

Best practice colore

• Contrasto: il colore deve avere contrasto ≥ 4.5:1 vs bianco (WCAG AA). Se troppo chiaro, WooshPayment automaticamente scurisce il testo del bottone.
• Saturazione: colori troppo saturi (es. neon) stancano l'occhio. Usa la versione "brand" del tuo logo, non quella "accent".
• Test: chiedi a 3 amici di guardare e dirti "fa freddo o caldo?" — deve matchare il vibe del tuo store.

Logo: best practice

• Formato: PNG con sfondo trasparente, o SVG
• Dimensioni: 200×200px minimo, mai più di 500×500px
• Peso: massimo 200KB (verrà servito ad ogni cliente, pesa sulla performance)
• Layout: quadrato o orizzontale corto. Logo verticali alti vengono compressi nel header.

Copy CTA (Call To Action)

Puoi cambiare il testo del bottone principale:

• Default: "Paga ora"
• Alternative testate:
  • "Completa l'ordine" (+3% conversione vs "Paga ora" in test interno)
  • "Conferma e paga"
  • "Acquista ora"

Cambialo in Dashboard → Copy → Bottone principale.

Trust badges (opzionale ma consigliato)

• Loghi metodi pagamento (Visa, Mastercard, Apple Pay): mostrali in footer del checkout
• Recensioni (es. Trustpilot, Google): inseriscili nel pannello laterale destro
• Sicurezza: badge "SSL secured" + "PCI-DSS compliant"

Setup in Dashboard → Trust.

CSS custom (avanzato)

Su piani Growth+ puoi iniettare CSS custom per personalizzazioni avanzate:

/* Allarga il pannello del riepilogo */
.checkout-summary {
  max-width: 420px;
}
 
/* Tipografia custom */
body {
  font-family: 'Helvetica Neue', sans-serif;
}
 
/* Bordo arrotondato sui campi */
input, select {
  border-radius: 12px !important;
}

Mobile vs Desktop

Il checkout è mobile-first. Ogni cambio brand testa subito su iPhone (anteprima desktop in dashboard, ma confermane sempre l'aspetto reale aprendo il link checkout da telefono).

Esempi reali

Prossimi step

• Setup Apple Pay
• Personalizzare email transazionali
• Aggiungere upsell