Come aggiungere una barra Aggiungi al carrello fissa

La barra Aggiungi al carrello fisso mantiene le tue offerte sempre a portata di mano mentre i clienti navigano nella pagina del prodotto. Il pulsante può riportare i clienti alle offerte oppure aggiungere direttamente al carrello l'offerta selezionata. Puoi mostrarla dopo che i clienti hanno fatto scorrere il widget fuori dalla visualizzazione oppure dal caricamento della pagina.

Attiva la barra Aggiungi al carrello fisso

La barra fissa viene configurata per ogni bundle nell'editor del bundle.

1. Apri il bundle che vuoi modificare.
2. Apri la scheda Componenti aggiuntivi, quindi espandi Aggiungi al carrello fisso.
3. Attiva l'interruttore accanto al titolo Aggiungi al carrello fisso.

La barra viene mostrata nelle pagine dei prodotti in cui compare questo bundle, quindi assicurati che il bundle sia pubblicato e che il widget sia impostato per essere visualizzato sui prodotti corretti.

Scegli cosa deve fare il pulsante

L'azione del pulsante offre due possibilità:

• Scorri fino alle offerte riporta il cliente al widget per scegliere un'offerta.
• Aggiungi l'offerta selezionata al carrello mostra l'offerta selezionata e la aggiunge insieme ai prodotti, ai regali e agli extra scelti.

In modalità di aggiunta al carrello, la barra segue le modifiche all'offerta selezionata, alle varianti, alle quantità, agli abbonamenti e ai componenti aggiuntivi. Il totale corrisponde al piè di pagina del widget. Puoi attivare Mostra prezzo, Mostra prezzo originale, Mostra badge del risparmio e Mostra il prezzo nel pulsante.

Se il cliente deve ancora scegliere una variante o completare uno slot del bundle, il pulsante lo porta al widget per completare la selezione. Se non è stata selezionata alcuna offerta, lo invita a scegliere le opzioni. Nei temi che impediscono l'aggiunta diretta, il pulsante torna a far scorrere la pagina fino al widget. Gli sconti con soli componenti aggiuntivi facoltativi usano l'azione di scorrimento fino alle offerte, così i clienti possono effettuare le proprie scelte nel widget. Questo pulsante usa il normale flusso del carrello, non Acquista ora.

Scegli quando deve comparire la barra

In Mostra la barra, scegli Dopo che il widget è uscito dalla visualizzazione oppure Sempre, dal caricamento della pagina. Entrambe le opzioni funzionano con qualsiasi azione del pulsante. Le barre esistenti mantengono il comportamento dopo lo scorrimento, a meno che tu non lo modifichi.

Con Sempre selezionato, la modalità di aggiunta al carrello inizia con l'offerta preselezionata e segue le selezioni successive. Se consenti il caricamento della pagina senza alcuna offerta selezionata, i clienti devono scegliere un'offerta prima che la barra possa aggiungerla.

Scegli un layout: Floating o Fixed

Usa l'opzione Layout della barra fissa per scegliere come viene posizionata la barra nella pagina:

• Floating - una scheda centrata, rientrata rispetto ai bordi con un piccolo spazio, che mantiene gli angoli arrotondati.
• Fixed - una barra a larghezza intera fissata al bordo inferiore, estesa da un bordo all'altro.

I due layout gestiscono in modo diverso l'arrotondamento degli angoli. Passando a Fixed, il raggio degli angoli della barra viene impostato su 0, così può aderire ai bordi dello schermo. Passando a Floating, viene ripristinato un angolo arrotondato se il raggio era impostato su 0. In seguito puoi regolare con precisione il raggio degli angoli nei controlli di stile, descritti di seguito, ma Fixed è progettato per rimanere squadrato.

Mostra su desktop e dispositivi mobili

Due caselle di controllo determinano dove viene mostrata la barra:

• Mostra su desktop
• Mostra su dispositivo mobile

Entrambe sono attivate per impostazione predefinita. Puoi disattivare una delle due, ad esempio per mostrare la barra fissa solo sui dispositivi mobili, dove è più probabile che il pulsante originale Aggiungi al carrello esca dalla visualizzazione scorrendo.

Controlla la pagina mobile effettiva usando il titolo e il prezzo dell'offerta più lunghi. Sugli schermi stretti, la barra semplifica alcuni dettagli del prezzo originale, del risparmio e del prezzo nel pulsante per mantenere leggibile l'azione. Non aspettarti che ogni dettaglio desktop venga mostrato su un telefono di piccole dimensioni.

