> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # πŸš€ Come personalizzare i colori Widget > ℹ️ **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 ✨