Comment installer (et personnaliser) un thème sur ma boutique PrestaShop ?

PrestaShop regorge de thèmes gratuits et payants pour que vous puissiez trouver celui qui est le plus adapté à vos besoins en termes de design, d’ergonomie ou de fonctionnalités.

Plusieurs raisons peuvent vous pousser à installer un thème PrestaShop : vous démarrez tout juste votre site sur PrestaShop ou vous souhaitez refondre votre site, améliorer ses performances ou encore changer complètement d’identité visuelle. 

L’installation d’un thème PrestaShop doit être prise au sérieux. C’est le thème qui va en partie garantir le bon fonctionnement de votre site. Il y a donc plusieurs étapes à respecter :

Avant d’installer un thème PrestaShop, vous devez commencer par le choisir. PrestaShop dispose d’une large bibliothèque de thèmes pour votre site e-commerce. Pour trouver un thème adapté à vos besoins, commencez par établir une liste des caractéristiques ou fonctionnalités spécifiques que vous recherchez. 

Bien choisir son thème PrestaShop

Pour gagner du temps sur la mise en place, privilégiez des thèmes compatibles avec votre version PrestaShop. En effet, un thème non compatible nécessite des paramétrages supplémentaires pour l’adapter à votre version du CMS. Pensez aussi à vérifier que le thème qui vous intéresse supporte le multilingue et qu’il soit responsive sur les différents supports.

Passer par la pré-production

Il est indispensable de passer par une étape de pré-production pour installer son thème PrestaShop. L’installation du thème peut créer des conflits sur votre site et générer des pannes plus ou moins dommageables. Dans le pire des cas, votre site peut être rendu totalement inaccessible.  

La pré-production, quant à elle, est accessible par les administrateurs du site détenant des accès de connexion. En testant votre nouveau thème sur un environnement de pré-production, vous maintenez votre site de production fonctionnel pour vos utilisateurs, même en cas de panne. Vous pourrez ensuite mettre vos modifications en production, dès qu’elles seront opérationnelles.

Et à ce propos, la solution Parachute prend ici tout son sens : vous pouvez installer votre nouveau thème, tester ses performances, le comparer avec d’autres, faire des ajustements et bien plus encore sans risquer d’endommager la version live de votre boutique. Rappelons que l’un des grands avantages de la solution Parachute est que vous disposez d’un environnement de pré-production fonctionnel immédiatement, sans qu’il soit nécessaire d’y faire de quelconques configurations pour qu’il reflète le comportement de votre site de production. Votre boutique de pré-production est déjà configurée et prête à être utilisée.

Installer un thème PrestaShop

L’installation d’un thème sur une boutique PrestaShop peut être plus ou moins compliquée en fonction, notamment, de la version du CMS. Alors qu’elle s’avère relativement simple sur PrestaShop 1.7 ou 1.6, elle nécessite de passer par un installateur de thème sur PrestaShop 1.5. D’autre part, il est possible que le thème doive être mis en place directement depuis le serveur FTP s’il n’est pas possible de procéder classiquement depuis le back-office de la boutique.

Installer un thème sur PrestaShop 1.7

Pour installer un thème sur PrestaShop 1.7, rien de plus simple. Dans le menu à gauche, rendez-vous dans la section “Apparence” et cliquez sur “Thème et logo”. En haut à droite, cliquez sur le bouton “Ajouter un thème”. Téléchargez votre thème au format ZIP, puis cliquez sur « Ouvrir » et « Enregistrer » pour finaliser l’installation sur votre CMS.

Une fois le thème installé, vous pouvez le retrouver dans votre bibliothèque de thèmes, dans la même section que votre thème actuel. Sélectionnez-le, et cliquez sur “Utiliser ce thème”. Allez sur votre site pour visualiser votre nouveau thème. Vous aurez sûrement besoin de faire quelques ajustements pour un affichage optimal.

Installer un thème sur PrestaShop 1.5 ou inférieur 

Pour les versions 1.5 ou inférieures de PrestaShop, il est nécessaire d’utiliser l’installateur de thème. Il s’agit d’un module que vous pouvez télécharger gratuitement sur PrestaShop. Une fois installé, vous pourrez y importer votre thème au format zip.

