Design e visualizzazione

Non incluso in questa guida: dimensioni delle immagini, galleria e ritaglio (Guida Immagini e contenuti multimediali), slider, blocchi prodotto e pop-up della pagina iniziale (Guida alla creazione della pagina iniziale), pagine con il builder (Guida xoContentEditor) e la nuova navigazione per categorie a partire da XONIC 4.10 (Guida alla navigazione per categorie).

Cosa succede dopo il salvataggio

Molte impostazioni di design vengono integrate nel foglio di stile del negozio. Se si salva un valore in uno di questi gruppi in Impostazioni → Design: «Immagini», «Elenco prodotti», «Generale», «Slider», «Intestazione», «Colori», «Scheda prodotto», «Checkout» o «Off-Canvas», il negozio cancella il foglio di stile memorizzato nella cache e lo ricrea alla successiva visualizzazione della pagina. Se è configurato Cloudflare, anche lì viene svuotata la cache. Non è necessario utilizzare il pulsante «Svuota cache del template».

Se la modifica non è immediatamente visibile, ricaricate la pagina con Ctrl+F5 (su Mac cmd+Maiusc+R). Verificate sempre le modifiche direttamente nel negozio e su uno smartphone, consultate la sezione «Dispositivi mobili e tablet».

Colore dei badge dei prodotti

Per i badge personalizzati, come «Bio» o «Made in Germany», impostate i colori in Prodotti → Badge dei prodotti direttamente sul badge: «Colore di sfondo del badge» e «Colore dei caratteri/testo del badge». I due colori non devono essere uguali. Il campo «CSS aggiuntivo» consente di inserire ulteriori specifiche, ad esempio una cornice.

I contrassegni assegnati dal negozio stesso hanno, nel template standard, colori fissi con un contrasto sufficiente: lo sconto nelle offerte speciali, «Novità», «Top», «Pacchetto», «Merce di seconda scelta», «FSK 18», «Spedizione gratuita» e «Offerta esclusiva». Questi non seguono i colori del negozio. È possibile impostare colori diversi tramite un proprio CSS; si veda la sezione «CSS personalizzato».

In Impostazioni → Design → Intestazione (Header) è possibile impostare la larghezza e l’altezza del logo, le icone, l’intestazione per dispositivi mobili e il menu delle categorie. Cliccare per ingrandire.

Quali categorie sono presenti nel menu

Nel menu sono presenti le categorie per le quali, in Prodotti → Categorie / Prodotti, è attivata l’opzione «Categoria come scheda dell’intestazione». Le sottocategorie compaiono nel menu a tendina se è attivata l’opzione “Visualizza le sottocategorie nelle schede dell’intestazione”; il numero per colonna è determinato dall’impostazione “Sottomenu delle categorie dell’intestazione – Numero massimo 2° livello di categoria”.

È possibile scegliere la struttura del menu a tendina per ciascuna categoria principale nel campo «Modello di navigazione» oppure, per tutte le categorie, in «Modello di navigazione predefinito»:

• simple: solo testo, per poche sottocategorie.
• imagecard: a sinistra le sottocategorie, a destra immagine e descrizione della categoria.
• megamenu: larghezza intera con molte colonne, per assortimenti di grandi dimensioni.
• auto (impostazione predefinita): il negozio sceglie in base all’immagine, alla descrizione e al numero di sottocategorie.

Su smartphone e tablet, che il negozio riconosce come dispositivi mobili, viene sempre visualizzata la versione semplice.

Nomi di categoria lunghi

Se non tutte le voci rientrano nella barra dei menu, alcune vengono spostate su una seconda riga. L’intestazione non si adatta a questa situazione: la prima riga viene troncata in alto, mentre la seconda sporge lateralmente. Mantenete quindi il menu abbastanza snello da stare in una sola riga:

1. Nome breve, titolo lungo: nel menu compare il «Nome della categoria». Inserite lì una forma breve, ad esempio «Giardino», e la denominazione completa in «Titolo della categoria diverso». Il negozio mostra il titolo nella parte superiore della pagina della categoria.
2. Meno voci: disattivate «Categoria come scheda dell’intestazione» per le categorie che non devono apparire in alto. Affinché rimangano accessibili tramite il menu sul computer, attivate «Mostra icona del menu in modalità desktop»: il pulsante apre a sinistra il menu con tutte le categorie.
3. Più spazio: imposta «Navigazione superiore: posizione» su below. In questo modo il menu occuperà l’intera larghezza.

