1. Centro Assistenza
  2. Knowledge Base
  3. Design
  4. Personalizzazione del design con CSS
Knowledge base
Guide
Accademia
Tutorial video
Prova a cercare:
Articoli visualizzati di recente:

Sommario

ESC per chiudere

Libro di ricette CSS di Ecwid

È possibile personalizzare facilmente l'aspetto del proprio negozio Ecwid utilizzando i fogli di stile a cascata (CSS o Cascading Style Sheets). Il presente "libro di ricette CSS" è una raccolta di soluzioni progettata per aiutarti a far sì che il tuo negozio Ecwid abbia l'aspetto che desideri. La raccolta non è esaustiva. Modificando i modelli HTML e il foglio di stile CSS, il numero di cose che puoi fare è limitato solo dalla tua immaginazione.

Se sei un principiante di CSS, dai un'occhiata ai seguenti tutorial per prenderne familiarità:

Considera di rivolgerti al team di sviluppo di soluzioni personalizzate di Ecwid se non te la senti di modificare personalmente il codice.

Raccolta di ricette CSS (indice)

Il presente manuale è organizzato in sezioni che si riferiscono agli elementi della vetrina di Ecwid. Ogni sezione include codice CSS che puoi incollare direttamente nel negozio. È possibile usare il codice così com’è oppure modificarlo per personalizzarlo.

Scopri come aggiungere codice CSS al proprio negozio Ecwid →

Se utilizzi il Sito istantaneo di ultima generazione, il codice applicato alla vetrina (il negozio vero e proprio dove i clienti esplorano i prodotti) non influenzerà i blocchi del negozio nella pagina principale del tuo sito web. Se hai bisogno di configurare l'aspetto dei blocchi del negozio, puoi farlo individualmente, ad esempio, utilizzando le impostazioni di design nell'Editor del sito.

Pulsanti

Caratteri

Griglia dei prodotti (pagina della vetrina)

Pagina delle categorie

Dettagli dei prodotti

Carrello

Casella di ricerca

Checkout

Pulsanti

Il negozio ha tanti pulsanti grandi e piccoli, ad esempio "Aggiungi al carrello" o "Continua". È possibile modificarli individualmente o tutti contemporaneamente.

Cambiare il colore di tutti i pulsanti grandi contemporaneamente

I pulsanti grandi del negozio includono i pulsanti Aggiungi al carrello e Continua gli acquisti nelle pagine dei prodotti, Continua, Pagamento, Invia ordine. Usa il seguente codice CSS per aggiornare contemporaneamente tutti i pulsanti di grandi dimensioni. Sostituisci "#F0F8FF" e "black" nell'esempio con qualsiasi colore a tua scelta:

