Recensito da Passi al tema Blocksy per il tuo negozio, apri la pagina negozio e le schede prodotto hanno un bell'aspetto. Poi provi un diverso posizionamento del pulsante della wishlist. Con l'opzione in alto a sinistra, il pulsante può sovrapporsi al badge SALDI. Nelle pagine prodotto, l'opzione in linea occupa un'intera riga sotto Aggiungi al Carrello.
Niente di tutto ciò è rotto, esattamente. Sono due strumenti ben costruiti che fanno scelte di layout diverse, e le discrepanze si notano nei dettagli. Sono quei dettagli che un acquirente nota quando decide se salvare qualcosa per dopo.
Ecco perché il plugin gratuito SaveTo Wishlist Lite ora include un'integrazione dedicata per la wishlist di Blocksy. Di seguito, ti mostrerò cosa cambia e quali posizionamenti si adattano meglio a Blocksy. Ti mostrerò anche come verificarlo.
Salta a:
- Perché i pulsanti della wishlist possono sembrare fuori posto su Blocksy
- Cosa fa l'integrazione Blocksy di SaveTo Wishlist
- Cosa ti serve prima di iniziare
- Come Scegliere i Posizionamenti del Pulsante Wishlist su Blocksy
- Quando Scegliere in Alto a Destra invece che in Alto a Sinistra
- Come Confermare che l'Integrazione Blocksy Funziona
- I Limiti da Conoscere
- Domande frequenti
- Pronto per Impostare la Tua Wishlist Blocksy?
Perché i pulsanti della wishlist possono sembrare fuori posto su Blocksy
Blocksy mantiene il markup dei prodotti di WooCommerce ma lo organizza con le proprie impostazioni. È così che Blocksy ti dà così tanto controllo sul layout del tuo negozio. Tuttavia, un pulsante di plugin inserito in quel layout non conosce automaticamente le regole di Blocksy.
I nostri sviluppatori hanno misurato quattro punti specifici in cui ciò si è manifestato:
- Allineamento scheda: Blocksy allinea il contenuto della scheda in base alla propria impostazione di Allineamento Contenuto. Il pulsante della wishlist era comunque centrato, quindi nelle schede allineate a sinistra era l'unica cosa fuori posto.
- L'angolo del badge: Blocksy posiziona i badge Saldo e esaurito nell'angolo in alto a sinistra della scheda. Un pulsante della wishlist posizionato lì si sovrapponeva al badge e lo nascondeva.
- La galleria prodotti: Nelle pagine prodotto, il posizionamento dell'immagine in alto a sinistra poteva finire nell'angolo della pagina, lontano dalla foto.
- La riga Aggiungi al carrello: Blocksy estende gli elementi extra in quella riga a larghezza intera. Quindi un pulsante wishlist "inline" finiva su una riga a sé stante.
Blocksy è una scelta popolare, quindi questi dettagli raggiungono molti negozi. Secondo la sua scheda su WordPress.org, Blocksy ha più di 300.000 installazioni attive e una media di 5 stelle su 873 recensioni. È realizzato da CreativeThemes e compare in raccolte come la guida ai temi WooCommerce di Store Owner Tips.
Il pulsante giusto è importante perché salvare è un'abitudine reale. Secondo la ricerca di Baymard Institute sulle pagine prodotto, il 21% dei 1.193 intervistati nello studio si affida alle funzionalità "Salva". Eppure l'89% dei siti benchmarkati da Baymard non rende le funzionalità di salvataggio facili da accedere e utilizzare. Un pulsante che appare fuori posto non aiuta e mina il valore di conversione di una wishlist.
Cosa fa l'integrazione Blocksy di SaveTo Wishlist
L'integrazione è un foglio di stile aggiuntivo. SaveTo Wishlist Lite 1.1.6 lo carica automaticamente ogni volta che Blocksy, o un tema child di Blocksy, è il tuo tema attivo. Non c'è nulla da attivare.
| Posizionamento | Senza l'integrazione | Con l'integrazione |
|---|---|---|
| Posizionamenti Negozio, Titolo e Aggiungi al carrello | Pulsante centrato, anche su schede allineate a sinistra | Segue l'allineamento delle tue schede Blocksy: sinistra, centro o destra |
| Negozio, In alto a sinistra dell'immagine prodotto | Copre il badge Saldo o esaurito | Si sposta in basso per stare sotto il badge |
| Prodotto, In alto a sinistra dell'immagine prodotto | Può finire fuori dalla galleria prodotti | Si posiziona sopra la galleria, sotto qualsiasi badge |
| Prodotto, Inline con il pulsante Aggiungi al carrello | Occupa un'intera riga a sé stante | Condivide la riga con Aggiungi al carrello |
Il foglio di stile regola solo posizione, spaziatura e allineamento. I colori, le dimensioni e lo stile del tuo pulsante rimangono esattamente come li hai impostati in SaveTo Wishlist. Funziona anche con ogni modalità di caricamento CSS Frontend. I negozi che caricano uno stile minimo o nullo del plugin ottengono le stesse correzioni.
La nostra integrazione Woostify funziona allo stesso modo: un foglio di stile specifico per il tema, caricato automaticamente.
Cosa non fa l'integrazione
L'ambito è volutamente ridotto, il che mantiene anche il rischio basso.
- Nessuna impostazione: Non c'è nessuna pagina, interruttore o opzione di Blocksy in SaveTo Wishlist.
- Nessun JavaScript aggiuntivo: È solo CSS, quindi non aggiunge script. Il nostro test di velocità mostra cosa aggiunge il plugin stesso a una pagina prodotto.
- Nessun nuovo design: Non rielabora lo stile del pulsante per farlo assomigliare ai pulsanti di Blocksy. Si adatta al tuo pulsante esistente al layout di Blocksy.
- Nessun altro tema interessato: Il foglio di stile viene caricato solo quando Blocksy è il tema attivo. I nostri test automatici controllano entrambi gli aspetti.
Cosa ti serve prima di iniziare
Hai bisogno di due cose, ed entrambe sono gratuite.
- Il tema Blocksy: O un tema child basato su di esso. I nostri sviluppatori hanno misurato le correzioni su Blocksy 2.1.57 e abbiamo scattato gli screenshot qui sotto su 2.1.58.
- SaveTo Wishlist Lite 1.1.6 o versioni successive: Le versioni precedenti non includono il foglio di stile di Blocksy. Aggiorna prima se hai una versione precedente.
L'integrazione si trova nel plugin gratuito, quindi non hai bisogno di SaveTo Wishlist Pro per essa. Anche i negozi Pro la ottengono, perché Pro funziona sopra il plugin gratuito.
Blocksy è un tema classico, quindi il tuo negozio e le pagine dei prodotti utilizzano i modelli standard di WooCommerce. Se invece crei una pagina con il blocco WooCommerce Product Collection, il pulsante viene comunque visualizzato. Lì, la gestione dei blocchi del plugin stesso lo posiziona. Crei pagine prodotto con Elementor invece? La nostra guida ai widget di Elementor copre quella strada.
Come Scegliere i Posizionamenti del Pulsante Wishlist su Blocksy
Ogni posizionamento mostra il pulsante su Blocksy, quindi stai scegliendo un aspetto, non evitando problemi. Troverai entrambi in SaveTo Wishlist > Impostazioni > Posizionamento e stili del pulsante. Cerca nelle sezioni Pagina Negozio e Pagina Prodotto.
Posizionamenti nella pagina negozio
Ecco dove ciascuno dei sei posizionamenti nel negozio si colloca su una scheda prodotto Blocksy:
- In alto a destra dell'immagine del prodotto: L'impostazione predefinita del plugin e la migliore per Blocksy. L'angolo dell'etichetta è a sinistra, quindi nulla compete per questo spazio.
- In alto a sinistra dell'immagine del prodotto: Su una scheda con un'etichetta, il pulsante si sposta verso il basso per posizionarsi sotto di essa. Su una scheda senza etichetta, mantiene la sua posizione normale nell'angolo.
- Sopra il titolo del prodotto e Sotto il titolo del prodotto: Entrambi mostrano il pulsante tra l'immagine e il titolo. Questo perché Blocksy visualizza il proprio titolo.
- Sopra il pulsante Aggiungi al carrello: Mostra il pulsante direttamente sotto il titolo.
- Sotto il pulsante Aggiungi al carrello: Mostra il pulsante dopo il pulsante Aggiungi al carrello.
Gli ultimi quattro seguono tutti l'impostazione di Allineamento Contenuto di Blocksy per le schede prodotto. Cambia le tue schede in centro o a destra e il pulsante si sposta con esse. Preferisci non avere il pulsante su un tipo di pagina? Scegli Non mostrare per esso, come spiega la nostra guida per nascondere il pulsante della wishlist.
🔍️ Cosa abbiamo visto: Sopra il titolo del prodotto e Sotto il titolo del prodotto appaiono uguali su Blocksy. Se passi dall'uno all'altro aspettandoti che il pulsante si sposti, non lo farà, ed è previsto. Scegli uno dei due, o scegli Sopra il pulsante Aggiungi al carrello se vuoi il pulsante sotto il titolo.
Posizionamenti nella pagina prodotto
Tutti e sette i posizionamenti della pagina prodotto funzionano su Blocksy. Due di essi ricevono un aiuto specifico dal foglio di stile.
In linea con il pulsante Aggiungi al carrello si affianca ad Aggiungi al carrello sul desktop. Su schermi stretti, si sposta sotto di esso, perché il pulsante di Blocksy occupa già l'intera riga.
In alto a sinistra dell'immagine del prodotto si sovrappone alla galleria del prodotto. Su un prodotto con un badge, si posiziona sotto il badge invece di coprirlo.
Gli altri cinque posizionamenti non richiedono alcuna gestione speciale dal foglio di stile.
Quando Scegliere in Alto a Destra invece che in Alto a Sinistra
Scegli In alto a destra dell'immagine del prodotto se i tuoi prodotti presentano badge grandi o impilati. La regolazione in alto a sinistra libera un badge della dimensione predefinita di Blocksy, e nient'altro.
Il foglio di stile riconosce i badge Saldi, i badge esauriti e i badge personalizzati di Blocksy. Sposta il pulsante solo sulle schede che ne mostrano effettivamente uno. Ecco perché una griglia mista può avere pulsanti a due altezze diverse nell'angolo in alto a sinistra.
Quindi, se le tue promozioni utilizzano più badge nello stesso angolo, In alto a destra mantiene ogni scheda coerente. È anche l'impostazione predefinita del plugin, quindi una nuova installazione su Blocksy la utilizza già.
Alcuni acquirenti salvano un prodotto per attendere un prezzo migliore. Per loro, SaveTo Wishlist Pro può inviare avvisi di calo prezzo quando un prodotto salvato diventa più economico.
Come Confermare che l'Integrazione Blocksy Funziona
Questi controlli richiedono alcuni minuti e coprono le posizioni che il foglio di stile modifica. Eseguili una volta dopo l'aggiornamento e di nuovo dopo un importante aggiornamento di Blocksy.
- Verifica il caricamento del foglio di stile: Visualizza il sorgente di una pagina del negozio e cerca
savetowishlist-blocksy.css. Dovrebbe essere presente mentre Blocksy è attivo. Se un plugin di minificazione combina i tuoi file CSS, il nome potrebbe non essere visualizzato. - Controlla un prodotto in saldo: Con il posizionamento dell'immagine in alto a sinistra, il pulsante dovrebbe trovarsi sotto il badge Saldi.
- Verifica l'allineamento della tua scheda: Nelle schede Blocksy allineate a sinistra, anche un titolo o un posizionamento Aggiungi al carrello dovrebbero allinearsi a sinistra.
- Verifica la riga Aggiungi al carrello: Con il posizionamento Inline, il pulsante dovrebbe condividere la riga sul desktop. Su un telefono, scende sotto.
- Verifica come ospite: Apri il negozio in una finestra privata. Gli ospiti vedono lo stesso pulsante, purché le liste dei desideri degli ospiti siano attive.
Se qualcosa sembra ancora fuori posto, un plugin di cache o di minificazione potrebbe servire CSS vecchi. Svuotalo, quindi ricarica. Per altri modi per abbinare il pulsante al tuo tema, consulta il nostro post sulle opzioni dell'icona del pulsante della lista dei desideri.
I Limiti da Conoscere
L'integrazione copre i modelli di negozio, archivio e prodotto singolo. Alcune cose rimangono al di fuori di essa.
- La pagina del carrello: I pulsanti del carrello, come l'opzione per salvare singoli articoli del carrello, utilizzano lo stile normale del plugin.
- Badge grandi: L'offset in alto a sinistra è dimensionato per un badge predefinito. Design più grandi dovrebbero utilizzare In alto a destra.
- Versioni di Blocksy: Le correzioni sono state misurate su Blocksy 2.1.57. Una futura versione di Blocksy potrebbe cambiare il suo layout, quindi ricontrolla dopo gli aggiornamenti importanti.
- Aspetto del pulsante: L'integrazione adatta il tuo pulsante al layout di Blocksy. Non copia il design del pulsante di Blocksy.
I nostri test automatici vengono eseguiti su un'installazione reale di Blocksy. Confermano che il foglio di stile viene caricato su Blocksy e non su un altro tema. Verificano anche che il pulsante inline mantenga la sua riga.
Domande frequenti
Devo attivare l'integrazione Blocksy?
No. SaveTo Wishlist Lite 1.1.6 e versioni successive caricano automaticamente il foglio di stile di Blocksy ogni volta che Blocksy è il tuo tema attivo. Non c'è alcuna impostazione, interruttore o pagina per questo.
Funziona con un tema child di Blocksy?
Sì. Il plugin controlla il tema padre, quindi un tema child basato su Blocksy riceve lo stesso foglio di stile di Blocksy stesso.
Ho bisogno di SaveTo Wishlist Pro per l'integrazione Blocksy?
No. È incluso nel plugin gratuito SaveTo Wishlist Lite, versione 1.1.6 e successive. I negozi Pro lo ottengono automaticamente perché Pro funziona sopra il plugin gratuito.
Pronto per Impostare la Tua Wishlist Blocksy?
Blocksy conferisce al tuo negozio un layout pulito e il pulsante della wishlist ora si adatta ad esso senza CSS personalizzato. L'unica vera decisione rimasta è dove vuoi che il pulsante si trovi.
- Vedi cosa cambia l'integrazione nelle schede di Blocksy e nelle pagine dei prodotti.
- Scegli i tuoi posizionamenti, a partire da In alto a destra nella pagina del negozio.
- Usa In alto a destra per badge grandi per mantenere coerenti tutte le schede.
- Esegui i cinque controlli dopo l'aggiornamento e dopo i principali aggiornamenti di Blocksy.
La tua configurazione della wishlist di Blocksy è a un aggiornamento del plugin di distanza. Installa o aggiorna SaveTo Wishlist Lite alla versione 1.1.6 e il foglio di stile farà il resto.