Con XONIC 4.10 si aggiunge la suddivisione in “Categorie in evidenza” e “Altre categorie”: ciò che non rientra più nella barra viene spostato dal negozio nel pannello “Altre categorie”, vedi la guida “Navigazione per categorie.ab” 4.10

Il menu a sinistra sullo smartphone

Il pulsante del menu apre a sinistra un menu con tutte le categorie. In Impostazioni → Design → Off-Canvas è possibile definire la profondità del menu («Off-Canvas a sinistra: Profondità massima delle categorie», impostazione predefinita 2) e se visualizzare le immagini delle categorie («Off-Canvas a sinistra: mostra immagini delle categorie»). Un numero ridotto di livelli e l’assenza di immagini rendono il menu più chiaro sugli schermi di piccole dimensioni.

Con XONIC 4.10 il menu a sinistra è stato riprogettato: ogni livello apre un proprio riquadro con il pulsante Indietro, a cui si aggiunge una barra con i chip delle categorie sotto l’intestazione mobile; si veda la guida Navigazione per categorie.ab 4.10

In «Visualizzazione del prodotto nell’elenco dei prodotti», ogni riga rappresenta una visualizzazione della pagina di categoria con un proprio numero di elementi per pagina e le proprie specifiche in riquadro o riga. Cliccare per ingrandire.

Colonne e riquadri

• Riquadri delle categorie: «Riquadri delle categorie: numero di colonne» determina quanti riquadri delle sottocategorie e delle categorie principali vengono visualizzati affiancati, separatamente per smartphone, tablet e computer. È possibile scegliere tra «Standard (1 / 2 / 3)», «Compatto (1 / 2 / 4)», «Molte categorie (2 / 3 / 6)» o valori personalizzati. Un numero minore di colonne comporta immagini delle categorie più grandi.
• Prodotti su smartphone: «Numero di prodotti affiancati (dispositivi mobili)» mostra sugli schermi stretti un prodotto per riga a tutta larghezza (1) oppure due affiancati (2, impostazione predefinita).
• Colore di sfondo dei blocchi di prodotti: nel «Configuratore per la presentazione e la commercializzazione dei prodotti», ogni riga presenta la colonna «Sfondo». Il colore si applica specificatamente a quel blocco su quella pagina.ab 4.9.135

Nomi degli articoli: righe e maiuscole

Non è disponibile un’impostazione specifica per la dimensione dei caratteri dei nomi degli articoli. È possibile impostarla tramite un proprio foglio CSS.

Effetti al passaggio del mouse

Quando si passa il mouse su una tessera di categoria, questa proietta una leggera ombra, l’immagine diventa leggermente più grande e il nome assume il colore primario. Non è presente un'opzione per attivare o disattivare questa funzione; l'effetto può essere disattivato tramite un proprio CSS. Per le tessere dei prodotti, è possibile controllare l'apertura dei pulsanti tramite la colonna «Pulsanti» (in alto). Il cambio di immagine al passaggio del mouse è descritto nella guida Immagini e contenuti multimediali.

Bestseller e altri blocchi di prodotti

Le righe «Best seller», «Novità e consigli per l’acquisto» o «Offerte speciali» sopra e sotto l’elenco provengono dal «Configuratore per la presentazione e la commercializzazione dei prodotti» dello stesso gruppo. Ogni riga è un blocco con tipo e pagina di destinazione. Per le pagine delle categorie, sono rilevanti le righe con «/ Categorie»: per rimuovere il blocco dei bestseller, basta eliminare la riga «Bestseller / Categorie» tramite il cestino e salvare. Le colonne sono spiegate nella guida «Progettare la pagina iniziale».

In Impostazioni → Design → Vista dettagli prodotto è possibile definire la posizione della descrizione e quali elementi di controllo visualizzare nella pagina del prodotto. Cliccare per ingrandire.

La descrizione sullo smartphone

Sui dispositivi mobili, per impostazione predefinita la descrizione non si trova sotto le immagini, ma come scheda chiusa nell’area in cui sono presenti il prezzo e il pulsante del carrello. Due modi per renderla immediatamente visibile:

