Schemi di colori
Puoi definire diversi schemi di colori nelle impostazioni del tema e applicarli a sezioni diverse all'interno del negozio online con un selettore dello schema di colori. Uno schema di colori è una serie di colori. Il tema ha una serie di schemi di colori predefiniti che puoi modificare in qualsiasi momento nell'editor del tema. Puoi aggiungere i colori del tuo brand per garantire un'applicazione coerente della palette di colori in tutto il negozio online.
Per fare in modo che il design del negozio online sia uniforme in tutto il tuo sito web, i modelli non hanno impostazioni di colore individuali. Si considera un modello la pagina principale o il contenuto principale di un negozio. Avere differenti schemi di colori in tutto il negozio potrebbe causare una user experience negativa e spingere i clienti a lasciare il tuo negozio senza acquistare prodotti.
Per le sezioni che includono l'impostazione Schema di colori, puoi rivedere le funzionalità del negozio online e i tipi di pagina.
Su questa pagina
Impostazioni del tema degli schema di colori
Gli schemi di colori sono un'impostazione del tema che raggruppa gli elementi e i rispettivi colori in modo che siano ordinati visivamente. In uno schema di colori coerente puoi assegnare colori diversi a vari elementi, che possono essere applicati all'interno del tema in cui è disponibile un selettore dello schema di colori. Puoi avere fino a 21 schemi di colori. Puoi anche visualizzare un'anteprima di come vengono visualizzati i colori nello schema.
| Impostazione | Descrizione |
|---|---|
| Sfondo | Il colore viene applicato allo sfondo di alcune sezioni e allo sfondo del contorno del pulsante. |
| Gradiente sfondo | Sullo sfondo di alcune sezioni viene applicato un gradiente di colore. I gradienti sfondo sostituiscono lo sfondo ove possibile. |
| Testo | Il colore viene applicato alla sezione o al blocco di testo. |
| Sfondo pulsante in tinta unita | Il colore viene applicato allo sfondo del pulsante primario. |
| Etichetta pulsante in tinta unita | Il colore viene applicato al testo del pulsante primario. |
| Contorno pulsante | Il colore viene applicato al testo e al bordo del pulsante secondario. |
| Ombra | Il colore viene applicato alle ombre. |
Gestione dello schema di colori
Lo schema di colori e le opzioni di colore del tuo negozio sono impostati nelle impostazioni del tema. Per i colori a tinta unita, scegli il nuovo colore utilizzando il selettore di colori oppure inserisci il valore del colore nel campo di testo. Il campo del colore accetta i seguenti nomi e valori del colore:
- Nomi di colore come
red,blackoblue - Codici di colore RGB
- Valori di colore esadecimali
Passaggi:
Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Clicca su Personalizza accanto al tema che desideri personalizzare.
Clicca sull'icona a forma di ingranaggio, quindi clicca su Colori.
Nella sezione Schemi clicca su uno schema esistente o su Aggiungi schema per aggiungere un nuovo schema di colori.
Clicca sul campione di colore corrispondente al colore del tipo di contenuto che desideri modificare.
Per impostare il colore, inserisci un codice colore esadecimale o scegli il colore dal selettore di colori. Per impostare il colore su trasparente, elimina il codice esadecimale dal campo di testo.
Clicca su Salva.
Applicazione dello schema di colori
Dopo aver definito lo schema di colori nelle impostazioni del tema, puoi assegnarne uno utilizzando l'apposito selettore nelle sezioni e blocchi del tema. Il selettore dello schema di colori è disponibile solo in determinate sezioni, blocchi e impostazioni generali del tema.
Gradienti
Puoi configurare un gradiente di colore in alcuni temi per ottenere opzioni di sfondo visivamente interessanti. L'impostazione color_background viene utilizzata per personalizzare le proprietà CSS dello sfondo.
Il selettore di gradiente ti consente di selezionare colori, stile, angolo, posizione e opacità del gradiente. Le opzioni selezionate vengono visualizzate in anteprima in tempo reale nell'editor del tema. Puoi anche creare uno sfondo con gradiente utilizzando il codice CSS, che include uno strumento di verifica della convalida.
Configurazione delle sfumature
Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Clicca su Personalizza accanto al tema che desideri personalizzare.
Clicca sull'icona a forma di ingranaggio, quindi clicca su Colori.
Nella sezione Schemi clicca su uno schema esistente che desideri modificare.
Clicca sull'opzione del campione di colore del gradiente, ad esempio Gradiente sfondo.
Se precedentemente non hai configurato un gradiente, verranno visualizzate alcune opzioni preimpostate tra cui scegliere; seleziona un gradiente preimpostato per aprire il pannello delle opzioni.
Seleziona le opzioni di gradiente:
- Scegli tra un gradiente lineare o radiale. Utilizza i pulsanti per selezionare lo stile di gradiente che preferisci.
- Imposta l'angolo del gradiente con le frecce verso l'alto e il basso. Clicca sulle frecce per aumentare o diminuire di cinque la percentuale dell'angolo.
- Usa il cursore per selezionare la Posizione del gradiente o inserisci un valore numerico nel campo.
- Inserisci il codice esadecimale di un colore specifico o utilizza il cursore del colore per scegliere una tonalità. I colori selezionati di recente vengono visualizzati nella parte inferiore del pannello delle opzioni di gradiente.
- Per rendere il gradiente opaco, utilizza il cursore a destra per selezionarne la trasparenza. Puoi anche inserire una percentuale nel campo accanto al codice colore esadecimale.
Clicca su Salva.
Utilizzo di CSS per la configurazione dei gradienti
La maggior parte dei valori delle proprietà CSS background può essere utilizzata per impostare un colore di sfondo. Puoi utilizzare questo campo per i colori a tinta unita (ad esempio, i codici #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) e hsla(0, 0%, 0%, 1) produrranno tutti uno sfondo nero a tinta unita) oppure per i gradienti (ad esempio, inserendo linear-gradient(red, green), radial-gradient(red, green) o conic-gradient(red, green)). I gradienti possono anche essere ripetuti.
Passaggi:
Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Clicca su Personalizza accanto al tema che desideri personalizzare.
Clicca sull'icona a forma di ingranaggio, quindi clicca su Colori.
Nella sezione Schemi clicca su uno schema esistente che desideri modificare.
Clicca sul gradiente che desideri modificare.
Clicca sulla freccia accanto a Gradiente, quindi seleziona CSS.
Nel campo Codice CSS digita o incolla il codice del gradiente. L'anteprima dell'editor del tema mostra il gradiente nella posizione corretta.
Clicca su Salva.
Rimozione di un gradiente
Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Clicca su Personalizza accanto al tema che desideri personalizzare.
Clicca sull'icona a forma di ingranaggio, quindi clicca su Colori.
Nella sezione Schemi clicca su uno schema esistente che desideri modificare.
Clicca sul gradiente che desideri rimuovere.
Clicca su Rimuovi gradiente.
Clicca su Salva.