/*Colore pulsante*/
  .ec-size .ec-store .form-control--primary .form-control__button 
  { background-color: red;}
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .form-control--primary .form-control__button:hover {
  background: #F0F8FF;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .form-control--primary .form-control__button {
  color: black;
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .form-control--primary .form-control__button:hover {
  color: black;
  }

Qui è possibile vedere le varie combinazioni di colori e ombre e selezionare qualsiasi colore e il suo codice esadecimale: Colori CSS.

Hai bisogno di cambiare anche il testo dei pulsanti? Puoi farlo con l'aiuto dell'Editor di etichette del negozio.
Se il tuo negozio Ecwid è aggiunto a un sito Wix, è possibile impostare i caratteri nell'app Ecwid.

Cambiare il colore del pulsante Aggiungi al carrello

Sostituisci #FFA500 (arancione) e "#000000" (nero) con i codici dei colori desiderati.

/*Colore pulsante*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
  background: #FFA500;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
  background: #FFA500;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
  color: #000000;
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
  color: #000000;
  }

Cambiare il colore del pulsante Acquista ora

I pulsanti Acquista ora sono visualizzati nelle pagine delle categorie. Sostituisci #FFFAFA (colore pulsante, bianco neve) e "#000000" (colore testo, nero) con i codici dei colori desiderati.

.ec-size .ec-store .grid-product__buy-now .form-control__button { 
      background: #FFFAFA;
      color: #000000; 
  }

Se hai aggiunto un pulsante Acquista al tuo sito web o blog, il layout potrebbe includere anche un pulsante Acquista ora. Per cambiare il colore di questo pulsante, puoi utilizzare il codice seguente (sostituisci i codici colore con quelli di cui hai bisogno):

.ecsp .ecwid-btn--primary,
  .ecwid .ecwid-btn--primary {background-color:#2A54D8;}
  .ecsp .ecwid-btn--primary:hover,
  .ecwid .ecwid-btn--primary:hover {background-color:#2A54D8;}

Cambiare il colore del pulsante Pagamento

Sostituisci #FFFFFF (bianco) e "#000000" (nero) con i codici dei colori desiderati.

/*Colore pulsante*/
  .ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button  {
  background-color: #FFFFFF;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
  background-color: #FFFFFF;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
  color: #000000;
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
  color: #000000;
  }

Cambiare il colore del pulsante Continua

Sostituisci #FFFFFF (bianco) e "#000000" (nero) con i codici dei colori desiderati.

/*Colore pulsante*/
  .ec-size .ec-store .ec-form__row--continue .form-control__button {
      background-color: #FFFFFF;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
      background: #FFFFFF;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .ec-form__row--continue .form-control__button {
      color: #000000
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
      color: #000000
  }

Cambiare il colore del pulsante Invia ordine

Sostituisci #FFFFFF (bianco) e "#000000" (nero) con i codici dei colori desiderati.


  /*Colore pulsante*/
  .ec-size .ec-store .ec-cart-step--payment .form-control__button {
      background-color: #FFFFFF;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
      background: #FFFFFF;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .ec-cart-step--payment .form-control__button {
      color: #000000
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
      color: #000000
  }

Cambiare il colore di tutti i pulsanti piccoli contemporaneamente

È anche possibile modificare i pulsanti piccoli presenti nella pagina del carrello, come Aggiungi altro, Procedi al pagamento e Continua gli acquisti. Ecco il codice per modificare tali pulsanti. Sostituisci #FFFFFF (bianco) e "#000000" (nero) con i codici dei colori desiderati.

Per cambiare i colori dei pulsanti Aggiungi altro e Procedi al pagamento:


  /*Colore pulsante*/
  .ec-size .ec-store .details-product-purchase__controls .form-control__button {
  background-color: #FFFFFF;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
  background-color: #FFFFFF;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .details-product-purchase__controls .form-control__button {
  color: #000000;
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
  color: #000000;
  }

Per cambiare il colore del pulsante Continua gli acquisti:


  /*Colore pulsante*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button {
  background-color: #FFFFFF;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
  background-color: #FFFFFF;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button {
  color: #000000;
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
  color: #000000;
  }

Cambiare il colore del pulsante Aggiungi altro

Sostituisci #FFA500 (arancione) e "#000000" (nero) con i codici dei colori desiderati.

/*Colore pulsante*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
  background-color: #FFA500;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
  background: #FFA500;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
  color: #000000;
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
  color: #000000;
  }

Cambiare il colore del pulsante Procedi al pagamento

Sostituisci #FFA500 (arancione) e "#000000" (nero) con i codici dei colori desiderati.

/*Colore pulsante*/
  .form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
  background: #FFA500;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
  background: #FFA500;
  }
  
  /*Colore testo*/
  .form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
  color: #000000;
  }
  
  /*Colore testo al passaggio del mouse*/
  .form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
  color: #000000;
  }

Cambiare il colore del pulsante Continua gli acquisti nella pagina del carrello

