> ## 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 impostare CSS personalizzato per le barre di upsell di spedizione gratuite > ℹ️ **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. Vuoi che il tuo Free Shipping Bar corrisponda perfettamente al marchio del tuo negozio? 🎨 Mentre la scheda Design include ampi controlli di styling, **CSS personalizzato** fornisce ulteriore flessibilità per la personalizzazione visiva avanzata. Che tu stia regolando la tipografia, la raffinazione della spaziatura, l'aggiunta di animazioni, la creazione di layout specifici per dispositivi mobili o la risoluzione di conflitti di stile specifici per il tema, Custom CSS ti dà un maggiore controllo su come la tua Free Shipping Bar appare sul negozio. --- # **⚠️ Prima di iniziare** Prima di utilizzare Custom CSS: * Assicurarsi di aver già creato una configurazione Free Shipping Upsell. * Assicurarsi di avere accesso al **Design** scheda. * Avere una comprensione di base di CSS o l'accesso a uno sviluppatore. ⚠️ **Importante:** CSS personalizzato è disponibile su tutti i tipi di posizionamento supportati tranne **Pagina di controllo** posizionamenti. I posizionamenti supportati includono: * Pagina del prodotto * Pagina del carrello * Cassetto portaoggetti * Banner (in alto e in basso) --- # **🛠️ Passo 1 — Aprire la scheda di progettazione** Aprire **Hoppy Free Shipping** app e passare alla configurazione Free Shipping Upsell che si desidera personalizzare. Allora: ➡️ Fare clic su **Design** scheda. Scorrere verso il basso fino a trovare il **CSS personalizzato** sezione. Questa sezione è tipicamente trovata sotto le impostazioni di configurazione di tipografia, barra di progresso, pulsante e upsell. --- # **🎨 Passo 2 — Aprire l'Editor CSS personalizzato** All'interno **CSS personalizzato** sezione che troverai: * Editor CSS * A **Visualizza la guida** pulsante pulsante * Anonimo **Applicare** pulsante pulsante * Un modello di avvio CSS Il modello contiene selettori comunemente usati che possono essere personalizzati senza bisogno di ispezionare manualmente gli elementi di vetrina. --- # **🎯 Passo 3 — Comprendere i selettori disponibili** Il modello di starter include diversi selettori che si rivolgono a diversi elementi Free Shipping Bar. ### **Selettori disponibili** Selezionatore Descrizione `.futureblink-free-shipping` Intero contenitore della barra di spedizione gratuita `.futureblink-message` Testo del messaggio di progresso `.futureblink-icon` Icona visualizzata con il messaggio `.futureblink-cta-button` Pulsante di chiamata a azione `.futureblink-price-text` Prezzo o valore di progresso --- ### **Selettori mobili** Per lo styling specifico per dispositivi mobili, utilizzare `.mobile` variazione. Selezionatore Descrizione `.futureblink-free-shipping.mobile .futureblink-message` Messaggio di progresso mobile `.futureblink-free-shipping.mobile .futureblink-icon` icona mobile `.futureblink-free-shipping.mobile .futureblink-cta-button` Pulsante CTA mobile `.futureblink-free-shipping.mobile .futureblink-price-text` Prezzo mobile/progresso testo 💡 Devi solo personalizzare i selettori per le tue esigenze di progettazione. --- # **✍️ Passo 4 — Aggiungi il tuo CSS personalizzato** Inserisci le regole CSS all'interno dell'editor. ### **Esempio 1 — Personalizza il messaggio di progresso** `.futureblink-free-shipping .futureblink-message {` `font-size: 18px;` `color: #ff6600;` `}` ### **Esempio 2 — Personalizza il pulsante CTA** `.futureblink-free-shipping .futureblink-cta-button {` `background-color: #000000;` `color: #ffffff;` `border-radius: 20px;` `}` ### **Esempio 3 — Mobile-Specific Styling** `.futureblink-free-shipping.mobile .futureblink-message {` `font-size: 14px;` `}` 💡 Iniziare con piccoli cambiamenti di stile prima, quindi espandere il CSS come necessario. --- # **✅ Passo 5 — Applicare il CSS** Dopo aver inserito il CSS: ➡️ Fare clic **Applicare**. L'anteprima aggiorna automaticamente in modo da poter rivedere immediatamente i cambiamenti di stile. Se si desidera rimuovere lo stile personalizzato: ➡️ Fare clic **Ripristino**. Questo ripristina il modello predefinito e disabilita il CSS personalizzato. --- # **👀 Passo 6 — Recensione dell'anteprima** Dopo aver applicato il CSS: ➡️ Rivedere l'anteprima all'interno dell'app. Verificare che: * Visualizzazione del testo correttamente. * I pulsanti appaiono come previsto. * Le icone rimangono allineate. * Colori e spaziatura corrispondono al tuo branding. Se sono necessarie modifiche: ➡️ Aggiorna il CSS. ➡️ Fare clic **Applicare** Ancora. L'anteprima si rinfresca automaticamente dopo ogni cambiamento. --- # **💾 Passo 7 — Salvare e pubblicare** Una volta soddisfatti del design: ➡️ Fare clic **Salva**. ➡️ Fare clic **Pubblicazione**. ⚠️ Salvare da solo non aggiorna il negozio. La configurazione Free Shipping Upsell deve essere pubblicata anche prima che i clienti possano vedere le modifiche. --- # **⚠️ Note importanti** ### **Manipolazione automatica!importante** Quando gli stili vengono resi sul negozio, l'app aggiunge automaticamente `!important` priorità alle dichiarazioni CSS. Questo aiuta a garantire che i vostri stili personalizzati abbiano la precedenza sullo styling a tema. --- ### **Se gli stili non appaiono** In rari casi in cui gli stili a tema rimangono dominanti, è possibile aggiungere manualmente `!important` all'interno dell'editor. Esempio: .futureblink-freeshipping .futureblink-message { font-size: 18px!importante; colore: #ff6600!importante; # --- ### **Movimentazione automatica mobile** Qualsiasi selettore utilizzando `.mobile` la variazione viene automaticamente avvolta all'interno di una query multimediale mobile quando viene resa sul negozio. Non è necessario creare manualmente dei breakpoint reattivi per questi selettori. --- ### **Limitazioni di pagina di controllo** CSS personalizzata non è disponibile per i posizionamenti della pagina di controllo perché Shopify limita l'iniezione CSS personalizzata all'interno degli ambienti di Checkout. --- ### **Convalida CSS** L'editor non convalida la sintassi CSS. Se uno stile non si applica correttamente: ➡️ Verificare i nomi dei selettori. ➡️ Controllare le bretelle e i semicoloni. ➡️ Rivedere il CSS per errori di sintassi. --- # **❓ Risoluzione dei problemi** Se i tuoi stili non appaiono correttamente: ➡️ Confermare che **Applicare** è stato cliccato. ➡️ Verificare che la configurazione sia stata **Salvataggio** e **Pubblicato**. ➡️ Controllare che i nomi dei selettori corrispondono esattamente al modello fornito. ➡️ Prova in una finestra del browser Incognito o Privato. ➡️ Aggiorna il negozio per cancellare stili cache. --- # **🎉 Risultato finale** ✅ La tua barra di spedizione gratuita può essere personalizzata oltre le impostazioni standard di progettazione. ✅ Le esperienze desktop e mobile possono essere modellate in modo indipendente. ✅ Tipografia personalizzata, spaziatura, colori e animazioni sono completamente supportate. ✅ Il Free Shipping Bar può essere allineato più strettamente con il branding del vostro negozio. Custom CSS offre una maggiore flessibilità quando i controlli di progettazione incorporati non sono sufficienti, aiutando a creare un'esperienza più lucida e coerente. ✨