Comment créer un thème sous Magento ?

Tout ce qu’il faut savoir pour créer un thème sous Magento.

Vous avez choisi le CMS Magento pour créer votre boutique en ligne, découvrez tous nos conseils pour créer un thème sous Magento.

Les étapes préalables à la création d’un thème sous Magento

Pour débuter la création d’un thème sous Magento, il est nécessaire d’ouvrir les dossiers suivants dans le répertoire racine de Magento :

  • Dossier 1 : app/design/frontend/default/default/ - Ce dossier contient les Layout, les traductions (locale) et les Templates.
  • Dossier 2 : skin/frontend/default/default/ - Ce dossier contient les images, Fichiers CSS et JavaScripts.

Ces deux dossiers seront toujours indispensables lorsqu’il s’agit de travailler avec les thèmes sous Magento.
Les noms de dossier « default/default » indique le nom du thème sur lequel vous êtes en train de travailler. Par exemple, si vous souhaiter travailler sur un thème nommé « collection_hiver », vous devez ouvrir le dossier app/design/frontend/collection_hiver/.

Comment créer un nouveau thème par défaut ?

Pour créer un thème par défaut, il est nécessaire, dans un premier temps, de copier un thème par défaut existant qui servira de base pour votre nouveau thème.

Vous devez ainsi créer une copie de app/design/frontend/default/default/ et le renommer comme vous le voulez, par exemple : app/design/frontend/collection_hiver/.

Pour renommer le dossier, il est indispensable d’utiliser des caractères alphanumériques et commencer par une lettre de l’alphabet ; « 2014_hiver » n’est pas correct, utilisez plutôt « collection_hiver ». Cette opération doit être répétée avec le deuxième dossier skin/frontend/default/default/.

Après avoir effectué cela, votre nouveau thème est créé. Il ne vous reste plus qu’à assigner ce thème à votre boutique en ligne. Il est également possible de modifier les templates d’affichage et les fichiers CSS et JavaScript.

Comment créer un nouveau thème qui n’est pas par défaut ?

Si vous décidez de créer un nouveau thème qui n’est pas par défaut, il est inutile de copier les dossiers contenus dans le thème par défaut.

Une règle doit néanmoins rester dans votre esprit. Il est indispensable de conserver la structure conventionnelle de Magento concernant l’organisation de vos sous-dossiers.

A titre d’exemple, si votre nouveau thème qui n’est pas par défaut contient uniquement le fichier template ‘home.phtml’ du module de catalogue, dans app/design/frontend/your_interface/your_non_default_theme/, vous aurez besoin de créer les dossiers ‘template/catalog’ dans lequels il conviendra de sauvegarder le fichier de template. 

créer un thème magento

Comment assigner une interface et un thème à une boutique ?

Après avoir créé un thème par défaut ou non, il est nécessaire de l’assigner à votre site. Rendez-vous dans le panneau d’administration de Magento -  onglet (Système ? Configuration ? Général ? Habillage). 

configuration d'un thème magento

En haut à gauche, vous pouvez apercevoir un encart appelé « Portée de la configuration courante ».

Si vous souhaitez gérer le design de votre boutique en ligne au niveau de votre site web, sélectionnez le nom de votre site dans la liste déroulante.

Si vous souhaitez gérer le design de votre boutique au niveau de la boutique, sélectionnez le nom de votre boutique dans la liste déroulante.

Après avoir effectué cette sélection, vous devez :

  • Entrer le nom de l’interface dans laquelle se situe votre nouveau thème depuis l’onglet « Habillage » dans « Nom de l’interface »
  • Entrer le nom du nouveau thème que vous souhaitez charger par défaut dans la rubrique « Thèmes » onglet par défaut.
  • Sauvegarder la configuration et recharger votre boutique.

 

Vous créez une boutique en ligne ou souhaitez changer le thème de votre e-commerce, rendez-vous sur themeforest. Un large choix de thèmes originaux, responsives et vendeurs pour votre e-commerce sont à votre disposition.

A lire également

Poster un commentaire

Suivez-nous !

Obtenez un devis

Vous souhaitez un devis pour :

Nom*

Email*

Téléphone

Newsletter

Partenaires

Partenaire

En poursuivant votre navigation, vous acceptez l'utilisation des cookies pour disposer de services et d'offres adaptés à vos centres d'intérêts. Pour en savoir plus, cliquez ici.

x