Aller au contenu

Articles correspondants à ‘son’

24
Aug

Créer son propre thème prestashop

J’ai remarqué que beaucoup de personnes cherchent à créer leur propre thème pour leur boutique prestashop, plutôt bonne initiative,  car utiliser le thème par défaut est une très mauvaise idée et de plus anti-vente.

Avant de vous expliquer la marche à suivre, voici les pré-requis pour créer son propre thème:

  1. Connaître le language HTML
  2. Bien connaître le language CSS
  3. Avoir de bonnes notions en graphisme et notamment photoshop pour un design travaillé

Je vous déconseille d’essayer de créer un thème prestashop si vous ne possédez pas ces pré-requis, au risque de vous essouffler très vite. Vous pouvez toujours acheter un thème tout fait à votre image en cherchant un peu sur le net.

1 / Architecture d’un thème prestashop

Un thème prestashop est composé d’un dossier portant le nom de votre thème présent dans le dossier “themes” situé lui-même à la racine du site.

Voyant maintenant les composants de votre dossier thème.

dossier prestashop css
Contient tout les fichiers CSS
dossier prestashop img
Contient tout les images
- dossier prestashop js
Contient tout les fichiers javascript
- dossier prestashop lang
Contient toutes les traductions du texte présent dans les fichiers tpl
-Un paquet de fichier “tpl
Ces fichiers correspondent aux templates des pages de votre site, ils contiennent du code html et smarty. Si vous ne connaissez pas encore smarty, lisez d’abord cet article.

2 / Création du thème

Pour créer un thème, il est préférable de partir du thème par défaut que vous modifierez pour créer votre propre thème.

Pour cela, dupliquez le dossier thème “prestashop” et donnez lui un autre nom.

firebugJe vous conseille un outil très pratique et qui vous aidera lors de la création et de l’intégration : Firebug

Personnellement, je dessine dans un premier temps l’intégralité du site sous photoshop, il suffit ensuite d’intégrer le design dans le thème de prestashop.
Si vous n’avez pas prévu d’utiliser photoshop, vous ne ferez surement pas de grosses modifications graphiques (intégration d’images ect..).

Pour modifier le thème par défaut et ainsi créer votre propre thème, vous allez modifier principalement les fichiers :

/themes/montheme/css/global.css
/themes/montheme/xxx.tpl (tout les fichiers tpl)

Si votre design est basique, vous n’aurez peut-être même pas besoin de modifier les fichiers tpl.

notepadNotepad++ est un éditeur très simple et agréable, parfait pour éditer du CSS.

Placez toutes vos images dans le dossier “img”.
Placez toutes vos javascripts dans le dossier “js”.

C’est maintenant à vous de jouer et de plonger les mains dans le monde du CSS !

Vous pouvez également acheter un thème à des prix très attractifs ! Cela vous fera gagner beaucoup de temps.