Se vendi su Shopify, il design del tuo pulsante CTA è fondamentale. Che porti a una pagina promozionale, all’iscrizione a una newsletter VIP o a un link di affiliazione, un pulsante che cattura l’attenzione viene cliccato più spesso di uno che si confonde con la pagina — e in un negozio online, più clic significano più vendite.
I temi Shopify OS 2.0, incluso Dawn, hanno blocchi pulsante nativi, ma offrono poco controllo sull’aspetto di questi pulsanti. Il blocco ti consente di impostare l’etichetta, il link e se lo stile è pieno o con contorno, mentre i colori provengono dalle impostazioni globali del tema. Questo mantiene coerente il tuo negozio (che è lo scopo delle impostazioni del tema), ma significa anche che un pulsante pensato per distinguersi apparirà come ogni altro pulsante del tuo sito.
Ottenere un pulsante autonomo con colori propri, effetto hover o icona richiede uno di due approcci. Puoi aggiungere un blocco Custom Liquid nel tuo editor del tema e scrivere tu stesso l’HTML e il CSS, oppure puoi usare un widget gratuito ospitato che gestisce lo stile e ti fornisce un codice di incorporamento da incollare.
Se desideri un pulsante CTA personalizzato e ottimizzato per le conversioni sul tuo negozio Shopify senza modificare il codice del tema o pagare uno sviluppatore, questa guida spiega come aggiungere un pulsante in Shopify usando entrambi i metodi.
Opzione 1: Usa Custom Liquid e CSS
Il modo standard per ottenere un design di pulsante unico in un negozio Shopify senza installare un’app di terze parti è scrivere tu stesso il codice. L’editor del tema di Shopify include una sezione Custom Liquid in cui puoi aggiungere il tuo HTML e CSS, così puoi definire un pulsante e personalizzarne lo stile esattamente come desideri senza modificare direttamente i file del tema.
Ecco come aggiungere un pulsante in Shopify usando Custom Liquid e CSS:
- Dal pannello di amministrazione di Shopify, vai su Negozio online nel menu a sinistra. Poi clicca sull’icona a forma di matita accanto a Negozio online oppure clicca su Modifica tema sullo schermo.
- Nella barra laterale sinistra, clicca su Aggiungi sezione, cerca Custom Liquid e selezionalo. Sulla destra appare un campo di testo in cui inserire il codice.
- Aggiungi l’HTML per il tuo pulsante insieme a un blocco <style> contenente il tuo CSS, quindi clicca su Salva nell’angolo in alto a destra. Le tue modifiche appaiono nell’anteprima mentre lavori.
Un avvertimento quando si usa questo metodo: scrivere lo stile da soli significa rischiare di commettere errori. Le regole scritte senza selettori con ambito possono influenzare altri elementi della pagina, e il Custom Liquid aggiunto all’intestazione o al piè di pagina viene visualizzato in ogni pagina del tuo negozio — quindi un piccolo errore può avere un impatto maggiore rispetto al solo pulsante che stavi personalizzando. Shopify consiglia anche di duplicare il tema come backup prima di modificare il codice, il che riflette come la piattaforma valuta il rischio.
Assumere uno sviluppatore potrebbe risolvere il problema tecnico ma aggiunge un costo più difficile da giustificare per un singolo pulsante, in particolare quando vuoi testare diverse versioni e ogni modifica comporta un’altra richiesta.
Opzione 2: Aggiungi un widget pulsante gratuito e personalizzabile (consigliato)
Vuoi il controllo sul design senza il rischio? Un widget pulsante gratuito ospitato è un’alternativa al Custom Liquid in Shopify, con colori propri, stato hover e icona. Puoi personalizzare il pulsante in un costruttore visivo, copiare il codice di incorporamento e incollarlo in un blocco Custom Liquid nel tuo editor del tema.
Il widget Pulsante di Jotform offre le opzioni di stile che il blocco nativo di Shopify tralascia. Puoi impostare in modo indipendente i colori di sfondo, testo e hover, aggiungere un’icona prima o dopo l’etichetta e regolare il raggio degli angoli, l’altezza, il padding e l’ombra.
Ecco come aggiungere un pulsante in Shopify usando il widget pulsante di Jotform:
- Nella pagina del tuo Workspace Jotform, clicca su Crea, seleziona Widget per sito web, cerca “Button” e poi clicca su Usa widget.
- Nella scheda Generale, scegli l’azione del pulsante, inserisci le informazioni richieste (email, numero di telefono, link URL, ecc.) e scrivi l’etichetta del pulsante. Aggiungi una seconda riga o un testo circostante se la tua offerta necessita di contesto.
- Nella scheda Stili, imposta i colori, attiva un’icona e scegline la posizione, quindi regola la forma e la dimensione. La scheda Layout controlla se il pulsante è inline o fluttuante, e se appare su desktop, dispositivi mobili o entrambi.
- Clicca su Pubblica nella barra di navigazione in alto, quindi clicca su Copia codice nella sezione Incorpora del menu a sinistra.
Puoi anche cliccare su Piattaforme e selezionare Shopify per ottenere istruzioni di incorporamento specifiche per la piattaforma.
- Per incorporare il tuo pulsante personalizzato in Shopify, apri l’editor del tema, seleziona il modello della pagina, clicca su Aggiungi sezione o Aggiungi blocco, scegli Custom Liquid, incolla il codice di incorporamento e clicca su Salva nell’angolo in alto a destra.
Con questa opzione, poiché personalizzi il pulsante in Jotform anziché direttamente nel tema del tuo sito web, le tue modifiche rimangono separate dalle impostazioni globali del tema. Testare un colore o un’etichetta diversa significa modificare il widget invece di modificare nuovamente il codice del tema. Per la configurazione completa, consulta come aggiungere un pulsante a un sito web.
Potenzia il tuo negozio Shopify con widget intelligenti e serverless
Un pulsante è una delle diverse funzionalità che puoi aggiungere al tuo sito senza assumere uno sviluppatore o pagare un’altra app mensile. Come alternativa agli inviti all’azione di Shopify, la directory dei widget per sito web gratuiti di Jotform offre più di 150 opzioni, tra cui diverse pensate per le stesse lacune dei negozi affrontate dal pulsante.
Ad esempio, un widget Barra degli annunci mostra la soglia di spedizione gratuita o le date dei saldi in cima a ogni pagina, dove gli acquirenti la vedono prima di completare l’acquisto. Un widget Pulsante di acquisto indirizza gli acquirenti direttamente a un prodotto, al carrello o a un URL di checkout con un invito all’azione per l’acquisto, ideale per una landing page di campagna o un upsell post-acquisto. E la categoria e-commerce include schede prodotto e tabelle dei prezzi. C’è anche un’integrazione Jotform-Shopify che ti consente di raccogliere le informazioni dei clienti insieme al tuo negozio.
Ogni widget si incorpora nello stesso modo del pulsante, così non paghi un altro abbonamento ad app ogni volta che vuoi aggiungere una semplice funzionalità.
Come brand di e-commerce, il tuo tempo e il tuo budget dovrebbero essere dedicati ad attività come l’approvvigionamento di prodotti e il miglioramento dei tuoi funnel pubblicitari, non alla scrittura di Custom Liquid affinché un pulsante abbia un aspetto diverso dagli altri. Il widget Pulsante di Jotform ti offre un invito all’azione che puoi ripersonalizzare in un minuto senza toccare il tuo tema. Provalo gratuitamente oggi stesso.
Questo articolo è rivolto ai proprietari di negozi Shopify, ai dropshipper e ai responsabili e-commerce che desiderano aggiungere pulsanti di invito all’azione altamente personalizzati e ottimizzati per la conversione, senza essere limitati dalle impostazioni del tema o dover scrivere codice Custom Liquid.
Invia un Commento: