Aller au contenu

October 15, 2013

1

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.



Publié par
Plus d'articles pour la catégorie Tutoriels
8 Commentaires Poster un commentaire
  1. Djo
    May 3 2012

    Bonjour,
    Merci pour l’explication, SVP, lorsque j’utilise un autre thème comment je bascule l’affichage dans l’URL vers mas propre thème à la place de celle par défaut !
    Merci d’avance !

    Reply
    • Djo
      May 3 2012

      c’est bon, j’ai trouvé la réponse Merci !

      Reply
  2. Aug 1 2012

    Pour gagner du temps au moment de l’intégration, il peut être intéressant de se baser sur un thème gratuit ou payant se rapprochant de ce que vous souhaitez obtenir.

    Merci pour l’article sur le blog.

    Reply
  3. Lilhouh
    Mar 25 2013

    Bonjour,

    Ton nom revient souvent lorsque je cherche de l’aide au sujet de Presta :)
    Petite question .. tu prévois un tuto pour aider à la prise en main de l’override ?
    J’avoue avoir quelques difficultés à travailler sereinement avec ls conseils que j’ai pu glaner …

    Autre question, est-ce que tu sais s’il est possible de désactiver le bouton “add cart” en fonction du code postal du visiteur (si inscrit bien sur) ?
    Je ne parviens pas à trouver la variable qui va bien.

    Désolée de t’embêter .. mais tu à l’art et la manière de bien expliquer les choses et de connaitre le CMS par coeur ..
    Merci par avance

    Reply
    • Mar 25 2013

      Salut,
      Merci pour les compliments, j’ai depuis longtemps le projet d’écrire un tuto sur l’override mais malheureusement j’ai de moins en moins de temps pour m’occuper du blog.

      Pour récupérer le code postal tu peux commencer par récupérer l’identifiant client avec : $cookie->id_customer
      puis utiliser cette fonction par exemple : getFirstCustomerAddressId($id_customer, $active = true)
      ou même tout simplement utiliser la fonction getAddresses($id_lang) sur le customer.

      N’hésites pas si besoin !

      Reply
  4. Apr 23 2013

    Hello,

    Un petit message pour te féliciter Emilien. Tes tutos sont top ! une véritable mine d’infos…bravo à toi et merci de partager ça sur le net.

    Biz

    Reply
  5. Doe
    Jan 26 2014

    Bonjour,

    je découvre prestashop et je suis en fait un peu sidéré par l’énormité de la chose et surtout par l’absence de boutique simplex : 4 à 10 produits max.

    Je cherchais un template basique, je n’en trouve pas :-) A chaque fois c’est l’usine à gaz avec douze mille blocs. Pas possible d’avoir l’affichage des produits, juste et le panier, et le paiement. Il faut toujours avoir tout l’attirail autour. Je pensais trouver une base gratuite : pas de style, juste des blocs en ligne dans une grille et zou on fait une css pour agencer tout ça. Visiblement ça n’existe pas ou je n’ai pas su trouver.

    Un lien vers quelque chose de très simple sans image et avec peu de style?

    Reply

Partagez votre opinion, postez un commentaire.

(requis)
(requis)

Note: Le HTML est autorisé. Votre e-mail (ne sera pas publié).

S'abonner aux commentaires


3 + 9 =