Custom CSS

Ogni tipo di conto alla rovescia termina le sue impostazioni di design con una casella Custom CSS (Developer Zone). Tutto ciò che inserisci qui viene applicato a quel conto alla rovescia sulla tua vetrina, sopra a tutto ciò che hanno impostato i controlli visivi.

La casella Custom CSS, alla fine delle impostazioni di design.

Attenzione

È una via di fuga, non la prima scelta. Il CSS scritto qui non viene verificato, l’anteprima non è sempre affidabile e continuerà a essere applicato anche se il tuo tema cambia. Prova prima i controlli visivi: coprono la maggior parte delle esigenze dei negozi.

Quando è davvero utile

• Posizionamento preciso: regolare i margini di un conto alla rovescia per collocarlo correttamente in un tema con spaziature insolite.
• Ritocchi responsive: una media query per un breakpoint che le impostazioni mobile non coprono.
• Adattarsi a un dettaglio del tema: un raggio dei bordi o un’ombra specifici che il tema usa ovunque e che i controlli non riescono a riprodurre esattamente.
• Nascondere un elemento: rimuovere una parte del conto alla rovescia che non puoi disattivare in altro modo.

Come scriverlo

La casella accetta CSS semplice, cioè selettori e regole, senza il tag <style>:

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

Il contenitore del conto alla rovescia ha la classe samita-countdown e ogni conto alla rovescia visualizzato riceve un ID costruito a partire dal proprio ID. Per puntare a qualcosa di più specifico, ispeziona il conto alla rovescia nel pannello per sviluppatori del browser e usa le classi che trovi.

Nota

I nomi delle classi all’interno del conto alla rovescia possono cambiare quando l’app viene aggiornata. Limitare il CSS a .samita-countdown e ai tuoi override, invece di usare selettori interni profondi, riduce molto il rischio che smetta di funzionare.

Mantienilo circoscritto

Il CSS di questa casella non è limitato automaticamente al conto alla rovescia. Un selettore come img { ... } colpirà tutte le immagini della pagina.

Anteponi sempre un prefisso alle regole, in modo che riguardino solo il conto alla rovescia:

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

Provalo su una pagina reale

L’anteprima del builder non riproduce il tuo tema, quindi il CSS che allinea un elemento nell’anteprima potrebbe non allinearlo nella pagina prodotto. Salva, apri una pagina reale e controlla, sia su desktop sia su telefono.

Se preferisci non scrivere CSS

Il supporto può aiutarti con le modifiche specifiche del tema. L’app offre un pulsante Chat now! accanto alla casella Custom CSS, descritto come «Chat with us to customize countdown in your theme». Puoi anche contattare il supporto indicando il link della pagina e una descrizione di ciò che vuoi cambiare.

Passaggi successivi

• Progetta un conto alla rovescia
• Posizione di visualizzazione
• Contatta il supporto
• Il conto alla rovescia non viene visualizzato