CSS personnalisé

Paramètres propose un champ CSS personnalisé unique, partagé par le widget de chaque campagne de votre boutique. Utilisez-le pour les touches finales que ne couvre pas l’onglet Widget › Style propre à une campagne — assortir une police, ajuster des espacements, restyler une bordure, ou masquer un élément — plutôt que pour construire un widget entièrement différent. L’onglet Style couvre déjà les couleurs, les espacements, le rayon des angles et les effets avec des champs simples ; réservez le CSS personnalisé aux cas où cela ne suffit pas, car une règle ajoutée ici s’applique partout, pas à une seule campagne.

Votre CSS se charge après les styles propres du widget, si bien qu’il les prime sans avoir besoin de !important pour la plupart des changements.

Limites

Règle	Valeur
Longueur maximale	10 000 caractères
Interdit	Les caractères </ n’importe où dans le CSS

CSS pur uniquement. La restriction sur </ existe parce que votre CSS est intégré en ligne dans une balise <script> sur la page produit, en plus d’être servi depuis le CDN — cette séquence de caractères exacte pourrait fermer prématurément la balise environnante, et du vrai CSS n’en a jamais légitimement besoin. Il n’y a pas d’autre liste d’exclusion : sélecteurs, requêtes @media, animations et propriétés personnalisées sont toutes autorisées.

Les changements deviennent actifs à votre prochaine publication, qui démarre dès que vous cliquez sur Enregistrer — il n’y a pas d’étape séparée de « publication du CSS ».

Astuce

Utilisez le bouton Beautify (mettre en forme) pour reformater ce que vous collez avant d’enregistrer — utile si vous copiez depuis une source minifiée.

Exemples

L’app ne publie pas de référence de classes, alors utilisez l’inspecteur de votre navigateur sur une page produit en direct pour trouver la classe que vous voulez cibler. Ces exemples utilisent de vraies classes du balisage actuel du widget.

Faire correspondre la police du widget à celle de votre thème :

.sfw { font-family: inherit; }

Mettre le prix en gras spécifiquement sur la disposition Cartes options :

.w-cards .price { font-weight: 700; }

Masquer la ligne « You save » si vous préférez garder le widget minimal :

.you-save { display: none; }

Resserrer le remplissage uniquement sur les écrans étroits, puisque les requêtes @media fonctionnent normalement :

@media (max-width: 480px) {
  .sfw { padding: 8px; }
}

Attention

Le CSS personnalisé n’est pas couvert par l’assistance. Si une règle casse la mise en page du widget — masque le bouton d’ajout au panier, chevauche du texte, ou se casse en largeur mobile — c’est la faute du CSS, pas de l’app. Testez sur une vraie page produit en largeur étroite avant de vous y fier, et retirez la règle si vous n’êtes pas sûr de ce qui a cassé.

Voir aussi : Dispositions du widget, Texte et traductions du widget.