Personalizzazione di pagine specifiche con CSS

È possibile modificare il design di singole pagine del proprio negozio Ecwid, che sia la pagina dei dettagli di un prodotto, la pagina di uno dei passaggi del pagamento o quella dell'account cliente. Utilizzando le classi CSS, è possibile definire delle regole CSS da applicare solo a pagine specifiche della propria vetrina Ecwid.

In base alle pagine

Pagine dei dettagli di prodotto

Una tipica pagina di dettagli di un prodotto presenta il nome del prodotto, un'immagine e un pannello sulla parte destra, che contiene elementi quali prezzo del prodotto, Cod. Art., pulsante Aggiungi al carrello, ecc:

Applicare un design alle pagine dei dettagli di tutti i prodotti

Per applicare gli stili definiti alle pagine dei dettagli di tutti i prodotti in un negozio Ecwid, è necessario utilizzare la seguente classe nel codice CSS:

.ec-store__product-page

Applicare un design alle pagine dei dettagli di alcuni prodotti

Per nascondere i prezzi nelle pagine dei dettagli di specifici prodotti, è necessario utilizzare il seguente codice nel tema CSS in uso:

.ec-store__product-page--123456 .product-details__product-price {
    display: none;
}

Qui "123456" è un identificativo univoco del prodotto interno al sistema. Come ricavare l'identificativo di prodotto? (in inglese)

Per applicare gli stili definiti alle pagine dei dettagli di vari prodotti, ma non a tutte, occorre utilizzare il seguente codice:

.ec-store__product-page--123456 .product-details__product-price,
.ec-store__product-page--121221 .product-details__product-price,
.ec-store__product-page--123234 .product-details__product-price {
display: none;
}

Qui "123456", "121221", "123234" sono identificativi univoci dei prodotti in questione interni al sistema. In conseguenza dell'applicazione di tale codice, il sistema nasconderà i Cod. Art. sulle pagine dei dettagli dei tre prodotti indicati.

Applicare un design alle pagine dei dettagli di tutti i prodotti di una categoria

Per applicare modifiche di stile alle pagine dei dettagli di tutti i prodotti appartenenti a una certa categoria, è possibile utilizzare questa classe CSS:

.ec-store__product-page--c12345

in cui occorrerà inserire l'ID della categoria (in inglese) richiesta al posto di 12345.

Ad esempio, supponiamo di voler nascondere temporaneamente i pulsanti Aggiungi al carrello nelle pagine dei dettagli dei prodotti appartenenti alla categoria con ID 12345. A questo scopo, si potrà applicare il seguente frammento di codice CSS:

.ec-store__product-page--c12345 .details-product-purchase__controls {
display: none;
}

Pagine di categoria

Una pagina di categoria tipicamente mostra tutti i prodotti appartenenti a quella categoria in una griglia di visualizzazione:

Le modifiche CSS applicate alle pagine di categorie funzionano in modo simile a quelle delle pagine di dettagli di prodotto.

Applicare un design alle pagine di tutte le categorie

Per applicare gli stili definiti alle pagine di tutte le categorie di un negozio Ecwid, è necessario utilizzare la seguente classe nel codice CSS:

.ec-store__category-page

Ad esempio, per cambiare in blu scuro il colore con cui è visualizzato il prezzo nelle pagine delle categorie, si dovrà usare questo codice nel relativo tema CSS:

 .ec-store__category-page .grid-product .grid-product__price-amount {
color: darkblue;
}

Applicare un design alle pagine di alcune categorie

Per cambiare il colore dei prezzi nelle pagine di specifiche categorie, è necessario utilizzare il seguente codice nel tema CSS in uso:

.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: darkblue;
}

Qui "4002" è un identificativo univoco della categoria interno al sistema. Come ricavare l'identificativo di categoria? (in inglese) Per applicare gli stili definiti alle pagine di varie categorie, ma non tutte, occorre utilizzare il seguente codice:

.ec-store__category-page--4002 .grid-product .grid-product__price-amount,
.ec-store__category-page--4006 .grid-product .grid-product__price-amount,
.ec-store__category-page--4008 .grid-product .grid-product__price-amount {
color: darkblue;
}

Qui "4002", "4006", "4008" sono identificativi univoci delle categorie in questione interni al sistema. In conseguenza dell'uso di questo codice, il colore del prezzo nelle pagine delle tre categorie in questione diventerà blu scuro.

Altre pagine

È possibile applicare il design personalizzato anche ad altre pagine:

