CSS personnalisé

Liens en vedette

1. documentation Shopify sur les sections et les blocs
2. documentation Shopify sur l’éditeur de thème
3. documentation Company XYZ sur le bloc Custom CSS

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez ce bloc lorsque vous avez besoin d’un ajustement de style que les paramètres disponibles ne peuvent pas gérer. Il vous permet d’ajouter du CSS ciblé pour la zone de modèle actuelle, ce qui est utile pour de petits remplacements tels que l’espacement, la typographie, l’alignement ou des corrections de disposition. Pour plus de contexte sur l’emplacement des blocs dans un thème, consultez la documentation Shopify sur les sections et les blocs

Saisissez uniquement du CSS, sans balises <style>. Des sélecteurs trop larges ou des règles invalides peuvent affecter une plus grande partie de la page que prévu.

Paramètres de base

Le champ de code est l’endroit où vous ajoutez votre CSS. Ce bloc fonctionne mieux pour des modifications ciblées avec des sélecteurs clairs, plutôt que pour de grandes collections de styles à l’échelle du site. Pour un aperçu de l’éditeur lui-même, consultez la documentation Shopify sur l’éditeur de thème

Conservez des règles aussi spécifiques et aussi minimales que possible. Des remplacements plus petits et bien délimités sont plus faciles à tester, plus faciles à maintenir et moins susceptibles de se casser lorsque vous mettez à jour le contenu ou ajustez des blocs voisins.

Si vous souhaitez des instructions étape par étape, consultez la référence CSS personnalisé fournie par la source.

Paramètres standard de bloc

Paramètres d’éditeur

Ces paramètres n’affectent que l’apparence du bloc dans la barre latérale de l’éditeur. Utilisez le titre de l’éditeur pour indiquer clairement l’objectif du CSS, surtout si vous ajoutez plusieurs blocs Custom CSS au même modèle.

Notes d’utilisation

1. Conservez des sélecteurs étroits. Ciblez la zone la plus petite possible afin que votre CSS ne modifie pas involontairement d’autres contenus.
2. Utilisez ceci pour les exceptions. Appuyez-vous d’abord sur les contrôles de design intégrés, puis utilisez ce bloc pour les ajustements que ces contrôles ne peuvent pas couvrir.
3. Nommez les blocs clairement. Définissez un titre d’éditeur qui décrit la modification, comme une correction d’espacement ou un ajustement de typographie mobile.
4. Vérifiez les écrans plus petits. Testez votre CSS sur mobile et sur tablette pour vous assurer que l’espacement, le retour à la ligne et l’alignement fonctionnent toujours bien.
5. Évitez d’y stocker trop de choses. Utilisez ce bloc pour des remplacements concis, et non comme emplacement fourre-tout pour de grands systèmes de styles personnalisés.