• «Scheda prodotto: scheda della descrizione aperta» su true: la scheda è già aperta all’apertura della pagina.
• «Vista dettagli prodotto: posizione della descrizione sui dispositivi mobili» su inherit: la descrizione si trova dove «Vista dettagli prodotto: posizione della descrizione» la colloca sul computer, di default sotto le immagini. 4.9.6

«Colonna della descrizione espansa (schermi stretti)» si applica solo alla descrizione sotto le immagini in una finestra del browser stretta sul computer, non sullo smartphone.

Altri pulsanti

Lente di ingrandimento

Per impostazione predefinita, la pagina del prodotto mostra la visualizzazione delle immagini gallery: cliccando su un’immagine si apre una vista ingrandita. La lente di ingrandimento al passaggio del cursore è disponibile solo nella visualizzazione classica legacy (Impostazioni → Design → Vista dettagli prodotto → Visualizzazione immagini nella vista prodotto). È possibile disattivarla selezionando Impostazioni → Design → Immagini → Tipo di zoom immagine prodotto = none.

Frecce nella pagina del prodotto

Le frecce sono presenti in due punti. Per le frecce della galleria immagini, consultare la sezione «Frecce di navigazione per dispositivi mobili» sopra e la guida Immagini e contenuti multimediali. Le righe «I clienti hanno acquistato anche» e «Ti consigliamo anche» funzionano come slider: con Impostazioni → Design → Elenco prodotti → Slider prodotto: Stile di navigazione = modern (impostazione predefinita), i pulsanti di scorrimento sul computer compaiono solo al passaggio del mouse. Per eliminare completamente le frecce, nel «Configuratore per la presentazione e la commercializzazione dei prodotti», nella riga «I clienti hanno acquistato anche / Prodotti» o «Ti consigliamo anche / Prodotti», impostare la colonna «Slider» su No; in questo modo i prodotti saranno elencati in righe una sotto l’altra.

Dove si trova ogni modulo? La modalità di modifica

In Impostazioni → Design → Generale, la scheda «Modalità di modifica vista cliente» apre il vostro negozio in una visualizzazione speciale. Davanti a ogni modulo del CMS Manager compare quindi un pulsante rosso con il suo nome, ad esempio «[Pagina CMS: $cms_footer]». Cliccandoci sopra, il modulo si apre nel backend in una nuova finestra. In basso a sinistra si trova il riquadro «Modalità di modifica»; cliccando sulla croce al suo interno si chiude la visualizzazione. In fondo alla pagina, il riquadro nasconde i pulsanti a sinistra nel footer. Questi moduli si aprono direttamente da CMS → Gestione CMS.

In modalità modifica, davanti a ogni blocco del CMS Manager è presente un pulsante rosso con il relativo nome; il riquadro «Modalità modifica» si trova in basso a sinistra nella finestra (nascosto nella sezione del piè di pagina). Cliccare per ingrandire.

Se un testo non presenta un pulsante rosso, proviene dalla maschera dell’articolo o da xoLanguage. Per accedere alla modalità di modifica, i collaboratori devono disporre inoltre del diritto di lettura per redirect.php, nell’editor dei diritti alla voce «Altre aree (senza voce di menu)»; si veda la guida Collaboratori, diritti e 2FA.ab 4.9.24

Se il numero di telefono cambia, modificarlo anche negli «argomenti dell’intestazione» e in Impostazioni → Generale → Impostazioni di base. I dati di contatto del piè di pagina non vengono ripresi da lì.

Il proprio popup, la finestra di avviso, nonché i popup relativi alla newsletter, al gruppo clienti, al paese di consegna e alla valuta sono descritti nella guida «Configurazione della pagina iniziale». La finestra dei cookie va configurata seguendo la guida «Testi legali, banner dei cookie e sicurezza dei prodotti ».

In Impostazioni → Design → Generale selezionate il template e il carattere; le schede sopra consentono di svuotare la cache del template, importare un carattere o aprire la modalità di modifica. Cliccate per ingrandire.

Personalizzazione delle singole pagine senza file CSS