Sostituisci #FFA500 (arancione) e "#000000" (nero) con i codici dei colori desiderati.


  /*Colore pulsante*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button {
  background-color: #FFFFFF;
  }
  
  /*Colore pulsante al passaggio del mouse*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
  background-color: #FFFFFF;
  }
  
  /*Colore testo*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button {
  color: #000000;
  }
  
  /*Colore testo al passaggio del mouse*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
  color: #000000;
  }

Posizionare i pulsanti Acquista ora allo stesso livello

Se i titoli dei prodotti hanno una lunghezza diversa, i pulsanti Acquista ora potrebbero non essere allineati nella pagina della vetrina. Per allineare i pulsanti Acquista in una vista a griglia:

Buy Now buttons.png

.grid-product__wrap {
    display: flex;
  }
  .grid-product__price {
      flex: 1 0 auto;
      align-items: flex-end;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
  }

Nascondere il pulsante Aggiungi al carrello dalle pagine di tutti i prodotti

Per nascondere il pulsante Aggiungi al carrello presente nelle pagine di tutti i prodotti, utilizza il seguente codice CSS:

.details-product-purchase__controls {
  display: none;
  }
Nota: quando i pulsanti Acquista ora e Aggiungi al carrello sono nascosti, i clienti non possono acquistare i prodotti. Maggiori informazioni su come usare Ecwid come catalogo online (in inglese) →

Caratteri

È possibile impostare il tipo di carattere predefinito e il suo colore per l'intero negozio.

Cambiare il carattere di tutti i testi

Cambia il tipo di carattere per l'intero negozio. Per farlo, sostituisci la dicitura NAME_OF_FONT con il nome del tipo di carattere desiderato:


  .ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
  font-family: NAME_OF_FONT !important;
  }
Maggiori informazioni sulle combinazioni di font più frequentemente utilizzate.

Cambiare il colore del carattere

Cambia il colore di tutti i caratteri contemporaneamente. Per farlo, sostituisci "#262626" (grigio molto scuro) nell'esempio con qualsiasi colore a tua scelta:

.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
  color: #262626 !important;
  }
Qui è possibile vedere le varie combinazioni di colori e ombre e selezionare qualsiasi colore e il suo codice esadecimale: Colori CSS.
Se il tuo negozio Ecwid è aggiunto a un sito Wix, è possibile configurare i caratteri nelle impostazioni dell'app Ecwid (in inglese).

Griglia dei prodotti (pagina della vetrina)

La griglia dei prodotti è un layout che contiene più prodotti ed è presente nelle seguenti pagine:

  • Le pagine delle categorie.
  • La sezione Prodotti in evidenza nella pagina principale.
  • La griglia dei prodotti correlati sotto il prodotto principale nella sua pagina di dettaglio.

Cambiare il colore e la dimensione del carattere del prezzo nella griglia dei prodotti

Cambia il colore o la dimensione del carattere del prezzo nella griglia dei prodotti. Sostituisci "blue" e "20px" con il colore e la dimensione desiderati.

/*Titoli del prodotto nella pagina del catalogo*/
  /*Change font color*/
  .ec-size .ec-store .grid-product__title-inner {
  color: blue;
  }
  
  /*Prezzo del prodotto nella pagina del catalogo*/
  /*Change font color*/
  .ec-size .ec-store .grid-product__price-amount {
  color: blue;
  }
  
  /*Cambia dimensione carattere*/
  .ec-size .ec-store .grid-product__price-value.ec-price-item { 
  font-size: 20px !important; 
  }

Disabilitare l'effetto zoom per le miniature dei prodotti

Quando si posiziona il cursore del mouse sopra la miniatura di un prodotto, essa viene ingrandita (effetto zoom). Questa funzionalità è attivata per tutti i negozi Ecwid per impostazione predefinita. Se desideri disabilitarla per il tuo negozio online, puoi usare il seguente codice CSS:

.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
      transform: none;
  }

Posizionare le icone "Tracciamento ordini", "Preferiti", "Carrello", "Il mio account" nella parte alta della pagina della vetrina

Per impostazione predefinita, i pulsanti del menu "Tracciamento ordini", "Preferiti", "Carrello", "Il mio account" si trovano nella parte bassa della pagina della vetrina. Per spostarli nella parte alta della pagina:

.ec-size .ec-store__category-page .ec-store__content-wrapper,
.ec-size .ec-store__category-page .ec-store__content-wrapper > div {
    display: flex;
    flex-direction: column;
}
.ec-size .ec-store__category-page .ec-footer {
    order: -1;
}

Categoria

I negozi che offrono diverse linee di prodotti utilizzano le categorie per organizzare i prodotti e aiutare gli acquirenti a trovare ciò che stanno cercando. È possibile cambiare lo stile di una singola categoria e/o di tutte le categorie contemporaneamente.

Per apportare modifiche allo stile delle pagine di dettaglio di tutte le categorie del tuo negozio Ecwid, usa la classe CSS .ec-store__category-page.

