Menu

Personalizzazione del Negozio con HTML/CSS

Se lo desideri, puoi aggiungere le tue immagini, i tuoi testi, link e altri elementi HTML.

Hai a disposizione tre campi d’inserimento per creare l’HTML/CSS su misura per il tuo Negozio che troverai sotto Impostazioni del Negozio > SpreadShop > Impostazioni avanzate > HTML/CSS (Nota: La voce del menu "SpreadShop" è visibile solo per gli utenti che hanno creato il loro account in data precedente al 30.09.2015):

  • Header (testata) del Negozio
  • Footer (piè di pagina) del Negozio
  • Fogli di stile CSS

Scrivi il tuo codice HTML nella riga destinata a header e footer: sarà nostra cura verificare che il codice vada bene, affinché il tuo negozio funzioni sempre perfettamente. Al link https://validator.w3.org/#validate_by_input potrai anche verificare autonomamente che l’HTML immesso funzioni correttamente. Nota che per ragioni di sicurezza non è possibile usare JavaScript, e che eventuali inserimenti saranno rimossi.

Troverai di seguito una selezione di classi di CSS definibili che potrebbero tornarti utili per il tuo Negozio: dovrebbero aiutarti nella creazione del tuo spazio personalizzato. Rimane a tua discrezione, se lo desideri, l’applicazione di altre classi.

Cosa vuoi modificare? Classe di CSS
Immagine o colore di sfondo .customPageBackground
Testata .customHeader
Piè di pagina con info legali e C&T .customFooter
Contatore nel carrello e nella Lista Preferiti .customCounter
Avvertenze .customNotification
Messaggi d’errore .customNotification.sprd-error
Titoli, per es. nel carrello .customHeadline
Elementi di scelta (taglia, colore) .customSelector
Opzione selezionata tra gli elementi di scelta .customSelector .sprd-active.sprd-item
Selezione categoria (versione non mobile) .customFilterItem, .customSubfilterItem
Effetto hover nella scelta categoria (versione non mobile) .customSubfilterItem:hover
Solo smartphone, non tablet o PC @media screen and (max-width: 767px) .customSelector.sprd-open
Diversi pulsanti .customButton
Pulsanti standard .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Pulsanti importanti, come "Acquista" .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Pulsanti secondari come "Aggiungi al carrello" (nella Lista Preferiti) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Campo di ricerca su dispositivi mobili, menu a cascata su PC .customFilter
Immagini animate sulla schermata di caricamento .sprd-loadable.sprd-loading, .sprd-loader

Questo articolo è stato utile?