• In xoContentEditor, ogni elemento nella sezione «Layout e visualizzazione» presenta il campo «Classi personalizzate». Qui è possibile inserire le classi già presenti nel template, nonché il colore di sfondo, le distanze e la visibilità in base al dispositivo; consultare la guida di xoContentEditor.
• Nell’editor di testo standard, la finestra di dialogo per l’inserimento di un link offre nel campo «Classe» stili predefiniti per i pulsanti, ad esempio «Button Primary».
• Le regole che devono valere per più pagine vanno inserite nel file CSS del template, non nei singoli contenuti.

Cosa succede durante un aggiornamento

• La cartella del vostro template personalizzato rimane invariata durante l’aggiornamento.
• Le nuove funzionalità presenti nei modelli inclusi nel vostro template appariranno solo dopo che tali modelli saranno stati adattati. Meno modelli vengono copiati dal vostro template, più funzionalità verranno applicate automaticamente con l’aggiornamento.
• Un esempio è la nuova navigazione in XONIC 4.10: in un template con intestazione personalizzata, il menu precedente continua a funzionare fino a quando i modelli non vengono adottati; si veda la guida alla navigazione per categorie.

Cambiare modello senza perdere le personalizzazioni

Le personalizzazioni nella cartella del template, ovvero i modelli personalizzati e il CSS personalizzato, sono valide solo finché quel template è selezionato. Se ne selezionate un altro, non saranno più visibili nel negozio; tuttavia, non verranno cancellate. Le programmazioni al di fuori del template, come le funzioni aggiuntive nel backend, non dipendono dal template. Alcune programmazioni speciali, tuttavia, hanno anche una parte nel template.

Alla voce «Cambio di template nelle categorie» (stesso gruppo) è possibile assegnare un altro template a una categoria principale e alle relative sottocategorie, ad esempio per una sezione dedicata alle promozioni. Nella categoria dovrete poi selezionarlo.

Applicazioni personalizzate nel negozio

Non è possibile integrare un configuratore personalizzato o un’altra applicazione con script tramite un campo di testo: xoContentEditor rimuove gli script al momento del salvataggio. Se il fornitore offre l’integrazione tramite iframe, utilizzate il modulo «Codice / HTML personalizzato», consultate la guida xoContentEditor. Se l’integrazione carica contenuti di un fornitore esterno, prestate attenzione al consenso; consultate la guida Testi legali, banner sui cookie e sicurezza dei prodotti. Tutto ciò che va oltre viene integrato da noi tramite programmazione personalizzata.

La stessa pagina di categoria su computer (1.440 pixel) e su smartphone (390 pixel): con una larghezza inferiore a 1.200 pixel, il pulsante del menu e il campo di ricerca sostituiscono la barra dei menu. Clicca per ingrandire.

Perché manca qualcosa sul tablet

Se in modalità orizzontale manca la barra dei menu, significa che il tablet è più stretto di 1.200 pixel: in tal caso, le categorie si trovano dietro il pulsante del menu. Inoltre, un tablet può essere abbastanza largo da contenere la barra dei menu e tuttavia essere considerato un dispositivo mobile; in tal caso, appare come un computer, ma mostra, ad esempio, la descrizione sotto forma di scheda. Quali tablet siano considerati dispositivi mobili dipende dall’identificativo inviato dal loro browser.

Come verificare la visualizzazione mobile

• Il metodo più affidabile è utilizzare uno smartphone vero e proprio.
• Su un computer, utilizzando la vista dispositivo degli strumenti di sviluppo del browser (F12), che invia anche l’identificativo di uno smartphone. Successivamente, ricaricate la pagina.
• Una finestra del browser semplicemente ridotta in larghezza mostra sì l’intestazione mobile, ma non i contenuti destinati ai dispositivi mobili.

Impostazioni per la visualizzazione mobile

In xoContentEditor è possibile impostare larghezza, ordine e visibilità separatamente per ogni elemento, sia per desktop che per dispositivi mobili; consultare la guida di xoContentEditor.

• Se si utilizzano colori personalizzati, verificare che il testo rimanga ben leggibile. Ciò vale in particolare per i colori primari chiari e per il testo su sfondi colorati nei blocchi dei prodotti.
• Non disattivare indicatori ed etichette in modo tale che le informazioni siano riconoscibili solo tramite il colore.
• Ciò che è garantito dal negozio e ciò che rimane di vostra competenza è indicato nella guida «Testi legali, banner sui cookie e sicurezza dei prodotti».