ℹ️ Note: Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto.

Il raccoglitore di slot dovrebbe sentirsi come una parte naturale del vostro negozio — e il colore è il modo più veloce per farlo accadere 🎨

Con il App Widget colori impostazioni Hoppy Delivery Dates, è possibile abbinare i pulsanti del raccoglitore, evidenzia e testo al tema — separatamente per Desktop e Mobile.

📌 Prima di iniziare

• Hoppy Delivery Dates è installato e l'app incorporata è abilitata nel vostro tema
• Il raccoglitore di slot è visibile sulla tua pagina Cart
• Sei collegato al tuo Shopify admin

Fase 1 — Aprire la pagina Aspetto

Nella navigazione app, vai a:

Hoppy Delivery Dates → Aspetto

Trova il App Widget colori Carta.

La carta ha Desktop e Mobile schede — i colori sono configurati separatamente per ogni dispositivo.

Passo 2 — Capire le quattro impostazioni di colore

Ci sono quattro colori con cui lavorare:

• Colore primario → il colore principale accento. Usato per cose come stati selezionati, pulsanti e la barra superiore del raccoglitore
• Colore secondario → il colore di sfondo utilizzato dietro gli elementi di picker
• Colore del carattere primario → il colore del testo utilizzato su sfondi secondari/luce
• Colore del carattere secondario → il colore del testo utilizzato su sfondi primari/accenti

Colori di default

• Colore primario → #3D3D3D (grigio scuro)
• Colore secondario → #ffffff (bianco)
• Colore del carattere primario → #3D3D3D
• Colore del carattere secondario → #ffffff

Passo 3 — Impostare i colori

Ogni colore ha due modi per impostarlo:

• Digitare un codice esagonale direttamente nel campo di testo (ad es. #1a73e8)
• Oppure fare clic su colore orologio accanto al campo per aprire il raccoglitore di colore e scegliere visivamente 🌈

Entrambi rimangono in sincronia — prendendo da swatch aggiorna il campo esagonale, e digitando un hex aggiorna lo swatch.

Esempio

• Colore primario → #2c6ecb (il pulsante blu del tuo tema)
• Colore secondario → #ffffff
• Colore del carattere primario → #212121
• Colore del carattere secondario → #ffffff

💡 Il modo più semplice per ottenere una corrispondenza perfetta: copiare il codice esagonale del colore del pulsante del tema dal Online Store → Temi → Personalizza → Impostazioni tematiche → Colori.

Passo 4 — Ripetere per il Mobile (opzionale)

Passare al Mobile scheda e impostare i colori anche se si desidera un look diverso su schermi più piccoli. In caso contrario, configurare entrambe le schede con gli stessi valori per un aspetto coerente.

Passo 5 — Salvare e rivedere

Fare clic Salva in cima alla pagina.

Utilizzare il pannello di anteprima sul lato destro della pagina Aspetto per un controllo rapido, quindi aprire la pagina Cart per vedere i colori in diretta 👀

⚠️ Note importanti

⚠️ Assicurarsi che i colori del carattere contrastano bene con i loro sfondi — il testo leggero su uno sfondo leggero sarà difficile per i clienti di leggere.

ℹ️ I colori Desktop e Mobile sono indipendenti — ricordatevi di controllare entrambe le schede dopo il salvataggio.

🎉 Risultato finale

Una volta configurato con successo:

✅ Il raccoglitore di slot corrisponde ai colori del tuo tema ✅ Pulsanti, punti salienti e testo tutti utilizzano la vostra tavolozza scelta ✅ Desktop e Mobile ogni aspetto esattamente come si desidera ✨

Aggiornato il: 10/09/2026