Trovare i selettori CSS per la vetrina Ecwid

Quando desideri apportare modifiche alla tua vetrina che non possono essere ottenute con le impostazioni di progettazione integrate di Ecwid, puoi utilizzare del codice CSS. Puoi scegliere tra i codici CSS Ecwid o creare il tuo codice da zero.

Per creare un codice, trova il selettore giusto per l'elemento (testo, pulsante, immagine, ecc.) che desideri modificare. Puoi farlo con gli strumenti di sviluppo del browser integrati. Una volta trovato il selettore, crea un codice e incollalo nel tema di design del tuo negozio. Dopo aver aggiornato la pagina della vetrina, i cambiamenti saranno visibili.

Guarda questo video che spiega il funzionamento generale del CSS:

La creazione di codice CSS richiede una conoscenza avanzata di CSS. Gli esperti Ecwid possono aiutarti in questa attività e progettare un tema per il tuo negozio.

Per trovare un selettore CSS per l'elemento vetrina:

Aprire la pagina del negozio dove è visibile l'elemento che desideri modificare.
Fare clic destro sull'elemento che si desidera modificare > Ispeziona:

Si aprirà Chrome Inspector sulla pagina. L'elemento che stai cercando verrà evidenziato.

Sul lato destro, copia il selettore:

Apri la pagina del negozio dove è visibile l'elemento che desideri modificare.
Fai clic destro sull'elemento che desideri modificare > Ispeziona:

Si aprirà Firefox Inspector sulla pagina. L'elemento che stai cercando verrà evidenziato.

Sul lato destro, copia il selettore:

Apri la pagina del negozio dove è visibile l'elemento che desideri modificare.
Fai clic destro sull'elemento che desideri modificare > Ispeziona:

Si aprirà Safari Web Inspector sulla pagina. L'elemento che stai cercando verrà evidenziato.

Per abilitare l'ispezione degli elementi in Safari, vai su Safari → Preferenze → Avanzate e seleziona "Mostra menu Sviluppo nella barra dei menu".

Sul lato destro, copia il selettore:

Usa il selettore trovato per creare codice CSS. Quindi incolla il codice pronto nel tema CSS attivo.

Esempio

Il prezzo sulla pagina del prodotto ha questo selettore CSS:


.ec-size .ec-store .details-product-price__value

Un codice CSS per cambiare il colore del prezzo in rosso risulterà così:


 .ec-size .ec-store .details-product-price__value {
              color: red;
}

Ci sono molte risorse online dove puoi imparare a creare codici CSS. Per esempio, controlla questo sito: https://www.w3schools.com/