Se il negozio non ha ancora nessuna categoria, tutti i prodotti appartengono alla categoria predefinita "Prima pagina del negozio". Per apportare modifiche allo stile di tutti i prodotti appartenenti alla categoria Prima pagina del negozio, usa la classe CSS ec-store__category-page--0.

Allineare al centro i prodotti nelle categorie

Allinea al centro i prodotti nelle pagine delle categorie (funziona al meglio se ci sono più prodotti in una categoria):


  .ec-size .ec-store .grid__products {
      justify-content: center;
  }

Cambiare il colore del prezzo nella pagina di una categoria specifica

Cambia il colore del prezzo nella pagina di una categoria specifica. Sostituisci "4002" con l'ID univoco della categoria (in inglese). Sostituisci #FFA500 (arancione) con il codice colore desiderato.

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

Disabilitare l'effetto zoom per le miniature delle categorie

Quando si posiziona il cursore del mouse sopra la miniatura di una categoria, essa viene ingrandita (effetto zoom). Questa funzionalità è attivata per tutti i negozi Ecwid per impostazione predefinita. Se desideri disabilitarla per il tuo negozio online, puoi usare il seguente codice CSS:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
      transform: none;
  }

Visualizzare un determinato numero di categorie per riga

È possibile specificare la percentuale della larghezza totale della pagina che una categoria deve occupare. Ad esempio, impostando che una categoria deve occupare il 20% della larghezza totale (100%) della pagina, verranno visualizzate 5 categorie per riga, impostando il 25% verranno visualizzate 4 categorie per riga e così via.

Visualizza un determinato numero di categorie per riga:


  .ec-size .ec-store .grid__categories .grid-category:nth-child(n+1) {
      width: 20% !important;
  }

Disabilitare l'effetto hover per i titoli delle categorie

Modifica il selettore seguente:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
      transform: none;
  }

Nascondere le immagini e i titoli delle miniature delle categorie

Per le categorie che non hanno immagini, Ecwid mostra un gradiente come immagine di sfondo nella vetrina:

Screenshot_2019-12-29_at_17.35.03.png

È possibile aggiungere le proprie immagini. In alternativa, è possibile nascondere completamente le immagini e i titoli delle schede delle categorie (ad esempio, se si usa il menu di navigazione orizzontale nel proprio negozio):

.ec-size .ec-store .grid__categories {
  display: none;
  }

Nascondere le schede delle categorie dalla pagina principale del negozio

Se si desidera avere una vista più compatta della prima pagina del negozio (ad esempio, visualizzare lì solo il menu orizzontale e i prodotti in evidenza), è possibile nascondere le schede delle categorie dalla vetrina del negozio. Allo stesso tempo, è possibile tenere le schede delle categorie nelle pagine di dettaglio delle categorie in modo che i clienti possano vedere lì le eventuali sottocategorie, se presenti.

.ec-size .ec-store.ec-store__category-page--0 .ec-grid .grid__categories {
  display: none;
  }

Dettagli dei prodotti

La pagina di un prodotto contiene l'immagine del prodotto, il nome, il prezzo, la descrizione, ecc. È possibile cambiare l'aspetto dei contenuti, nonché nasconderne alcuni componenti.

Per apportare modifiche allo stile di tutti i prodotti appartenenti a una determinata categoria, usa la classe CSS .ec-store__product-page--c12345. Sostituisci "12345" con l'ID univoco della categoria (in inglese).

Cambiare il colore e le dimensioni del carattere

Cambia il colore e le dimensioni del carattere nella pagina di un prodotto. Sostituisci #FFA500 (arancione) e "20px" con il colore e la dimensione desiderati.

Colore dei titoli:

/*Titoli del prodotto nella pagina del prodotto*/
  .ec-size .ec-store .product-details .product-details__product-title {
      color: #FFA500;
  }

Colore e dimensioni del carattere del prezzo:

/*Prezzo del prodotto nella pagina del prodotto*/
  .ec-size .ec-store .ec-price-item {
      color: #FFA500;
  }
  .ec-size .ec-store .ec-price-item {
      font-size: 20px; 
  }

Colore del Cod. Art.:

