Con Struttura template decidi come appare il tuo negozio: quali riquadri mostrare e in quali pagine, i colori del template, il logo e, se ti serve, un CSS tutto tuo. Questa guida spiega le prime due schede della pagina, Struttura della pagina e Configura. La terza, Scheda prodotto, non è trattata qui.
Dove si trova
Nel menu a sinistra clicca su Impostazioni; nel Pannello Di Controllo, nella sezione ECOMMERCE, clicca su Struttura template.
Si apre la scheda Struttura della pagina, con i riquadri. I colori, il logo e il CSS sono nella scheda Configura. Ogni scheda ha il suo pulsante Salva in alto a destra: salva quella scheda soltanto, quindi salva prima di passare all'altra.
Attenzione al template
In alto vedi quale template usa il tuo sito, per esempio Template attualmente abilitato sullo Store: Enlighten. Nel menu Seleziona il template da configurare per il tuo negozio lascia sempre il template attuale: quando clicchi su Salva, il template scelto in questo menu diventa quello del sito. Se scegli un template diverso e salvi, cambi l'aspetto di tutto il negozio.
I riquadri delle pagine
I riquadri sono i blocchi che compaiono intorno al contenuto delle pagine: le categorie o i filtri nella colonna di sinistra, le novità o i prodotti visti di recente sotto la home page, e così via.
Mostrare o nascondere un riquadro
La scheda Struttura della pagina è divisa in due aree. In Contenuti disponibili ci sono i riquadri che non stai usando: i Box Laterali e i Content Centrali. In Contenuti attualmente attivi ci sono quelli che compaiono sul sito, divisi tra Colonna di Sinistra e Contenuto Centrale.
Per mostrare un riquadro trascinalo, tenendolo per la barra con il nome, dai contenuti disponibili alla colonna giusta tra quelli attivi: i box laterali vanno nella Colonna di Sinistra, i contenuti centrali nel Contenuto Centrale. Rispetta questa regola: un box laterale messo nel contenuto centrale, o il contrario, viene salvato ma non compare da nessuna parte. Per nascondere un riquadro riportalo tra i disponibili. Il segno − sulla barra chiude il riquadro nella pagina del pannello, così la colonna resta più corta: non cambia nulla sul sito.
Cambiare l'ordine
Dentro una colonna i riquadri compaiono sul sito nello stesso ordine in cui li vedi qui, dall'alto in basso. Per cambiarlo trascina un riquadro più su o più giù e salva.
Scegliere le pagine
Dentro ogni riquadro attivo ci sono delle caselle: spunta le pagine in cui deve comparire. Con * il riquadro compare in tutte le pagine; quando trascini un riquadro tra gli attivi, questa casella è già spuntata. Se togli la spunta da * ricompaiono le altre caselle, e puoi scegliere pagina per pagina.
Le pagine principali sono queste: index/index è la home page, index/product_listing l'elenco dei prodotti di una categoria e products/info la pagina del prodotto. Nella colonna di sinistra puoi scegliere anche shopping_cart (il carrello), onestepcheckout (il checkout), account/* (l'area del cliente), info/* (le pagine informative come Chi siamo o Contatti), manufacturers/* (le pagine dei brand), products/* (tutte le pagine dei prodotti, comprese quelle delle offerte e delle novità), search/* (i risultati della ricerca) e index/category_listing (la griglia delle sottocategorie, che compare solo se in Visualizzazione Prodotti hai attivato Visualizza le categorie in centro pagina).
Ogni riquadro attivo deve avere almeno una casella spuntata: se ne lasci uno senza pagine, il salvataggio dà errore.
Dove compaiono sul sito
I box laterali compaiono nella colonna a sinistra del contenuto della pagina. I contenuti centrali compaiono sotto il contenuto della pagina: per esempio, sulla home page, dopo i banner e i testi.
In alcuni negozi la colonna di sinistra è nascosta per scelta grafica, e in quel caso i box laterali non si vedono anche se sono attivi. Se è il tuo caso e vuoi cambiarlo, scrivi all'assistenza.
Le modifiche ai riquadri possono metterci fino a 24 ore per comparire sul sito.
I riquadri che funzionano con Enlighten
Tra i box laterali funzionano Categorie, Cerca, Carrello, Brand, Novità, Offerte, Più venduti, Informazioni, Info Brand, Storico, Info Pagamento/Spedizione, Link Utili, Informazioni Utili, Lingue, Riepilogo Checkout, Contenuto del carrello e i filtri Filtro Prezzo, Filtro Attributi e Filtro Brand. Il testo di Link Utili e di Informazioni Utili, come i titoli di tutti i riquadri, lo cambi da Gestione Testi.
Tra i contenuti centrali funzionano Nuovi Prodotti, Prossimamente, Visti Recentemente, Prodotti Collegati, Ricerca Avanzata, Offerte, Sconti, Categorie Negozio, Più venduti e Migliori Sconti. Quanti prodotti mostrare in Nuovi Prodotti lo decidi in Pannello Di Controllo › Visualizzazione Prodotti, con Numero di prodotti nuovi da visualizzare in home page.
Gli altri riquadri dell'elenco, come Checkout, Valute, Notifiche Prodotto, Tag, Template e Recensioni, servivano ai template precedenti e con Enlighten non mostrano nulla.
I riquadri con la matita
Nel Contenuto Centrale, accanto ad alcuni riquadri, c'è una matita che apre le loro impostazioni. In Slider Brands, la fila di loghi dei marchi in home page, scegli con Quanti loghi vuoi visualizzare? quanti loghi mostrare per riga e se farli scorrere a carosello. Il carosello rallenta la pagina, quindi tienilo spento se non ti serve. I loghi devono essere già caricati nei brand, in Magazzino › Brand: senza loghi il riquadro non si può salvare.
Per i banner della home page, invece dei riquadri Banner Principale, Banner Secondari e Slider Immagini, ti consigliamo il metodo spiegato in Modifica dei banner: le immagini e i link li controlli tutti da un solo testo, lingua per lingua.
Colori, logo e CSS personalizzato
Clicca sulla scheda Configura. Verso il fondo della pagina trovi i sette colori del template, il logo, la scelta delle icone e il campo CSS personalizzato (sovrascrive quello del template).
Quando hai finito clicca su Salva in alto a destra. Il pulsante salva tutti i campi della scheda insieme e ti riporta alla Struttura della pagina. Le modifiche compaiono subito sul sito.
I colori
In ogni campo scrivi un colore come lo scrivi in un CSS: un codice come #1e6fd9, oppure rgb(30, 111, 217). Non lasciare vuoto Colore principale: se è vuoto, il sito ignora tutti i colori di questa scheda e anche il logo.
Ecco cosa cambia ognuno.
Colore principale è il colore del negozio: i bottoni (per esempio Aggiungi al carrello), la barra del menu delle categorie, i prezzi negli elenchi e nella pagina del prodotto, il totale del carrello, le etichette di sconto e di novità, le caselle selezionate e le frecce delle gallerie di immagini.
Colore del testo colora i titoli: quello della pagina, dei riquadri, del footer e il nome del prodotto nella sua pagina. Colora anche lo sfondo del pulsante della ricerca in alto e la categoria su cui passa il mouse nel menu.
Colore secondario colora i link (menu in alto, categorie, percorso di navigazione, riquadri laterali, footer), i nomi dei prodotti negli elenchi, il prezzo barrato negli elenchi e le icone dell'intestazione e del carrello.
Prezzo barrato e bordi checkout colora il prezzo barrato nella pagina del prodotto e nei riquadri laterali, e i bordi dei passaggi del checkout.
Bordi e contatore del carrello colora i bordi della ricerca, dei campi quantità, dei menu a tendina e dei riquadri, la linea sotto i titoli dei riquadri laterali e la linea sopra il footer. Colora anche lo sfondo del numero di articoli sull'icona del carrello e dei passaggi del checkout.
Colore dello sfondo è lo sfondo dell'intestazione, della pagina, dei riquadri laterali, della descrizione del prodotto e del footer. È anche il colore delle scritte nella barra del menu delle categorie.
Sfondo prodotti e riquadri è lo sfondo delle schede dei prodotti negli elenchi e dei riquadri del carrello, del coupon e dei menu a tendina, e il colore del testo nelle etichette di sconto.
Il logo
Nel campo Indirizzo dell'immagine del logo scrivi l'indirizzo dell'immagine del logo: un indirizzo completo che inizia con https://, per esempio quello che ottieni caricando l'immagine con Upload su S3 (lo spieghiamo in Modifica dei banner). Usa un nome di file senza spazi e senza parentesi, altrimenti il logo non compare. Lo stesso indirizzo serve anche alle email del negozio e a Google e ai social, che lo mostrano come immagine del negozio.
Con alcune intestazioni, sullo schermo stretto del telefono, il template non mostra il logo. Se capita anche nel tuo negozio, aggiungi questa riga al CSS personalizzato:
@media (max-width: 600px) { .top__logo { background-image: var(--logoURL) !important; } }Le icone
Con Scegli l'icona da utilizzare scegli lo stile delle icone del sito, nell'intestazione, nel menu delle categorie, negli elenchi, nella pagina del prodotto e nel checkout: Material Filled, Material Outlined, Font Awesome, Iconmoon, Iconmonstr Bold o Iconmonstr Thin. Se non scegli nulla il sito usa le Material.
Il CSS personalizzato
Nel campo CSS personalizzato (sovrascrive quello del template) puoi scrivere regole CSS per cambiare l'aspetto del sito oltre a quello che permettono i colori. Il sito le aggiunge dopo tutti gli stili del template, quindi a parità di selettore vince la tua regola e di solito non serve !important. Per trovare il selettore giusto apri il sito con il browser, clicca con il tasto destro sull'elemento e scegli Ispeziona.
Il CSS vale su tutte le pagine del sito, tranne le landing page. Il pannello non controlla quello che scrivi: una parentesi graffa dimenticata può rovinare l'aspetto di tutto il sito. Prima di cambiare il contenuto copialo da parte, e dopo il salvataggio controlla il sito in una finestra di navigazione privata.
Per esempio, queste righe ingrandiscono il prezzo nella pagina del prodotto e arrotondano gli angoli dei bottoni:
.product-info__infocol__price { font-size: 2rem; }
.btn, .btn-enlighten { border-radius: 8px; }Le variabili dei colori
Nel CSS personalizzato puoi usare i colori della scheda Configura senza riscriverli, con le variabili del template. Se un giorno cambi un colore, le tue regole lo seguono da sole. Ogni variabile corrisponde a un campo:
- --enlighten-color: Colore principale
- --enlighten-standard1: Colore del testo
- --enlighten-standard2: Colore secondario
- --enlighten-standard3: Prezzo barrato e bordi checkout
- --enlighten-standard4: Bordi e contatore del carrello
- --enlighten-standard5: Colore dello sfondo
- --enlighten-standard6: Sfondo prodotti e riquadri
- --logoURL: l'immagine del logo, da usare come sfondo
Le usi con var(). Per esempio, questa riga dà al footer il colore principale del negozio:
.footer { background-color: var(--enlighten-color); }Gli stessi colori sono pronti anche come classi, da usare nei testi che scrivi in HTML in Gestione Testi. enlighten-text e enlighten-back danno il colore principale al testo o allo sfondo. Da enlighten-color1-text a enlighten-color6-text, e da enlighten-color1-back a enlighten-color6-back, usano gli altri sei colori nello stesso ordine delle variabili. Per esempio, <span class="enlighten-text">Spedizione gratuita</span> scrive la frase nel colore principale.
Il link all'elenco dei marchi nel footer
Ogni negozio ha una pagina con tutti i suoi marchi in ordine alfabetico, per esempio /catalogo-online/brands: elenca i marchi che hanno prodotti disponibili e ognuno porta alla sua pagina. Puoi aggiungere nel footer del sito un link a questa pagina, accanto a Uso dei cookie e all'informativa sulla privacy. Aiuta i clienti che cercano un marchio, e aiuta Google a trovare tutte le pagine dei marchi.
Il link è spento finché non lo accendi tu. Nella scheda Configura, alla domanda Vuoi un link all'elenco dei marchi (A-Z) nel footer, accanto a Cookie e Privacy? scegli Si e clicca su Salva.
Il testo del link è il titolo della pagina dei marchi, di serie Brands: per cambiarlo cerca brands_heading in Gestione Testi. Come gli altri campi della scheda, il link compare subito sul sito.