Knowledge base
Guide
Accademia
Tutorial video
Prova a cercare:
Articoli visualizzati di recente:

Sommario

Personalizzazione di pagine specifiche con CSS

Ecwid supporta classi dinamiche per ogni pagina del negozio. Tutti i tipi di pagina (pagine di categorie e dettagli dei prodotti, pagine di checkout e di account dei clienti) dispongono di classi specifiche che si possono inserire nell'elemento <div> di livello più alto nel widget del browser dei prodotti. Queste classi permettono di costruire regole CSS che si applicano solo a una pagina o a più pagine specifiche nella vetrina del negozio Ecwid. Per individuare la classe esatta del browser di prodotto che comprende l'elemento <div>, è necessario utilizzare gli strumenti di sviluppo disponibili nel browser: WebInspector per Chrome/Safari e altri browser WebKit, Firebug per Firefox, Dragonfly per Opera, Strumenti di sviluppo per IE.

Gli utenti che vogliono dare un aspetto personalizzato esclusivo al proprio negozio o hanno bisogno di modifiche di stile complesse possono contattarci in ogni momento. Basta compilare questo modulo: Design personalizzato per negozi Ecwid. Saremo ben lieti di collaborare con i nostri utenti nella progettazione del loro negozio 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:

Women_s_Black_Dress_2019-03-15_23-33-41.png

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:

Surf_Paradise_2019-03-15_23-51-32.png

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

Surf_Paradise__Checkout_2019-03-16_00-54-54.png

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

Surf_Paradise_2019-03-16_01-25-47.png

 

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.

Questo articolo ti è stato utile?

Fantastico! Grazie per il tuo feedback!

Grazie per il tuo feedback!

Ci dispiace molto! Cosa è andato storto?
Utenti che ritengono sia utile: 63 su 102
10
Utilizziamo i cookie e tecnologie simili per ricordare le tue preferenze, misurare l'efficacia delle nostre campagne e analizzare i dati non personalizzati per migliorare le prestazioni del nostro sito. Scegliendo "Accetta", acconsenti all'utilizzo dei cookie.
Accetta i cookie Rifiuta