ℹ️ 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. ✨

Aggiornato il: 10/09/2026