Skip to main content

​
Introduzione

Aggiungere un’icona lucchetto al pulsante di checkout è un modo semplice ma efficace per aumentare la fiducia dei clienti, mostrando che i loro dati di pagamento sono al sicuro. Questo simbolo familiare rassicura i clienti sulla protezione dei loro dati, facendoli sentire più a loro agio durante il processo di checkout. In questo tutorial ti guiderò nell’aggiunta di un’icona lucchetto al pulsante di checkout tramite CSS, così da rafforzare la sicurezza e migliorare l’esperienza utente complessiva. Questi passaggi sono perfetti per titolari di negozi o sviluppatori con una conoscenza di base del CSS. Aggiungendo questo piccolo ma incisivo segnale visivo, puoi allineare il pulsante di checkout di Upcart al design del tuo sito, contribuendo a costruire fiducia e a incoraggiare i clienti a completare i loro acquisti. Iniziamo!

​
Per iniziare: scegli un’icona lucchetto

Per prima cosa, devi scegliere un’icona lucchetto da aggiungere al tuo negozio. Qui sotto ne trovi alcune già pronte da usare, ma puoi anche usarne una tua. Per usare la tua, caricala nella sezione File del tuo negozio Shopify in Settings > Files e copiane l’URL. In Upcart non esiste un campo icona per il pulsante di checkout. Devi invece incollare un tag immagine HTML nel campo Checkout button text, che renderizza l’HTML — prendi uno degli snippet qui sotto e sostituisci il suo src con il tuo URL.

​
Ecco le icone lucchetto disponibili tra cui puoi scegliere:

HTML da aggiungere: Icona lucchetto bianca piena accanto al testo Checkout su un pulsante scuro
HTML da aggiungere: Icona lucchetto bianca con contorno accanto al testo Checkout su un pulsante scuro
HTML da aggiungere: Lucchetto bianco con contorno e foro della serratura accanto a Checkout su un pulsante scuro
HTML da aggiungere: Icona lucchetto nera piena accanto al testo Checkout su un pulsante azzurro
HTML da aggiungere: Lucchetto nero con foro della serratura accanto a Checkout su un pulsante azzurro

​
Posizionare l’icona lucchetto:

Dopo aver scelto l’icona lucchetto, vai su Manage All Carts > Edit > Settings > Edit copy e trova il campo Checkout button text. Puoi incollarla prima della parola “Checkout” oppure dopo. Inoltre, da qui puoi cambiare la parola “Checkout” con qualcos’altro, ad esempio “Checkout sicuro” o simili. Modifica del testo del pulsante di checkout in Upcart per posizionare l'icona lucchetto

​
Accedere alle impostazioni Custom CSS

Per iniziare a personalizzare il CSS del tuo Upcart, segui questi passaggi:
  1. Apri l’app Upcart dalla tua dashboard.
  2. Vai al Cart Editor.
  3. Apri Settings e seleziona la scheda Custom CSS. Settings è una riga di schede, non un’unica pagina lunga — se non vedi Custom CSS, si trova sotto More settings.

​
Applicare il CSS personalizzato per mostrare l’icona lucchetto:

Una volta nella sezione Custom CSS, copia e incolla il codice qui sotto per mostrare e posizionare la tua icona lucchetto. Tieni presente che più grande è il valore di padding, più piccola sarà l’icona.
  1. Individua l’area di inserimento CSS.
  2. Copia e incolla il seguente codice nell’area di inserimento CSS:
  3. Regola height sotto .upcart-custom-lock-icon per una dimensione diversa dell’icona. Consigliamo 16px o 20px per un’icona lucchetto più grande

​
Conclusione

Seguendo questi passaggi, hai aggiunto con successo un’icona lucchetto al tuo pulsante di checkout, facendo sentire i tuoi clienti più sicuri e fiduciosi durante l’acquisto. Questo piccolo cambiamento può fare una grande differenza nella percezione del tuo negozio, contribuendo a costruire fiducia e a migliorare l’esperienza di acquisto complessiva.

​
Hai ancora bisogno di aiuto?

Se hai bisogno di assistenza con le personalizzazioni, ti consigliamo di rivolgerti a uno Shopify Expert per l’aggiunta di HTML, CSS e persino JavaScript al tuo cart drawer. Vedi gli Shopify Experts