/*Cod. Art. del prodotto nella pagina del prodotto*/
  .ec-size .ec-store .product-details__product-sku {
      color: #FFA500;
  }

Colore della quantità:

/*Etichetta della quantità nella pagina del prodotto*/
  .ec-size .ec-store .details-product-purchase__place {
      color: #FFA500;
  }

Colore e dimensioni del carattere del prezzo per unità:

/*Campi del prezzo per unità nella pagina del prodotto*/
  .ec-size .ec-store .product-details__price-per-unit-block  {
      font-size: 20px;
      color: #FFA500;
  }

Cambiare il colore dell'etichetta "In offerta"

Cambia il colore dell'etichetta IN OFFERTA. Sostituisci il valore RED per i parametri background-color e border-color con il colore desiderato:

/* cambia il colore dell'etichetta in offerta */
  .ec-size .ec-store .label--notice { 
  background-color: RED; 
  }
  .ec-size .ec-store .label--notice::after,
  .ec-size .ec-store .label--notice::before {
  color: RED; 
  }

Mostrare le immagini della galleria a dimensione intera sui dispositivi mobili

Aggiungi il selettore e le proprietà seguenti:


    .ec-size:not(.ec-size--s)  .ec-store .product-details .product-details__gallery {
      width: 100vw;
      margin-left: calc(env(safe-area-inset-left) - var(--global-tile-padding) * 1px);
  }

Rimuovere il nome sotto l'immagine dettagliata in una galleria

Per rimuovere il testo sotto l'immagine dettagliata:

div.pswp__caption__center { 
  display:none;
  }

Aprire la sezione "Mostra altro" nelle pagine dei prodotti

L'opzione Mostra altro permette di mantenere compatta la pagina prodotto in presenza di una descrizione lunga. Usa il seguente codice per mostrare la descrizione completa e dettagliata del prodotto:

.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--s .ec-store .product-details__product-description::after {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed~.product-details-module__btn-more {
display: none;   
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed::after {
content: none;
}
#productDescription img { 
display: inline;
}

Mostrare i "Prodotti correlati" in cima a una pagina

Per impostazione predefinita, i prodotti correlati sono visualizzati nella parte bassa delle pagine dei prodotti. Per spostarli nella parte alta delle pagine dei prodotti:

.ec-size .ec-store__content-wrapper {
  display: flex;
  flex-direction: column;
  }
  .ec-size .ec-store__content-wrapper .ec-related-products {
  order: -1;
  }

Nascondere il prezzo di alcuni prodotti specifici

Nascondi il prezzo nella pagina di un determinato prodotto. Sostituisci "123456" con l'ID univoco interno del prodotto: (Dove è possibile vedere l'ID di un prodotto? (in inglese))

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

Nascondere i prezzi ai clienti che non hanno effettuato l'accesso

È possibile nascondere i prezzi ai clienti che non hanno effettuato l'accesso. Il catalogo rimarrà visibile per tutti i visitatori, ma solo i clienti registrati potranno vedere i prezzi e acquistare i prodotti. Ciò è particolarmente utile se desideri mantenere riservati i prezzi all'ingrosso.

Qui sotto è possibile vedere il codice CSS per nascondere i prezzi e i pulsanti Aggiungi al carrello e Acquista ora.  In questo modo, solo i clienti registrati potranno effettuare ordini. I clienti che non hanno effettuato l'accesso potranno solo visualizzare il catalogo.


  /*Nascondere i prezzi nella pagina del catalogo*/
  body.ecwid-customer-loggedOut .grid-product__price { 
       display: none; 
  } 
  
  /*Nascondere i pulsanti Acquista ora nella pagina del catalogo*/
  body.ecwid-customer-loggedOut .grid-product__button.grid-product__buy-now {
      display: none;
  }
  
  /*Nascondere i prezzi nella pagina di dettaglio del prodotto*/
  body.ecwid-customer-loggedOut .details-product-price__value,
  body.ecwid-customer-loggedOut .details-product-price-compare__container {
      display: none;
  } 
  
  /*Nascondere Aggiungi al carrello nella pagina di dettaglio del prodotto*/ 
  body.ecwid-customer-loggedOut .details-product-purchase__add-buttons {
      display: none;
  }

