Se il tuo E-commerce è incorporato nel tuo script HTML e desideri applicare degli stili, ti consigliamo di aggiungere un foglio di stile CSS al tuo spazio Web. In questo modo sei in grado di cambiare stili, colori, ecc.
Puoi scaricare il file CSS sulla tua pagina vetrina nel pannello amministrativo e-commerce. Se hai già un file CSS, puoi scegliere alcuni stili riportati di seguito e aggiungerli al tuo file esistente..
Dove posizionare il file CSS?
Ti raccomandiamo di posizionare il file CSS nella cartella in cui si trova il file HTML con il tuo E-commerce. Nel file HTML devi inserire un link al file CSS.
Il link al tuo CSS dovrà corrispondere a questo:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Sostituisci shopfront-embed-style.css con il nome del tuo file CSS, se lo hai rinominato. Devi posizionare il link subito dopo il tuo head-tag, ma prima del /head-tag di chiusura.
Parametri di stile
Puoi modificare i seguenti parametri:
- Famiglia di font
- Colore font
- Colore riempimento
- Menu a discesa
- Bordi
- Colori stato attivo
- Etichetta promozionale
- E-commerce in visualizzazione cellulare
Famiglia di font
Con la famiglia di font puoi cambiare il font principale utilizzato nel tuo E-commerce. Il primo font sarà quello visualizzato. Gli altri due sono di backup nel caso il primo font non fosse reperibile.
Esempio:
font-family: "Times New Roman",Times,serif;
Colore font
Per default il colore font è lo stesso per i testi, i collegamenti, i passaggi del mouse, ecc. Per cambiare il colore, basta cambiare il codice HEX.
Per impostare un colore differente, ad esempio, al passaggio del mouse sopra un collegamento, separa il parametro dall'elenco e assegna ad esso un proprio codice colore HEX.
Esempio:
.onecom-webshop-main,
.onecomwebshop-main a.link,
.onecomwebshop-main a.link:link,
.onecomwebshop-main a.link:visited,
.onecomwebshop-main a.link:hover,
.onecomwebshop-main a.link:active,
.onecomwebshop-main input,
.onecomwebshop-main select,
.onecomwebshop-main .text-color {
color: #363636;
}
Colore riempimento
I colori di riempimento si applicano agli sfondi sulle icone per tutto il negozio. Cambia i colori usando le impostazioni sottostanti.
Colore dell'icona SVG
Il colore riempimento viene applicato alle icone SVG del E-commerce, ad esempio, l'icona carrello. Per cambiare il colore, basta cambiare il codice HEX.
Esempio:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Colore di sfondo ( E-commerce)
Questa impostazione imposterà un colore di sfondo all'intero E-commerce. Puoi modificare il colore, cambiando il codice esadecimale.
Esempio:
.onecom-webshop-main {
background-color: #fdfdfd
}
Menu a discesa
Le opzioni di selezione categoria e assortimento prodotti sono menu a discesa. Puoi cambiare i colori dei menu a discesa.
Colore sfondo (menu a discesa)
Determina il colore di sfondo dei menu a discesa. Basta cambiare il codice HEX impostando il codice corrispondente al colore desiderato.
Esempio:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Colore bordo (menu a discesa)
Determina il colore del bordo del menu a discesa. Basta cambiare il i codici HEX e RGBA impostando il codice corrispondente al colore desiderato.
Esempio:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Colore testo (menu a discesa)
Determina il colore del testo dei menu a discesa. Per cambiare il colore, basta cambiare il codice HEX.
Esempio:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Valore selezionato (menu a tendina)
Questa impostazione determina il colore del testo degli oggetti selezionati in un menu a tendina. Puoi modificare il colore cambiando il codice esadecimale del colore.
Esempio:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Colore al passaggio del mouse (menu a discesa)
Le due impostazioni riportate di seguito determinano il colore del font e il coloro sfondo. Basta cambiare i codici HEX e RGBA impostando il codice corrispondente al colore desiderato.
Esempio:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Bordi
Colore bordo pulsante indietro
Determina il coloro del bordo del pulsante Indietro, del pulsante "ritorna al negozio" e durante il checkout. Basta cambiare il codice HEX impostando il codice corrispondente al colore desiderato.
Esempio:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Bordo attorno ai dettagli ordine
Durante il checkout compare una riquadro con il riepilogo degli articoli acquistati. Con questa impostazione può cambiare il colore del bordo del suddetto riquadro. Basta cambiare il codice RGBA impostando il codice corrispondente al colore desiderato. Il testo del riquadro è sempre nero.
Esempio:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Bordo intestazione
Consente di cambiare il colore della sottolineatura delle intestazioni, ad esempio, nella pagina di checkout. Basta cambiare il codice HEX impostando il codice corrispondente al colore desiderato.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Margine inferiore
Con questa impostazione viene posta una linea sotto la pagina di checkout. Cambia semplicemente ilcolore esadecimale ad una delle tue preferenze.
Esempio:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Colori stato attivo
I colori stato attivo sono utilizzati per i prezzi, l'icona carrello e i dispositivi di scorrimento mobili. Basta cambiare il codice HEX impostando il codice corrispondente al colore desiderato.
Esempio:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Colori stato attivo al passaggio del mouse
Si tratta delle stesse impostazioni menzionate qui sopra, solo che in questo caso riguardano il colore che compare al passaggio del mouse. Cambiare i codici RGBA impostando il colore che compare al passaggio del mouse.
Esempio:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Etichetta promozionale
Con queste impostazioni scegli il colore di sfondo dell'etichetta promozionale. Puoi aggiungere un'etichetta promozionale ad un prodotto per metterlo in risalto. Controlla la nostra guida per promozione prodotti guida per promozione prodotti.
Esempio:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
E-commerce in visualizzazione cellulare
Se vuoi modificare la visualizzazione del tuo e-commerce da dispositivi mobili, puoi aggiungere un "viewport" meta tag personale alla sezione head del file HTML con il tuo e-commerce.
Se non individuiamo questa meta tag, aggiugeremo le seguenti in automatico, per la perfetta esperienza da dispositivo mobile:
meta name="viewport" content="width=320, initial-scale=1"
Articoli correlati:
