Code personnalisé

Liens en vedette

1. Documentation Shopify sur l’extension de votre thème
2. Documentation Shopify sur l’éditeur de thème
3. Documentation Shopify sur Liquid
4. Documentation Shopify sur Liquid concernant la politique d’expédition de la boutique
5. Documentation Shopify sur les paramètres Liquid
6. Documentation Shopify sur l’ajout de CSS personnalisé à votre thème
7. Documentation Shopify sur les modèles
8. Documentation Shopify sur l’assistance des thèmes
9. Documentation Shopify sur les applications
10. Documentation Shopify sur les App blocks

Vidéos utiles

Vidéo de la Shopify Academy : personnaliser votre boutique

Vidéo de la Shopify Academy : personnaliser votre boutique

Étendre Align avec du code personnalisé

Align inclut des paramètres de thème intégrés pour de nombreuses modifications courantes. Lorsque ces paramètres ne répondent pas à vos besoins, vous pouvez étendre votre thème Align avec du HTML ou du Liquid personnalisé, du CSS personnalisé, une application ou des modifications directes du code.

Commencez par utiliser l’éditeur de thème Shopify pour comprendre les paramètres disponibles dans votre thème Align actuel. Pour obtenir des conseils sur la plateforme, consultez la documentation Shopify sur l’éditeur de thème

Ajouter du HTML ou du Liquid personnalisé

Certains thèmes incluent des paramètres permettant d’ajouter du HTML ou du Liquid dans un modèle, une section ou un bloc. Ces paramètres peuvent vous permettre d’ajouter du contenu personnalisé pris en charge sans modifier directement le code du thème, ce qui contribue à préserver l’éligibilité de votre thème aux mises à jour.

Consultez la documentation Align avant de continuer afin de vérifier si votre thème inclut une option de HTML ou de Liquid personnalisé. Vous pouvez utiliser une section Custom Liquid pour :

1. Insérer des variables Liquid lorsqu’elles répondent aux besoins de votre activité, par exemple pour afficher votre politique d’expédition sur une page produit.
2. Ajouter le code requis pour intégrer une application à votre thème.

Les paramètres Liquid donnent accès à un ensemble limité d’objets et de balises Liquid. Consultez la documentation sur les paramètres Liquid pour connaître les options prises en charge.

Ajouter du CSS personnalisé

Le CSS contrôle l’apparence des éléments dans votre thème. Utilisez la fonctionnalité de CSS personnalisé de Shopify lorsque vous avez besoin de modifier les styles au-delà des paramètres Align disponibles.

Vous pouvez appliquer du CSS personnalisé à l’ensemble du thème ou à une section spécifique dans un modèle. Cette tâche nécessite une bonne connaissance du CSS et du HTML. Avant d’effectuer des modifications, consultez la documentation Align de Company XYZ et ses ressources d’assistance sur l’assistance Company XYZ, ainsi que les recommandations de Shopify concernant l’assistance disponible pour les thèmes

Installer une application

Les applications peuvent s’intégrer à votre thème Align de plusieurs façons :

1. App blocks

   Ajoutez les fonctionnalités d’une application là où vous en avez besoin, puis personnalisez-les ou supprimez-les dans l’éditeur de thème. Les App blocks sont disponibles uniquement avec les thèmes Online Store 2.0 ; pour les thèmes vintage, consultez la fiche de l’application et sa documentation pour vérifier la compatibilité.

2. App embeds

   Activez, désactivez et personnalisez les superpositions, les éléments flottants ou les fonctionnalités d’arrière-plan fournis par l’application depuis l’éditeur de thème.

3. Applications ajoutées au code du thème

   Certaines applications ajoutent directement du code au thème. Selon l’application, vous pouvez le gérer depuis les paramètres de l’application ou l’éditeur de thème. Si votre thème inclut une section Custom Liquid, vous pourrez peut-être y ajouter le code de l’application au lieu de modifier directement le code du thème.

Lorsque vous publiez un autre thème, réactivez vos applications dans le nouveau thème. Elles ne sont pas actives par défaut.

Modifier le code de votre thème

Les modifications directes du code permettent d’effectuer des changements détaillés lorsque l’éditeur de thème, le CSS personnalisé, Custom Liquid et les applications ne répondent pas à vos besoins.

Attention

La modification du code du thème peut rendre votre thème Align inéligible aux mises à jour. N’utilisez cette option que lorsque vous ne pouvez pas effectuer la modification requise dans l’éditeur de thème.

Pour connaître les éléments à prendre en compte et les mesures de protection lors de la modification, consultez la documentation Shopify sur la modification de votre thème avec du code

Ne modifiez le code du thème que si vous êtes à l’aise avec le HTML et le CSS et que vous avez une compréhension de base de Liquid. Pour obtenir des conseils spécifiques à Align, commencez par l’assistance Company XYZ. L’assistance Shopify peut vous aider pour certaines personnalisations de code des thèmes gratuits éligibles appartenant à Shopify ; consultez les recommandations de Shopify sur l’assistance des thèmes pour connaître la politique de la plateforme.

Vous pouvez modifier le code du thème de deux façons :

1. Modifier le code directement dans l’interface administrateur Shopify
2. Travailler localement avec des outils de développement tels que Shopify CLI et l’intégration Shopify GitHub

Notes d’utilisation

1. Commencez par les paramètres du thème. Utilisez les options Align intégrées avant de passer au code personnalisé ou à une application.
2. Utilisez Custom Liquid avec précaution. Vérifiez que les objets et les balises Liquid requis sont pris en charge avant d’ajouter du contenu.
3. Vérifiez la compatibilité de l’application. Consultez la documentation de l’application, en particulier lorsque vous utilisez un thème vintage.
4. Planifiez les modifications du thème. Réactivez les applications après avoir publié un nouveau thème.
5. Préservez l’éligibilité aux mises à jour. N’effectuez des modifications directes du code que lorsque les autres options de personnalisation ne permettent pas d’obtenir le résultat requis.