Comment ajouter une section de page d'accueil Shopify à n'importe quel modèle

Les thèmes Shopify comportent des sections dynamiques sur chaque page d'accueil. Contenu tel que des bannières de héros, des carrousels, des blogs en vedette et des collections pour n'en nommer que quelques-uns. Cela facilite la modification de votre page d'accueil et la personnalisation de votre boutique !

Cependant, ne serait-il pas agréable d'avoir certaines de ces sections de contenu dynamique disponibles ailleurs ? Avez-vous déjà voulu ajouter une bannière de héros ou un produit vedette à une page de contenu standard ?

Avant de commencer, je vous recommande de configurer un environnement de développement local pour éditer vos fichiers de thème. L'utilisation de Theme Kit vous permet d'éditer directement sur votre ordinateur local à l'aide de votre éditeur de code préféré. Ceci est facultatif, mais facilite grandement l'écriture et la gestion du code.

Les marches

Passons en revue les étapes sur la façon de faire exactement cela! Pour les besoins de ce didacticiel, nous supposerons que vous ajouterez une bannière de héros à une page appelée À propos .

Fichiers de thème

1. Pour la section Hero que vous souhaitez ajouter, recherchez le fichier existant sous [your-site-name]/sections/hero.liquid . Faites une copie pour chaque page dont vous voulez une instance. Dans notre cas, un pour la page À propos : hero-about.liquid .
2. Pour la page dans laquelle vous souhaitez utiliser la section Hero, créez un nouveau modèle de page . Recherchez [your-site-name]/templates/page.liquid et faites-en une copie : page.about.liquid .
3. Dans page.about.liquid , ajoutez le code Liquid pour inclure votre nouvelle section Hero : {% section 'hero-about' %} .

Administrateur Shopify

1. Dans Shopify Admin, accédez à Boutique en ligne > Pages et modifiez votre page À propos.
2. Sous la section Modèle , utilisez le menu déroulant pour sélectionner votre nouveau modèle. Il devrait être disponible sous la page.about .
3. Revenez à la boutique en ligne et activez le lien Personnaliser pour votre thème actuel.
4. Utilisez le sélecteur de page en haut à gauche pour trouver la page À propos.
5. La nouvelle section devrait être disponible pour modification dans la barre latérale de l'éditeur .

Et voila! Votre page devrait maintenant comporter une instance unique de la section de bannière Hero que vous avez ajoutée au modèle de page À propos. Bon travail! 🙌

Postuler ailleurs

Les mêmes étapes de base peuvent également être appliquées pour ajouter une section de contenu dynamique à n'importe quel modèle disponible dans votre thème. Il s'agirait de faire une copie du fichier Section ( hero-[template-name].liquid ) et d'inclure le code Section dans le Template où la section doit être sortie ( {% section 'hero-[template-name]' %} -name].liquid ) {% section 'hero-[template-name]' %} ).

Assurez-vous de ne pas inclure une section dans une autre section, car cela entraînerait la sortie d'une erreur sur votre site.

Ce tutoriel vous a-t-il aidé ? Manquait-il des étapes ? Vous avez un joli thème Shopify à montrer ? Faites-moi savoir dans les commentaires!

Bon piratage ! 💻😄💖