Usare l'app

Aspetto

La pagina Aspetto definisce lo stile di tutte le tabelle del negozio in una volta, così sono tutte in linea con il tuo brand. Un’anteprima in tempo reale nella pagina mostra ogni modifica mentre la fai.

Fai clic su Salva nella barra in alto per applicare le modifiche. Ogni tabella attiva nel negozio si aggiorna subito: non serve salvare di nuovo le tabelle una per una. Vuoi che una tabella abbia un aspetto diverso? Vedi dare a una tabella uno stile tutto suo.

Finestra della tabella

Impostazione	A cosa serve
Larghezza	Stretta (ideale per tre o quattro colonne), Media (predefinita), Larga (spazio per tabelle larghe senza scorrimento orizzontale) oppure Extra larga (ideale con le foto del prodotto accanto alla tabella).
Arrotondamento degli angoli	0–24 px. Predefinito 8 px.
Spaziatura interna	0–48 px. Predefinito 24 px. Spazio tra il bordo della tabella e il suo contenuto.

La barra in cima alla finestra o al pannello.

Impostazione	A cosa serve
Mostra il nome del prodotto	Mette in cima alla finestra il nome del prodotto da cui è stata aperta. Se è nascosto, gli screen reader lo annunciano comunque.
Sfondo dell'intestazione	Lascia vuoto per usare lo sfondo della tabella.
Colore del titolo	Lascia vuoto per usare il colore del testo.
Allineamento del titolo	Sinistra o Centro.
Pulsante di chiusura	✕ semplice, oppure ✕ in un cerchio pieno.
Colore dell'icona	La ✕ stessa. Lascia vuoto per usare il colore del titolo.
Colore del cerchio	Per lo stile con cerchio pieno.

Foto del prodotto

Impostazione	A cosa serve
Mostra le foto del prodotto accanto alla tabella	Mostra le foto del prodotto accanto alla tabella, con frecce per sfogliarle. Sugli schermi più grandi compaiono solo nella finestra popup: i pannelli sono troppo stretti. Da abbinare alla finestra Extra larga.
Mostrale anche sugli smartphone	Sugli smartphone le foto vanno sopra la tabella, sia nella finestra sia nei pannelli. Se è disattivato, gli smartphone mostrano solo la tabella.

Sfondo

Impostazione	A cosa serve
Colore di sfondo	La superficie della tabella. Predefinito: bianco.
Colore del testo	Il testo principale: cambialo insieme a uno sfondo scuro, così la tabella resta leggibile.
Immagine di sfondo	Un'immagine dietro l'intera tabella.
Adattamento dell'immagine	Riempi la tabella, Adatta l'intera immagine o Ripeti (a mosaico).
Posizione dell'immagine	Centro, In alto o In basso.
Sovrapposizione	0–90%. Sfuma l'immagine con il colore di sfondo per mantenere leggibile il testo. Allo 0% l'immagine viene mostrata così com'è.

Nota: Le tabelle integrate si appoggiano allo sfondo della pagina del tema, a meno che tu non imposti un’immagine di sfondo o un colore di sfondo diverso dal bianco.

Tabella

Impostazione	A cosa serve
Sfondo dell'intestazione delle colonne	Predefinito: grigio chiaro.
Testo dell'intestazione delle colonne	Predefinito: quasi nero.
Linee della griglia	Il colore delle linee tra righe e celle.
Righe alternate colorate	Colora una riga sì e una no per rendere più leggibili le tabelle larghe.

Le singole tabelle possono sovrascrivere questi colori nell’editor, in Opzioni di stile.

Testo

Impostazione	A cosa serve
Colore dei titoli	I titoli nella tabella, più dettagli come l'unità attiva nel selettore delle unità e il contorno del focus da tastiera.
Dimensione di base	11–20 px. Predefinito 14 px. Titoli e testo si ridimensionano a partire da questo valore.

Comportamento

Impostazione	A cosa serve
Chiudi con un clic all'esterno	Attivo per impostazione predefinita. Disattivalo perché la tabella si chiuda solo con il pulsante di chiusura. Esc funziona sempre.

CSS personalizzato

Per tutto ciò che le opzioni qui sopra non coprono. Il CSS viene aggiunto ovunque compaia una tabella. Inizia i selettori con .plug-sc così agiscono solo sulla tabella taglie e non sul resto del tema.

Nomi di classe utili:

Impostazione	A cosa serve
.plug-sc__trigger	Il link o pulsante Tabella taglie.
.plug-sc__dialog	La finestra popup o il pannello.
.plug-sc__heading	Il titolo in cima alla finestra.
.plug-sc__table	Ogni tabella delle misure.
.plug-sc__units	Il selettore delle unità sopra una tabella.
.plug-sc__float	Il pulsante mobile.
.plug-sc__inline	Una tabella integrata nella pagina.

/* Testo della tabella più piccolo nel negozio */
.plug-sc .plug-sc__table {
  font-size: 13px;
}

/* Nascondi il pulsante mobile sugli smartphone */
@media (max-width: 749px) {
  .plug-sc .plug-sc__float { display: none; }
}

Importante: Il CSS personalizzato non viene controllato per eventuali errori. Se dopo una modifica qualcosa non si vede più bene, svuota il campo e salva per tornare agli stili standard.

Ripristino

Ripristina valori predefiniti riporta ogni opzione del modulo al suo valore predefinito. Nel negozio non cambia nulla finché non fai clic su Salva.