Usa questa guida quando i temi predefiniti sono vicini, ma non abbastanza. Ogni esempio seguente ti fornisce un set di CSS personalizzato pronto da incollare.
Il modo più rapido è copiare uno dei temi di esempio, incollarlo nel tuo strumento di chat IA preferito e chiedere aggiustamenti come “Rendilo meno arrotondato, il colore principale deve essere viola.”
Per iniziare
- Nell’amministrazione Shopify, vai su Negozio online > Temi.
- Clicca su Personalizza sul tema che vuoi modificare.
- Apri un template di prodotto.
- Aggiungi il blocco Selezione garanzia PDP vicino al modulo del prodotto.
- Salva le modifiche.
- Visualizza in anteprima la pagina prodotto e conferma che le opzioni di garanzia appaiano dove ti aspetti.
Approccio di avvio rapido migliore: scegli prima uno dei temi integrati, poi usa le variabili CSS personalizzate solo se desideri un controllo maggiore.
Riferimento impostazioni
Tema
Scegli uno dei preset integrati. Predefinito: Minimal.
- Minimal
- Ambar
- Dark
- Brand Colors
- Mint
- Ocean
- Caramel Latte
- Valentine
- Retro
Brand Colors estrae automaticamente i valori dei colori dal tuo tema Shopify. Legge le variabili del tema come --color-accent-1, --color-accent-2, --color-background e --color-foreground. Non è necessario incollare questi valori nelle variabili CSS personalizzate.
Arrotondamento
Controlla lo stile generale degli angoli del widget. Predefinito: 12px. Questa impostazione alimenta automaticamente i valori del raggio di card, opzioni, copertura e badge del widget.
Mostra badge “Più popolare”
Mostra o nasconde il badge Più popolare sulle opzioni già contrassegnate come tali nei dati del piano di garanzia. Predefinito: abilitato. Se questo interruttore è attivo ma nessuna opzione è contrassegnata come più popolare, il badge non apparirà.
Descrizione garanzia
Controlla il testo descrittivo mostrato sotto l’intestazione del widget. Predefinito: Estendi la tua garanzia e goditi la tranquillità con una copertura completa.
Mostra vantaggi
Mostra o nasconde l’area dei vantaggi per ogni opzione. Predefinito: abilitato. Quando abilitato, i clienti possono vedere i dettagli di copertura dei piani selezionati.
Intestazione vantaggi
Controlla il testo dell’intestazione mostrato sopra l’elenco dei vantaggi. Predefinito: Cosa è coperto:.
Stile elenco vantaggi
Controlla come viene visualizzato ogni vantaggio. Predefinito: Spunte.
- Spunte
- Punti
- Trattini
Mostra badge “Offerta speciale”
Mostra o nasconde il badge superiore nell’intestazione del widget. Predefinito: abilitato.
Testo badge Offerta speciale
Controlla il testo mostrato all’interno del badge Offerta speciale. Predefinito: Offerta speciale.
Variabili CSS personalizzate
Usa questo campo per uno stile avanzato. Inserisci solo dichiarazioni di variabili CSS separate da punto e virgola. I blocchi CSS completi non sono supportati.
--cv-primary: #0f766e; --cv-border: #99f6e4; --cv-badge-special-bg: #0f766e;Importante:
- Usa solo variabili
--cv-*in questo campo. - Non incollare selettori CSS completi o blocchi di regole.
- I nomi non supportati vengono ignorati.
Esempi di personalizzazioni
Calore Terracotta
& {
--cv-primary: #c2410c;
--cv-border: #f97316;
--cv-border-muted: #fdba74;
--cv-background: #fffbf5;
--cv-background-gradient: linear-gradient(180deg, #fffbf5 0%, #ffedd5 60%, #fed7aa 100%);
--cv-card-shadow: 0 10px 18px -8px rgb(140 60 10 / 0.18), 0 4px 8px -6px rgb(140 60 10 / 0.1);
--cv-icon: #ea580c;
--cv-text: #431407;
--cv-muted-text: #9a3412;
--cv-option-hover-border: #fb923c;
--cv-option-selected-bg: #ffedd5;
--cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 6px 10px -6px rgb(140 60 10 / 0.2);
--cv-option-title: #431407;
--cv-option-title-selected: #c2410c;
--cv-price: #431407;
--cv-price-selected: #ea580c;
--cv-badge-special-bg: #ea580c;
--cv-badge-special-text: #fff7ed;
--cv-badge-popular-bg: #fff7ed;
--cv-badge-popular-text: #c2410c;
--cv-badge-popular-border: #fdba74;
--cv-coverage-bg: #fed7aa;
--cv-coverage-title: #c2410c;
--cv-coverage-text: #431407;
--cv-coverage-icon: #ea580c;
--cv-footer-text: #9a3412;
--cv-footer-brand: #ea580c;
--cv-radio-accent: #ea580c;
--cv-radius-card: 18px;
--cv-radius-option: 12px;
--cv-radius-badge: 999px;
--cv-radius-coverage: 8px;
}Pop Conversione
& {
--cv-primary: #7c3aed;
--cv-primary-contrast: #ffffff;
--cv-border: #a78bfa;
--cv-border-muted: #c4b5fd;
--cv-background: #faf5ff;
--cv-background-gradient: linear-gradient(160deg, #ede9fe 0%, #ddd6fe 40%, #f5f3ff 95%);
--cv-card-shadow: 0 12px 20px -8px rgb(60 20 120 / 0.22), 0 4px 8px -6px rgb(60 20 120 / 0.12);
--cv-icon: #7c3aed;
--cv-text: #2e1065;
--cv-muted-text: #5b21b6;
--cv-option-hover-border: #a78bfa;
--cv-option-selected-bg: #ede9fe;
--cv-option-selected-shadow: 0 0 0 2px #c4b5fd, 0 6px 10px -6px rgb(60 20 120 / 0.2);
--cv-option-title: #2e1065;
--cv-option-title-selected: #6d28d9;
--cv-price: #2e1065;
--cv-price-selected: #7c3aed;
--cv-badge-special-bg: #6d28d9;
--cv-badge-special-text: #f5f3ff;
--cv-badge-popular-bg: #ede9fe;
--cv-badge-popular-text: #5b21b6;
--cv-badge-popular-border: #c4b5fd;
--cv-coverage-bg: #ddd6fe;
--cv-coverage-title: #2e1065;
--cv-coverage-text: #3b0764;
--cv-coverage-icon: #7c3aed;
--cv-footer-text: #5b21b6;
--cv-footer-brand: #7c3aed;
--cv-radio-accent: #7c3aed;
--cv-radius-card: 0px;
--cv-radius-option: 0px;
--cv-radius-badge: 999px;
--cv-radius-coverage: 0px;
}Minimal / Neutro
Usa questo se vuoi un aspetto più pulito e a basso contrasto.
--cv-border: #e5e7eb;
--cv-border-muted: #e5e7eb;
--cv-background: #ffffff;
--cv-background-gradient: #ffffff;
--cv-card-shadow: 0 8px 20px -12px rgb(15 23 42 / 0.2);
--cv-primary: #111111;
--cv-icon: #111111;
--cv-text: #0f172a;
--cv-muted-text: #64748b;
--cv-option-hover-border: #111111;
--cv-option-selected-bg: #f8fafc;
--cv-option-selected-shadow: 0 0 0 1px #e2e8f0, 0 10px 16px -12px rgb(15 23 42 / 0.25);
--cv-option-title: #0f172a;
--cv-option-title-selected: #111111;
--cv-price: #0f172a;
--cv-price-selected: #111111;
--cv-badge-special-bg: #111111;
--cv-badge-special-text: #ffffff;
--cv-coverage-bg: #f3f4f6;
--cv-coverage-title: #111111;
--cv-coverage-text: #111111;
--cv-coverage-icon: #111111;
--cv-footer-text: #475569;
--cv-footer-brand: #111111;
--cv-radio-accent: #111111;Scuro / Alto contrasto
Usa questo se il tuo negozio usa un design di pagina prodotto scuro.
--cv-border: #374151;
--cv-border-muted: #1f2937;
--cv-background: #0f172a;
--cv-background-gradient: linear-gradient(135deg, #111827 0%, #0f172a 65%);
--cv-card-shadow: 0 10px 20px -10px rgb(0 0 0 / 0.6);
--cv-primary: #fbbf24;
--cv-icon: #fbbf24;
--cv-text: #f9fafb;
--cv-muted-text: #9ca3af;
--cv-option-hover-border: #4b5563;
--cv-option-selected-bg: #1f2937;
--cv-option-selected-shadow: 0 0 0 2px #374151, 0 10px 16px -12px rgb(0 0 0 / 0.7);
--cv-option-title: #f9fafb;
--cv-option-title-selected: #fef3c7;
--cv-price: #f9fafb;
--cv-price-selected: #fbbf24;
--cv-badge-special-bg: #fbbf24;
--cv-badge-special-text: #111827;
--cv-coverage-bg: #111827;
--cv-coverage-title: #e5e7eb;
--cv-coverage-text: #cbd5f5;
--cv-coverage-icon: #fbbf24;
--cv-footer-text: #9ca3af;
--cv-footer-brand: #fbbf24;
--cv-radio-accent: #fbbf24;Allineato al brand
Usa prima il tema Brand Colors, poi aggiungi alcune sostituzioni se vuoi un’enfasi più forte o angoli più morbidi.
--cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 8px 12px -10px rgb(154 52 18 / 0.2);
--cv-badge-popular-bg: #fff7ed;
--cv-badge-popular-text: #9a3412;
--cv-badge-popular-border: #fdba74;
--cv-radius-card: 18px;
--cv-radius-option: 14px;
--cv-radius-coverage: 10px;
--cv-radius-badge: 999px;Se vuoi il controllo totale invece dei colori guidati dal tema, passa da Brand Colors e imposta direttamente i valori --cv-* pertinenti.
Riferimento variabili CSS
Palette principale e superficie
| Variabile | Descrizione |
|---|---|
--cv-primary | Colore di accento principale per gli stati selezionati e le evidenziazioni |
--cv-primary-contrast | Colore di contrasto abbinato al primario. Presente nella mappatura del tema, ma non attualmente utilizzato direttamente |
--cv-border | Colore del bordo per la card di garanzia esterna |
--cv-border-muted | Colore del bordo predefinito per le righe delle opzioni di garanzia |
--cv-background | Colore di sfondo per ogni riga di opzione di garanzia |
--cv-background-gradient | Sfondo o gradiente per la card di garanzia principale |
--cv-card-shadow | Ombra attorno alla card di garanzia principale |
--cv-icon | Colore dell’icona del widget vicino all’intestazione |
--cv-text | Colore del testo principale in tutto il widget |
--cv-muted-text | Colore del testo secondario per descrizione e testo attenuato |
Stati delle opzioni
| Variabile | Descrizione |
|---|---|
--cv-option-hover-border | Colore del bordo quando il cliente passa sopra un’opzione di garanzia |
--cv-option-selected-bg | Colore di sfondo per l’opzione di garanzia selezionata |
--cv-option-selected-shadow | Ombra o contorno per l’opzione di garanzia selezionata |
--cv-option-title | Colore predefinito del titolo dell’opzione di garanzia |
--cv-option-title-selected | Colore del titolo per l’opzione di garanzia selezionata |
--cv-price | Colore del prezzo predefinito |
--cv-price-selected | Colore del prezzo per l’opzione di garanzia selezionata |
--cv-radio-accent | Colore di accento del pulsante radio |
Badge
| Variabile | Descrizione |
|---|---|
--cv-badge-special-bg | Colore di sfondo per il badge Offerta speciale superiore |
--cv-badge-special-text | Colore del testo per il badge Offerta speciale superiore |
--cv-badge-popular-bg | Colore di sfondo per il badge Più popolare |
--cv-badge-popular-text | Colore del testo per il badge Più popolare |
--cv-badge-popular-border | Colore del bordo per il badge Più popolare |
Sezione copertura
| Variabile | Descrizione |
|---|---|
--cv-coverage-bg | Colore di sfondo per il pannello dei vantaggi o della copertura |
--cv-coverage-title | Colore per l’intestazione dei vantaggi |
--cv-coverage-text | Colore per il testo dell’elenco dei vantaggi |
--cv-coverage-icon | Colore per i punti elenco, le spunte o i marcatori dell’elenco dei vantaggi |
Piè di pagina
| Variabile | Descrizione |
|---|---|
--cv-footer-text | Colore del testo del piè di pagina |
--cv-footer-brand | Colore del testo del brand Coverly nel piè di pagina |
Tipografia e sostituzioni avanzate
| Variabile | Descrizione |
|---|---|
--cv-font-family | Sostituzione della famiglia di font per il widget |
--cv-text-color | Sostituzione del colore del testo di livello superiore. Può fungere da fallback più ampio |
Sostituzioni del raggio
| Variabile | Descrizione |
|---|---|
--cv-radius-card | Raggio degli angoli per la card di garanzia esterna |
--cv-radius-option | Raggio degli angoli per ogni riga di opzione di garanzia |
--cv-radius-coverage | Raggio degli angoli per il pannello dei vantaggi o della copertura |
--cv-radius-badge | Raggio degli angoli per i badge |
Note
--cv-radiusè impostato internamente dall’impostazione Arrotondamento, ma gli stili attuali del widget usano le variabili di raggio più specifiche elencate sopra.--cv-primary-contrastesiste nella mappatura del tema, ma attualmente non modifica gli stili visibili del widget da solo.
Risoluzione dei problemi
Le mie modifiche non si applicano
Controlla prima questi punti:
- Conferma di aver incollato i valori in Variabili CSS personalizzate.
- Conferma che ogni voce inizia con
--cv-. - Conferma che le dichiarazioni sono separate da punto e virgola.
- Rimuovi tutti i selettori come
.class { ... }— il campo accetta solo variabili.
Il badge Più popolare non viene mostrato
Entrambe le condizioni devono essere vere:
- Mostra badge “Più popolare” è abilitato.
- Almeno un’opzione di garanzia è contrassegnata come
most_popularnei dati del piano di garanzia.
I vantaggi non vengono mostrati
Controlla prima questi punti:
- Mostra vantaggi è abilitato.
- L’opzione di garanzia selezionata include dati sui vantaggi.
- Intestazione vantaggi e Stile elenco vantaggi sono configurati come previsto.
Il tema Brand Colors non sembra diverso
Il preset Brand Colors dipende dalle variabili di colore già disponibili nel tuo tema Shopify. Se il tuo tema non espone valori forti per quei colori, il widget potrebbe sembrare simile a uno stile neutro. Prova:
- Passare a un altro tema integrato.
- Aggiungere sostituzioni esplicite
--cv-*nelle variabili CSS personalizzate.
Le modifiche all’arrotondamento sono troppo sottili
L’arrotondamento aggiorna più valori di raggio interni contemporaneamente. Se vuoi un controllo maggiore, sostituisci --cv-radius-card, --cv-radius-option, --cv-radius-coverage e --cv-radius-badge individualmente.
Inizia con un preset di tema integrato, poi aggiungi variabili CSS personalizzate solo dove necessario. Questo offre la configurazione più rapida e la manutenzione più semplice.