CSS personnalisé

Chaque type de compte à rebours se termine, dans ses paramètres de design, par une zone Custom CSS (Developer Zone). Tout ce que vous y saisissez est appliqué à ce compte à rebours sur votre vitrine, par-dessus tout ce que les contrôles visuels ont défini.

La zone Custom CSS, à la fin des paramètres de design.

Attention

C’est une solution de dernier recours, pas un premier réflexe. Le CSS écrit ici n’est pas vérifié, son aperçu n’est pas fiable et il continuera de s’appliquer même si votre thème change. Essayez d’abord les contrôles visuels : ils couvrent l’essentiel des besoins des boutiques.

Quand c’est vraiment utile

• Positionnement précis : ajuster les marges d’un compte à rebours pour qu’il s’intègre correctement dans un thème aux espacements inhabituels.
• Ajustements responsives : une media query pour un point de rupture que les paramètres mobiles ne couvrent pas.
• Reproduire un détail du thème : un rayon de bordure ou une ombre précis que votre thème utilise partout et que les contrôles ne peuvent pas reproduire exactement.
• Masquer un élément : retirer une partie du compte à rebours que vous ne pouvez désactiver autrement.

L’écrire

La zone accepte du CSS simple (sélecteurs et règles, sans balise <style>) :

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

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

Le conteneur du compte à rebours porte la classe samita-countdown, et chaque compte à rebours affiché reçoit un ID construit à partir de son ID de compte à rebours. Pour cibler un élément plus précis, inspectez le compte à rebours affiché dans les outils de développement de votre navigateur et utilisez les classes que vous y trouvez.

Note

Les noms de classes à l’intérieur du compte à rebours peuvent changer lorsque l’application est mise à jour. Limiter votre CSS à .samita-countdown et à vos propres surcharges, plutôt qu’à des sélecteurs internes profonds, réduit fortement le risque de casse.

Limiter la portée

Le CSS de cette zone n’est pas automatiquement limité au compte à rebours. Un sélecteur comme img { ... } s’appliquera à toutes les images de la page.

Préfixez toujours vos règles pour qu’elles n’atteignent que le compte à rebours :

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

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

Testez-le sur une vraie page

L’aperçu du générateur ne reproduit pas votre thème : un CSS qui aligne un élément dans l’aperçu peut ne pas l’aligner sur votre page produit. Enregistrez, ouvrez une vraie page et vérifiez, sur ordinateur et sur téléphone.

Si vous préférez ne pas écrire de CSS

L’assistance peut vous aider pour les ajustements propres à votre thème. L’application propose un bouton Chat now! à côté de la zone Custom CSS, décrit ainsi : “Chat with us to customize countdown in your theme.” Vous pouvez aussi contacter l’assistance en indiquant un lien vers la page et une description de ce que vous souhaitez modifier.

Étapes suivantes

• Personnaliser le design d’un compte à rebours
• Position d’affichage
• Contacter l’assistance
• Le compte à rebours ne s’affiche pas