Se il negozio si trova in un paese in cui una nota Prezzo incl. tasse è visualizzata accanto al prezzo dei prodotti, sarà necessario aggiungere anche il seguente codice CSS per nascondere questa nota dalla vetrina:

body.ecwid-customer-loggedOut .product-details__product-price-taxes { display: none; }
Se desideri fare in modo che solo i clienti registrati possano visualizzare la vetrina, usa l'app Required Login for Storefront Access (Accesso richiesto per visualizzare la vetrina).

Carrello

Cambiare lo stile del pulsante "Rimuovi prodotto"

I clienti possono rimuovere un prodotto dal proprio carrello con l'aiuto dell'icona Rimuovi (X). Si trova a destra del prodotto nel carrello.

È possibile regolare l'altezza e la larghezza dell'icona, lo spessore delle linee, l'arrotondamento degli angoli, così come il colore dell'icona, per migliorare la sua visibilità.

Ecco il codice che bisogna aggiungere al negozio:


    .ec-size .ec-store .ec-cart-item__control-inner svg {
      opacity: 1.5;
      color: red;
      width: 30px;
      height: 30px;
      border-radius: 10px;
  }
  .ec-size .ec-store .ec-cart-item__control-inner svg g {
      stroke-width: 2px;
  }

Nella riga "colore", digitare il colore desiderato per l'icona.

Più sono grandi la larghezza e l'altezza, più sarà grande l'icona.

Rimuovere il campo Quantità

Per nascondere il parametro Qtà dalla pagina del carrello:

.ec-size .ec-store .ec-cart-item__count {
  display: none;
  }

Espandere il campo del coupon sconto

È possibile espandere la casella in cui inserire il codice del coupon sconto (o il codice della carta regalo) nella pagina del carrello:

.ec-size .ec-store .ec-cart-coupon__wrap { visibility: visible } 
  
  .ec-size .ec-store .ec-cart-coupon:not(.ec-cart-coupon--applied) .ec-cart-coupon__button--apply { 
  display: block; 
  }
  
  .ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__wrap { 
  display: flex; 
  align-items: center; 
  height: auto; 
  }
  
  .ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__text { 
  display: none; 
  }

Mostrare il carrello vuoto sul Sito istantaneo (versione originale)

Per impostazione predefinita, l'icona del carrello viene mostrata sul sito istantaneo se il carrello contiene un prodotto. Se desideri mostrare l'icona del carrello anche quando esso è vuoto:


  .float-icons__icon--cart.off:not(.off2) {
      opacity: 1;
      height: 48px;
      padding-top: 12px;
      transform: translateX(-8px);
      pointer-events: auto;
  }
  
  @media (min-width: 414px) {
      .float-icons__icon--cart.off:not(.off2) {
          height: 68px;
          padding-top: 16px;
          transform: translateX(-16px);
      }
  }
  
  @media (min-width: 768px) {
      .float-icons__icon--cart.off:not(.off2) {
          padding-top: 24px;
          transform: translateX(-24px);
      }
  }
Il codice funziona solo per la versione originale del Sito istantaneo Ecwid.

Casella di ricerca

Un widget di ricerca aiuta i clienti a cercare i prodotti nel tuo negozio. È possibile cambiare l'aspetto o la posizione della casella di ricerca.

Cambiare il design del widget di ricerca

Aggiungi o modifica il selettore e le proprietà seguenti. Modifica le dimensioni e sostituisci i codici colore come #000000 con il codice colore desiderato.

/*  Stili casella di input */
  input.ecwid-search-widget__input[type="text"] {
   width: 100px; /* cambia la larghezza come necessario*/
   height: 20px; /* cambia l'altezza come necessario*/
   border: solid 1px red; /* cambia il colore del bordo */
   background-color: #000000; /* cambia il colore di sfondo */
   font-size: 12px; /* cambia le dimensioni del font nel campo di ricerca */
   color: #000000; /* cambia il colore del font nel campo di ricerca */
  }

Cambiare lo stile del pulsante Cerca

Aggiungi o modifica il selettore e le proprietà seguenti. Sostituisci il testo image/button_search.png con l'attuale percorso assoluto dell'immagine di sfondo. Ad esempio: "http://www.example.com/images/button_bg.png"

