Comment ajouter du CSS personnalisé à toute ma boutique ou à une seule section ?

Le CSS change l'apparence de votre boutique : couleurs, espacements, tailles, etc. Vous pouvez ajouter votre propre CSS à deux endroits du constructeur : pour toute la boutique, ou pour une seule section.

CSS personnalisé pour toute la boutique

Cliquez sur l'icône en forme d'engrenage et ouvrez l'onglet CSS personnalisé. La zone s'appelle Code CSS : S'applique à toute la boutique. Votre CSS se charge sur toutes les pages du marché que vous modifiez, et l'aperçu montre le résultat.

Utilisez-le pour des règles qui doivent s'appliquer partout, par exemple masquer un élément sur toutes les pages ou changer le style de tous les boutons. Par exemple, h1 { text-transform: uppercase; } écrit le titre principal de chaque page en majuscules.

CSS personnalisé pour une section

Sélectionnez une section dans l'onglet Sections. En bas de ses réglages, ouvrez l'onglet CSS personnalisé. Sa zone Code CSS indique S'applique uniquement à cette section. La plupart des sections l'ont, y compris l'en-tête, le pied de page, le héros, les informations produit et la page de commande.

C'est le choix le plus sûr. Storeep ajoute la section devant chacun de vos sélecteurs, donc vos règles ne peuvent rien modifier en dehors d'elle.

• h2 { letter-spacing: 2px; } ne change que les titres à l'intérieur de cette section.
• Utilisez & pour styliser la section elle-même : & { border-top: 1px solid #000; }.
• Les règles @media fonctionnent. Les règles qu'elles contiennent sont aussi limitées à la section.
• Les animations @keyframes sont conservées telles que vous les avez écrites.

Le CSS de section appartient à cette section sur cette page. Utilisez Appliquer à toutes les pages sur la section pour copier la section, avec son CSS, sur vos autres pages qui la contiennent. Voir Appliquer à toutes les pages.

Lequel utiliser

• Une seule section a un problème : utilisez le CSS personnalisé de la section.
• La même modification est nécessaire partout : utilisez l'onglet CSS personnalisé des Réglages.
• Avant d'écrire du CSS, vérifiez si un réglage le fait déjà : les couleurs sont dans Schémas de couleurs, les polices dans Réglages des polices, et les coins et les ombres viennent de votre thème.

Quand votre CSS ne fonctionne pas

• Cherchez un } ou un ; manquant. Une seule erreur peut bloquer les règles qui suivent.
• Votre règle est peut-être plus faible que celle du thème. Rendez le sélecteur plus précis.
• Dans le CSS de section, ne commencez pas votre sélecteur par body ou html. Ils sont en dehors de la section, donc la règle ne s'appliquera pas.
• Si la page semble cassée, retirez votre dernière modification, publiez, puis remettez les règles une par une.

Bon à savoir

• Le CSS personnalisé appartient au marché que vous modifiez. Répétez-le dans chaque marché qui en a besoin.
• Changer de thème peut modifier les noms de classes et la mise en page : vérifiez donc votre CSS personnalisé après un changement de thème.
• Les modifications sont mises en ligne quand vous cliquez sur Publier.
• Pour du HTML et du code à l'intérieur d'une page, voir Code personnalisé.