Cliquez d’abord sur “Choisir un fichier”, sélectionnez votre thème, cliquez sur “Suivant” puis enfin sur “Terminer”. Lors de cette étape, pensez à installer les modules nécessaires pour faire fonctionner le thème. Vous retrouverez votre nouveau thème depuis votre tableau de bord PrestaShop, dans “Préférences” puis “Thème”.

Installer un thème PrestaShop via le serveur FTP

Comme dit précédemment, certains thèmes nécessiteront une installation directement sur le serveur FTP de votre site. Dans un premier temps, décompressez le thème que vous avez téléchargé au format zip pour récupérer les différents dossiers qui composent le thème. 

Accédez à votre serveur stp et copiez le contenu du dossier “Thème” de votre nouveau thème dans le dossier du même nom sur le serveur. Faites de même pour le dossier “Modules”, s’il existe. Enfin, copiez le fichier config.xml du thème et collez-le dans le dossier config/xml/themes. Renommez-le sous le nom de dossier de votre thème pour que celui-ci puisse ensuite apparaître sur PrestaShop. 

Vous retrouverez votre thème dans votre back office en allant dans le menu “Apparence” et en cliquant sur “Thème et logo” pour un PrestaShop 1.7, ou sur “Préférences” puis “Thème” pour une 1.6. Sélectionnez-le puis cliquez sur “Activer” pour le mettre en place. N’oubliez pas d’activer également les modules présents dans votre thème.

Configurer son thème sur PrestaShop

Une fois l’installation terminée, vous pourrez d’ores et déjà configurer votre thème depuis PrestaShop. Pour cela, rendez-vous sur votre tableau de bord PrestaShop puis accédez à la catégorie “Thème”. Là, vous pourrez changer certains éléments tels que les logos et le favicon.

Personnaliser son thème PrestaShop

Une fois votre thème PrestaShop installé et configuré, la dernière étape consiste à personnaliser son thème. En effet, il est possible que vous ayez besoin de faire des modifications sur votre nouveau thème, pour changer la présentation ou le design de certains contenus du site.

Vous ne pouvez personnaliser que peu d’éléments depuis votre back office PrestaShop. Il sera donc nécessaire de procéder aux modifications du thème directement dans les fichiers CSS, et plus précisément dans le fichier nommé “custom.css”. Notez qu’il faut être prudent sur ce genre de modifications et penser à bien définir les règles de CSS afin de s’y retrouver facilement. 

Il existe d’ailleurs des outils qui permettent de trouver, modifier et déboguer plus facilement certains éléments du site. Firebug par exemple est une extension pour Firefox à partir de laquelle vous pouvez modifier et tester directement le contenu CSS, HTML, DOM ou encore JavaScript d’une page web. Vous pourrez ensuite récupérer ces modifications pour les intégrer à votre site à partir du serveur FTP.

Depuis la version 1.7 de PrestaShop, il est possible de créer un thème “enfant” à partir du thème choisi. Cela vous permet, entre autres, de procéder à davantage de personnalisations, sans pour autant modifier les éléments d’origine présents dans le thème “parent”. Ces modifications peuvent être faites dans les fichiers TPL, qui contiennent toutes les fonctions de base de votre PrestaShop.

Pour conclure, l’installation d’un thème sur votre boutique PrestaShop ne se fait pas de manière anodine. Elle peut être réalisée simplement mais uniquement si l’on dispose d’une certaine organisation. Pour être serein, le plus important est de faire d’abord cette installation et tous ses ajustements sur un environnement de pré-production. Même si cela vous paraît inutile de prime abord, vous n’êtes pas à l’abri d’un dysfonctionnement et cela serait vraiment dommageable pour votre e-commerce.

Avec Parachute, vous disposez d’un environnement totalement identique à votre boutique, sur lequel vous pouvez observer les effets d’un nouveau thème, sans mettre en péril votre version de production. Une fois votre choix de thème, son installation et ses ajustements validés en pré-production, il suffit de les publier sur votre version en production. Rien de plus simple !