/* Stili pulsante "Cerca" */
  button.ecwid-search-widget__btn {
   width: 20px; /* cambia la larghezza come necessario*/
   height: 10px; /* cambia l'altezza come necessario*/
   border: solid 1px #ffffff; /*cambia il colore del bordo */  
   background: transparent url(image/button_search.png) no-repeat bottom center !important; /*aggiungi immagine di sfondo*/
  }

Spostare la casella di ricerca

A seconda della posizione desiderata del widget di ricerca, inserisci i seguenti valori per i parametri margin-left e margin-top per spostarlo.

/* per spostare il widget di ricerca*/
  .ecwid-search-widget {
  max-width: 170px; /* cambia la larghezza come necessario*/
  position:relative;
  margin-left: 400px; /* cambia il margine sinistro come necessario*/
  margin-top: 10px; /* cambia il margine superiore come necessario*/
  }

Modificare la casella di ricerca sul Sito istantaneo (versione originale)

Sostituisci #F3F6F9 con il codice colore desiderato.

.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect { 
  border: 1px solid #e6e6e6; 
  }
  .search-panel .text-field { 
  background-color: #F3F6F9; 
  border: 2px solid #DC230A; 
  }
Il codice funziona per la versione originale del Sito istantaneo Ecwid. Se utilizzi il Sito istantaneo di ultima generazione, puoi usare l'Editor del sito per cambiare l'aspetto della casella di ricerca.

Checkout

Rimuovere i tempi di consegna dai nomi dei metodi di spedizione

Alcuni corrieri di spedizione (come USPS, FedEx e altri) mostrano i tempi di consegna accanto ai nomi dei metodi di spedizione. Se utilizzi un corriere di spedizione online nel tuo negozio Ecwid, puoi vedere che i metodi di consegna sono visualizzati nel seguente modo al checkout: "USPS Priority Mail (1-3 giorni)". È possibile nascondere le tempistiche tramite CSS:

span.ecwid-shippingOption-days, span.ecwid-Invoice-ShippingDetails-transitTime {
  display:none !important;
  }

Cambiare i loghi di carte di credito sotto le opzioni di pagamento al checkout

I loghi sotto le opzioni di pagamento aiutano i clienti a vedere subito quali opzioni sono disponibili per effettuare il pagamento. È possibile usare il codice CSS per mostrare i vari loghi, ad esempio, per mostrare in modo più esplicito quali carte di credito o di debito possono usare i clienti. 

Usa questo codice CSS: 


  /* Nascondi loghi correnti del metodo di pagamento */
  .ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
  div.ec-cart-accept__icons {
      display: none;
  } 
  
   /* Aggiungi un logo personalizzato per il metodo di pagamento */
  .ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
.ec-radiogroup__info:after {
      content: '';
      background: url('https://example.com/your_image.jpg') no-repeat;
      background-size: contain;
      height: 40px;
      width: 60px; /* La larghezza va regolata a seconda del logo */
      display: block;
  }

nel quale devi sostituire https://example.com/your_image.jpg con l'URL del logo e X in :nth-child(X) con il numero del metodo di pagamento al checkout. Ad esempio, se tre metodi di pagamento sono visualizzati al checkout e desideri mostrare dei nuovi loghi sotto il secondo metodo, bisogna specificare "2" nel codice, come segue: :nth-child(2).

È possibile usare i seguenti loghi di carte di credito: 

Mostrare i loghi di carte di credito a piè di pagina

Nel caso in cui hai bisogno di mostrare quali carte sono accettate nel tuo negozio (ad esempio, per ottenere l'approvazione di Google per un account di Google Shopping), è possibile aggiungere i loghi delle carte al piè di pagina utilizzando il seguente codice CSS:

Sito istantaneo di ultima generazione
Sito istantaneo (versione originale)

  .ins-tile--footer .ins-tile__made-with:before {
  content: '';
  background: url('https://example.com/your_image.jpg') no-repeat;
  background-size: contain;
  background-position: center;
  height: 50px;
  display: block;
  }

nel quale devi sostituire https://example.com/your_image.jpg con l'URL dell'immagine con i loghi.

È possibile usare i seguenti loghi di carte di credito: 

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: 29 su 44
Articoli in questa sezione
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