Imposta il titolo e il testo del pulsante

In modalità di scorrimento fino alle offerte, la barra fissa presenta due campi di testo:

• Titolo - il testo mostrato accanto al pulsante. Supporta variabili modello, quindi puoi inserire valori dinamici come {{product_title}} (impostazione predefinita), {{saved_percentage}} oppure {{price_total}}. Usa l'inseritore di variabili nel campo per aggiungerle.
• Testo del pulsante - l'etichetta del pulsante fisso. L'impostazione predefinita è "Scegli bundle".

La modalità di aggiunta al carrello mostra il titolo dell'offerta selezionata e usa il proprio campo Testo del pulsante Aggiungi al carrello. I due testi dei pulsanti hanno traduzioni separate, quindi modificare il testo di una modalità non sovrascrive quello dell'altra.

In Testo della barra fissa, puoi anche modificare il badge del regalo gratuito, i badge dei componenti aggiuntivi singoli e multipli e il testo del pulsante Scegli opzioni. Mantieni {{count}} nel messaggio dei componenti aggiuntivi multipli, così può mostrare il conteggio effettivo.

Aggiungi il conto alla rovescia integrato, facoltativo

Puoi mostrare un conto alla rovescia all'interno della barra fissa con la casella di controllo Mostra il conto alla rovescia nella barra fissa.

Questa opzione richiede che il timer conto alla rovescia sia attivato nello stesso bundle. Se il timer conto alla rovescia è disattivato, la casella di controllo è disabilitata e non può essere selezionata. Dopo aver attivato il timer conto alla rovescia, puoi attivare anche questa opzione.

Il conto alla rovescia integrato riutilizza il titolo compatto dalle impostazioni del timer conto alla rovescia e il suo stile segue il tema della barra fissa.

Se in seguito disattivi il timer conto alla rovescia, il conto alla rovescia della barra fissa viene disattivato automaticamente.

Personalizza la barra fissa

Apri il gruppo Stile di Aggiungi al carrello fisso per modificarne l'aspetto. I controlli sono raggruppati in sezioni a fisarmonica:

• Sfondo - colore uniforme o sfumatura per la barra.
• Contenitore - colore e larghezza del bordo, raggio degli angoli, spaziatura interna e ombra.
• Titolo - colore del testo, dimensione del carattere e peso del carattere.
• Prezzo - stile del testo del prezzo in modalità aggiunta al carrello.
• Pulsante - colore dello sfondo, colore del testo, dimensione e peso del carattere, spaziatura interna e raggio degli angoli.
• Immagine del prodotto - dimensione dell'immagine, raggio degli angoli, larghezza e colore del bordo.
• Conto alla rovescia - colore dello sfondo, colore del testo, dimensione e peso del carattere e spaziatura interna. Questo gruppo compare solo quando il conto alla rovescia integrato è attivato.

Per ottenere rapidamente un aspetto coordinato, usa il selettore dei colori preimpostati nella parte superiore della sezione. Offre anche Abbina gli angoli di ATC fisso al widget principale, che imposta il raggio degli angoli della barra in modo che corrisponda a quello del widget principale del bundle, per un risultato coerente.

Nota sul raggio degli angoli

Ricorda che il layout Fixed forza un raggio degli angoli pari a 0. Se imposti un raggio arrotondato nello stile del Contenitore ma gli angoli continuano ad apparire squadrati, verifica che il layout sia impostato su Floating.

Salva e prova entrambe le azioni

Salva, quindi prova una pagina prodotto specifica con lo sconto attivo. In modalità di scorrimento, fai scorrere la pagina oltre le offerte e usa il pulsante fisso per tornare indietro. In modalità di aggiunta al carrello, seleziona un'offerta e le varianti, quindi aggiungi tramite il pulsante fisso. Controlla quantità, varianti e totale nel carrello e al checkout. Ripeti su dispositivo mobile e prova una scelta non disponibile o incompleta: la barra dovrebbe riportare il cliente indietro per completare la selezione.

Nel nostro esempio, Acquista 2 aggiunge due borse Ivory Small con un subtotale dei prodotti di $43.20 dopo uno sconto del 10%. Scegliendo la combinazione Blush Small non disponibile, l'azione fissa cambia in Scegli opzioni; cambiando la taglia con una disponibile, viene ripristinato Aggiungi al carrello. Il conto alla rovescia rimane visivo e non interrompe lo sconto quando raggiunge zero. Consulta Timer conto alla rovescia per il comportamento alla scadenza.