• pagine dei carrelli e checkout
• pagine delle impostazioni degli account

Pagine dei carrelli e checkout

Per applicare un design alla pagine dei carrelli e checkout, occorre utilizzare le seguenti classi CSS:

.ec-size .ec-store .ec-cart

Pagina dei ringraziamenti per l'ordine

Per applicare un design solo alla pagina dei ringraziamenti, occorre utilizzare le seguenti classi CSS:

.ec-size .ec-store .ec-confirmation

Pagine dei profili dei clienti

Per applicare un design alle pagine dei profili dei clienti (disponibili per i clienti che hanno effettuato l'accesso al negozio), si possono utilizzare le seguenti classi CSS:

Pagine delle impostazioni degli account:

.ecwid-productBrowser-AccountSettingsPage 

Pagine degli ordini

.ecwid-productBrowser-OrdersPage 

In base ai clienti

In alcuni casi, potrebbe essere necessario applicare modifiche solo per alcuni clienti, ad esempio nascondere i prezzi o i Cod. Art. ai clienti che non hanno ancora creato un account nel negozio, o evidenziare alcuni articoli a beneficio dei clienti che appartengono a uno specifico gruppo. Anche queste modifiche sono facilmente realizzabili tramite codici CSS. Ecco come fare:

Clienti senza account o che non hanno effettuato l'accesso

Quando un cliente visita un negozio per la prima volta alla ricerca di un prodotto di cui ha bisogno, non dispone ancora di un account per quel negozio. In tali casi, può essere utile applicare un design specifico per questo tipo di clienti. A questo scopo, è necessario utilizzare la seguente classe nel tema CSS in uso:

body.ecwid-customer-loggedOut

Per esempio, per trasformare un negozio Ecwid negozio in un catalogo online per i clienti che visitano il negozio per la prima volta o non hanno ancora effettuato l'accesso al loro account, basta aggiungere il seguente codice al tema CSS in uso:

/* Hide prices and add to bag buttons for logged out customers */
body.ecwid-customer-loggedOut .grid-product__price,
body.ecwid-customer-loggedOut .grid-product__button,
body.ecwid-customer-loggedOut .product-details__product-price,
body.ecwid-customer-loggedOut .details-product-purchase__controls {
	display: none;
}

Con accesso effettuato

In altri casi, potrebbe essere necessario applicare un design personalizzato ai clienti che hanno effettuato l'accesso al loro account nel negozio e stanno visitando il catalogo online. A questo scopo, è necessario utilizzare la seguente classe nel tema CSS in uso:

body.ecwid-customer-loggedIn

Supponiamo di voler visualizzare in verde i prezzi per questo tipo di clienti. In questo caso, occorre applicare il seguente codice al tema CSS in uso:

body.ecwid-customer-loggedIn div.grid-product__price .grid-product__price-amount {
 color: green;
}

È anche possibile bloccare l'accesso al negozio ai visitatori che non effettuano l'accesso al loro account. Per saperne di più

Appartenenti a un gruppo clienti

I clienti che si registrano a un negozio Ecwid sono assegnati a un gruppo predefinito generale con identificativo '0'. Per applicare un design personalizzato a tutti i clienti che sono assegnati a questo gruppo, sarà necessario utilizzare la seguente classe:

body.ecwid-customer-group-0

Se un negozio comprende più gruppi di clienti e una parte di tali clienti sono assegnati a un gruppo specifico che ha diritto a sconti speciali, sarà possibile evidenziare i vantaggi loro riservati utilizzando un design personalizzato per questo tipo di clienti, implementabile tramite il seguente codice:

body.ecwid-customer-group-12345

Qui "12345" è l'identificativo univoco del gruppo dei clienti in questione. Tale identificativo è disponibile accedendo all'account che appartiene a quel gruppo di clienti e visualizzando una qualsiasi pagina nello strumento "Ispeziona elemento" del browser. Per modificare in verde il colore del prezzo nelle pagine delle categorie per tutti i clienti di uno specifico gruppo, si può utilizzare il seguente codice:

body.ecwid-customer-group-12345 div.grid-product__price .grid-product__price-amount {
color: green;
}

Questo articolo ha presentato solo una panoramica minima delle possibilità offerte dall'uso dei temi personalizzati CSS con i vari tipi di pagine e clienti. Ma dovrebbe bastare per continuare a provare da soli!

È anche possibile consultare la nostra guida su come cambiare i design Ecwid.