CSS personnalisé

Liens en vedette

1. Shopify CDN
2. Documentation Shopify sur l’ajout de CSS personnalisé à votre thème
3. Thèmes de l’interface administrateur Shopify
4. Documentation Shopify sur l’assistance relative aux thèmes
5. Documentation Shopify destinée aux développeurs sur les balises de schéma des sections
6. Documentation Shopify sur les performances Web
7. Documentation Shopify destinée aux développeurs sur les polices personnalisées
8. Documentation Shopify sur les ressources d’assistance supplémentaires
9. Documentation Shopify sur le CSS personnalisé
10. Documentation Shopify sur les modèles

Vidéos utiles

Vidéo de la Shopify Academy : personnaliser votre boutique

Vidéo de la Shopify Academy : personnaliser votre boutique

Ajouter du CSS personnalisé

Le CSS personnalisé vous permet de modifier le style de votre thème Align lorsque ses paramètres intégrés ne produisent pas le résultat souhaité. Utilisez-le avec précaution et testez vos modifications avant de les publier sur votre boutique en ligne.

Appliquer du CSS à l’ensemble de votre thème Align

Utilisez le CSS au niveau du thème pour les modifications qui doivent apparaître dans toute votre boutique, comme le style des boutons.

1. Dans votre interface administrateur Shopify, accédez à Online Store > Themes
2. Recherchez Align, puis cliquez sur Customize.
3. Cliquez sur Theme settings.
4. Cliquez sur Custom CSS.
5. Ajoutez votre code.
6. Cliquez sur Save.

Le CSS au niveau du thème s’applique à toutes les pages de la boutique, à l’exception de Checkout, et est limité à 1 500 caractères.

Appliquer du CSS à une section

Utilisez le CSS au niveau de la section lorsqu’une modification doit affecter une seule section, comme sa taille de police ou sa couleur d’arrière-plan.

1. Dans votre interface administrateur Shopify, accédez à Online Store > Themes
2. Recherchez Align, puis cliquez sur Customize.
3. Sélectionnez la section dont vous souhaitez modifier le style.
4. En bas du panneau des propriétés de la section, cliquez sur Custom CSS.
5. Ajoutez votre code.
6. Cliquez sur Save.

Le CSS au niveau de la section est limité à la section sélectionnée et à 500 caractères.

Respecter les limites du CSS personnalisé

Le CSS personnalisé nécessite une certaine familiarité avec CSS et HTML. Pour obtenir des conseils spécifiques à Align, commencez par contacter Company XYZ support. Pour connaître les limites de la plateforme Shopify et obtenir des informations générales sur l’assistance relative aux thèmes, consultez les ressources d’assistance disponibles pour les thèmes

1. Utiliser les règles prises en charge. @import, @charset et @namespace ne sont pas pris en charge. Dans le CSS au niveau de la section, seules les règles @media, @container, @layer et @supports sont autorisées.
2. Cibler le contenu de la section avec précaution. Le CSS au niveau de la section ne peut pas cibler l’ID ou les classes du wrapper externe de la section. Une règle qui commence par la balise du wrapper parent est traitée comme une règle descendante au sein de cette section. Le wrapper est généralement un <div>, mais les thèmes peuvent utiliser d’autres valeurs autorisées
3. Utiliser des URL d’assets approuvées. Les URL utilisées dans le CSS personnalisé peuvent uniquement utiliser le domaine https://cdn.shopify.com.
4. Tenir compte des performances des polices. Les polices personnalisées sont autorisées, mais les navigateurs les téléchargent avant d’afficher le texte. Testez leur effet sur les performances de la boutique, et découvrez comment utiliser des polices personnalisées dans votre thème
5. Tester à nouveau après les mises à jour du thème. Les modifications apportées au balisage, aux sélecteurs ou aux classes du thème peuvent empêcher le CSS personnalisé existant de fonctionner.

Si vous recevez une erreur que vous ne parvenez pas à résoudre, contactez Company XYZ support pour obtenir des conseils concernant Align et consultez les ressources d’assistance supplémentaires de Shopify pour obtenir de l’aide concernant la plateforme.

Notes d’utilisation

1. Commencer par les paramètres intégrés. Utilisez le CSS personnalisé uniquement lorsque les contrôles disponibles du thème Align ne produisent pas le résultat souhaité.
2. Garder des règles ciblées. Utilisez le CSS au niveau du thème pour les styles communs et le CSS au niveau de la section pour les ajustements locaux.
3. Vérifier toutes les tailles d’écran. Testez les modifications sur ordinateur et sur mobile avant de les publier.
4. Enregistrer une copie de vos règles. Conservez votre CSS dans un endroit accessible afin de pouvoir le restaurer ou le mettre à jour après une mise à jour du thème.