Guide du designer

Le thme par dfaut de PrestaShop est neutre, avec des variations de

gris, ce qui permet aux vendeurs rapidement se lancer, quel que soit leur
secteur d'activit.

Plus de 700 thmes sont disponibles par le biais de la place de march

PrestaShop Addons. Ils ont t crs soit par l'quipe de PrestaShop, soit
par la communaut, et sont vendus des prix raisonnables parfois
mme gratuitement.

En tant que designer, vous pouvez vous aussi mettre vos thmes en vente
sur PrestaShop Addons, et toucher 70% du prix de la vente.

N'importe qui disposant de connaissance en CSS et en manipulation

d'images peut crer un thme personnalis pour PrestaShop. Pour peu
que vous vous y connaissiez galement en PHP/Smarty, vous pouvez
construire un tout nouveau thme pour votre boutique. Grce un
systme ouvert qui a fait ses preuves, n'importe quelle boutique peut
disposer d'un thme correspondant ses besoins.

Conseils de design
Penser en amont

Avant mme d'oubrir Photoshop, GIMP ou tout autre diteur graphique,

vous devriez simplement vous assoir avec une feuille et un crayon, et
rflchir l'arborescence de votre boutique, afin de la rendre aussi flexible
que possible. Par exemple, toutes les boutiques n'ont pas le mme
nombre de catgories, ou de produits par catgorie.

Un thme complte de PrestaShop requiert au moins 30 pages ou sections

de page :

Accueil
Page de catgorie
Page de produit
Page de comparaison de produit
Page de rsultat de recherche
Page "Mon compte" et toutes ses sous-pages :
o Mes rductions
o Mon historique de commandes
o Mes informations personnelles
o Mon panier
Page de connexion
Page de cration de compte
 Page de commande :
o Liste d'adresses
o Cot d'expdition
o Choix du paiement (chque, transfert...)
o Page unique de commande
Cration d'adresse
Page de livraison
Page de maintenance
Liste des fabricants et page de fabricant
Liste des fournisseurs et page de fournisseur
Page d'erreur 404 (page introuvable)
Page "Meilleures ventes"
Page "Nouveaux produits"
Page "Promotions actuelles"
Page "Mot de passe oubli"
Informations lgales
Carte du site
Page des magasins
Formulaire de contact

Faites bien en sorte de prendre toutes ces pages en compte, afin de n'en
oublier aucune, dans le cas contraire, vous pourriez obtenir un thme
incomplet, et donc une mauvaise exprience utilisateur.
Pour avoir une meilleure ide des pages prendre en compte, plongez-
vous dans le thme par dfaut, afin d'en dissquer le code.

Une fois que vous matrisez votre arborescence, faites quelques croquis
pour linterface, afin d'avoir une premire ide de la position des divers
lments : nouveaux produits, promotions, images, texte, etc.). Par
ailleurs, incluez les dtails importants, tels que les diverses mentions sur
la page du produit : en solde, promotion, nouveau produit, prix barr...).

Bien entendu, ce ne sont l que des conseils d'ordre gnral ; certains

professionnels prfreront travailler directement dans Photoshop, puis
passer au code PHP, HTML et CSS.

Recommandations techniques

Afin de vous assurer que vous pourrez facilement partager votre cration
avec d'autres (designer, intgrateurs, clients), nous vous conseillons
d'enregistrer votre fichier sous forme de fichier Photoshop (RGB, 72 dpi,
non aplati).

Vous devriez travailler au format 980px de large.

Agencement des calques

Vous pouvez utiliser plusieurs mthodes, selon vos prfrences :

 un dossier pour tous les calques de textes, afin que les intgrateurs
puissent facilement accder au design lui-mme ;
un dosser pour chaque bloc de design (nouveaux produits,
meilleures vente, etc.)

Couleurs

N'utilisez pas le rglage CMYK, qui n'est adapt qu' l'imprimerie. Utilisez
toujours le rglage RGB.

Polices

N'utilisez pas de police atypique ! Faites en sorte que tout reste bien lisible
!

Le texte standard (titre, sous-titre, texte normal) devrait tre limit aux
polices suivants, afin de vous assurez que les visiteurs voient tous la
mme chose :

Arial
Verdana
Helvetica
Georgia
Tahoma
Times News Roman

Utilisez le strict minimum de police : trop de polices diffrentes ne peut

que rendre votre design plus confus.

Units

Quand vous crez pour le Web, l'unit de base est le pixel. Ne faites pas
vos mesures en picas, points ou centimtres.

Taille de texte

Gardez toujours en tte que l'utilisateur choisi la taille finale du texte,

tant donn que les navigateurs modernes peuvent l'augmenter ou la
rduire au besoin. En fait, vous devriez tester votre site avec diffrentes
variations dans les rglages de votre navigateur, afin de voir si votre
design est solide... et donc de voir ce qu'il vous faut retravailler pour
viter qu'il soit facilement cass.

Cela tant, vous pouvez prendre ces mesures comme base :

10 12px pour le texte normal

14px pour les sous-titres
18px pour les titres.
Transparence

Les images transparentes ne marchent pas bien sur les anciens

navigateurs, en particulier Internet Explorer, donc vitez les images PNG
en 24 bits. Pour ce qui est des images GIF avec transparence, utilisez-les
par-dessus un fond uni pour vous assurer que l'effet fonctionne. De plus,
vitez les pixels semi-transparents en dfinissant une couleur de cache (la
mme que celle du fond).

Autres

Pensez activer toutes les options afin de voir le rendu avec le

thme standard.
Modifiez une fiche produit de voir quelles sont les options possibles
(promotion, nouveauts, etc. ) et leurs impacts sur laffichage en
front-office.
Le style graphique de votre boutique doit tre homogne.

Ergonomie

Sans plonger dans les thories complexes sur les interaction homme-
machine, nous allons ici tenter de faire en sorte que votre boutique
accessible au plus grand nombre de clients possible. Votre but final devrait
tre que vos visiteurs aient suffisamment confiance en votre boutique
pour acheter.

A chaque problme dutilisation, vous perdez la confiance des visiteurs. Si

elle arrive en dessous dun certain niveau, la frustration sinstalle et
linternaute quitte le site. Do limportance de lergonomie dans un site e-
commerce.

Noubliez pas que votre but (en plus de vendre, bien sr) est de montrer
aux visiteurs que derrire le site e-commerce que vous faites, il se cache
des personnes srieuses et comptentes.

La page d'accueil

Cette page est la plus importante de votre, car c'est ici que tout se joue.
C'est ici que le visiteur va se faire une opinion de votre boutique, et qu'il
va dcider s'il peut faire confiance votre site et vous donner son numro
de carte bleue.

Vous devez faire en sorte d'avoir un style gnral distinct, facilement

reconnaissable, et d'avoir votre catalogue visible ds la premire page.

L'en-tte du site vous permet de placer les lments les plus

reprsentatifs : logo, nom, image de fond unique... Il doit faire au
maximum 250 pixels de hauteur, afin que les visiteurs puissent au moins
jeter un coup d'oeil votre catalogue sans avoir scroller. En d'autres
termes, l'utilisateur ne devrait jamais avoir a scroller pour voir vos
premiers produits.

Laspect visuel est trs important (do la phase de Rflexion en amont)

vous devez trouver un moyen lgant de mettre en avant vos produits
sans pour autant surcharger votre page. De plus vous devez utiliser des
couleurs et graphisme homognes entre les pages. Par exemple, si vous
utilisez un effet sur les boutons d'une page, pensez rutiliser les mme
effets sur toutes les pages de votre site.

Le moteur de recherche doit tre facile trouver. En tant que visiteur, il

arrive souvent que lon sait ce quon vient chercher aussi il est important
que lon distingue du premier coup d'oeil cet outil.

Lors de la cration de votre site pensez aussi la navigation dans les

catgories, elle doit tre simple et intuitive.

Afin de renforcer la confiance des visiteurs pensez mettre en avant vos

partenaires (banques, transporteurs) et votre classement FIA-NET.

Si vous avez un contact tlphonique ou un tchat en ligne, nhsitez pas

le mettre en avant. Cela montrera votre proximit avec le client et cest ce
que fera la diffrence.
Bien entendu, n'utilisez pas votre numro de tlphone personnel : ils
doivent sentir qu'ils contactent une quipe de support, pas qu'ils vous
drangent tandis que vous cuisinez.

Affichez clairement les conditions de retour de la marchandise, les C.G.V,

et autres textes de loi.

La page produit

Si votre visiteur est sur cette page cest quil est intress par votre
produit et quil souhaite des dtails. Il vous faut donc lui en fournir un
maximum.

Mettez en avant le bouton ajouter au panier. Il doit tre bien visible et se

distinguer du reste de la page de part sa couleur ou sa taille mais tout
en restant homogne avec le reste du design : si le bouton se dtache
trop, le visiteur pourrait ne pas le voir, de la mme manire que de
nombreuses personnes ont appris ne pas voir les publicits sur Internet.

Mettez en avant aussi les tiquettes relies ces produits (nouveauts,

promotions, coupon de rduction, etc. ) et affichez clairement les dlais
de livraison !
Le tunnel de conversion (Mon compte et ses pages intrieures)

Le "tunnel de transformation" (en anglais, "conversion funnel", c'est dire

"entonnoir de conversion", ce qui est plus proche de la ralit) correspond
aux pages o vous transformerez vos visiteurs en clients (do le terme
"transformation" ou "conversion"). Si ces pages sont mal structures, cela
peut vous faire perdre plusieurs clients potentiels, et donc les commandes
qu'ils auraient pu passer.

Cration de compte / "Mon compte"

Le thme par dfaut de PrestaShop dispose d'un formulaire apportant un

trs bon taux de transformation. Mais suivant votre site, il ne sera pas
forcment adapt vos besoins. Voici donc quelques conseils suivre si le
formulaire de base ne vous convient pas :

Ne laissez que lessentiel. Le visiteur doit se concentrer sur la

cration de son compte et lacte dachat. Inspirez-vous des
formulaires d'Amazon et de la Fnac.
Rduisez au maximum le nombre d'tapes. Le visiteur doit savoir
combien d'tapes il lui reste a parcourir avant la finalisation de son
achat.
Affichez clairement toutes les erreurs que l'utilisateur fait, juste
ct du champs du formulaire. Les erreurs devraient tre affiches
avec une couleur distincte (le rouge a fait ses preuves), et les
champs requis doivent tre clairement indiqus (avec une astrisque
*, par exemple).

Dernire chose : le bouton validation se situe toujours la droite du

bouton annuler.

Le paiement

Le visiteur a cr son compte client, flicitations ! Mais tout n'est pas

gagn, il doit encore passer l'tape de l'acte d'achat.

L encore, mme chose que le formulaire de cration de compte :

Rduisez au maximum le nombre dtapes. (adresse de livraison,

paiement)
Affichez clairement les erreurs et indiquez les champs obligatoires.
Page de paiement :
o Pour un paiement par CB, avertir le visiteur qu'il passe sur le
site scuris de votre banque. Par exemple, utilisez une icne
"cadenas" avec une petit texte explicatif.
o Si le paiement est par chque (ou autre que paiement en
ligne), indiquez clairement la marche suivre (adresse,
montant, )
Aprs cette tape cruciale votre visiteur est prsent un de vos clients.
Bravo !

Ces conseils en ergonomie pour votre site e-commerce ne sont pas

exhaustifs, mais constituent une base de travail pour amliorer lutilisation
de votre site e-commerce.

Crer un thme
Le systme de thme de PrestaShop est bas sur un moteur de
modle/template, appel Smarty, qui permet aux web-designers et
dveloppeurs de crer facilement leur propre thme, avec peu de
connaissances techniques.

Tous les designers et dveloppeurs web devraient utiliser les outils

suivants :

Firefox: Firebug est une extension gratuite permettant de

facilement comparer et dbuguer du CSS et son rsultat.
Firefox/Chrome: Web Developer ajoute de nombreux outils pour
dveloppeurs, directement dans le navigateur.
Safari/Chrome: activer le Web Inspector.
Opera: Dragonfly, un environnement de dbogage complet.
Internet Explorer 8+: les Developer Tools sont disponible depuis
le menu Outils.

Les utilisateurs d'Internet Explorer peuvent galement utiliser Firebug

lite.

Concepts et informations techniques

Comment fonctionne un thme PrestaShop

Un thme PrestaShop est un ensemble de fichiers que vous pouvez

modifier afin de personnaliser la mise en page de votre boutique.

Voici quelques points importants :

Tous les thmes ont leurs fichiers dans le dossier racine /themes.
Chaque thme dispose de son propre sous-dossier, dans le thme
racine.
Chaque thme est fait de fichiers modles (.tpl), d'images (.gif),
.jpg, .png), d'un ou plusieurs fichiers CSS .css, et parfois mme de
fichiers JavaScript(.js).
Chaque thme a un fichier preview.jpg dans son dossier racine,
permettant au propritaire du site d'avoir un aperu du thme
 directement depuis le back-office, et donc de choisir son thme en
connaissance de cause.

Voici un aperu de l'arborescence de fichiers d'un thme PrestaShop (ici,

le thme par dfaut) :

Le dossier /css contient tous les fichiers CSS.

Le dossier /img contient toutes les images.
Le dossier /js contient tous les fichiers JavaScript.
Le dossier /lang contient toutes les traductions du thme. Ses droits
d'accs devraient tre CHMOD 666 (par exemple), afin que l'outil
de traduction puisse y avoir accs.
La racine du dossier contient seulement les fichiers TPL (Smarty),
ainsi que le fichier preview.jpg.

Les dossiers /css, /img et /js sont facultatifs, un thme peut

parfaitement fonctionner sans, il vous revient de les crer selon vos
besoins.

Grer les traductions

Toutes les chanes de vos thmes doivent tre comprises dans une
fonction Smart, comme suit :

{l s='My Text'}

Cela permettra n'importe qui de traduire le thme dans sa langue

propre, l'aide de l'outil interne de traduction, que vous pouvez trouver
dans la back-office de PrestAshop, sous l'onglet "Outils" et son sous-
onglet "Traduction". Dans la section "Modifier les traductions", utilisez le
menu droulant, choisissez "Traduction front-office", puis cliquez sur le
drapeau de la langue dans laquelle vous voulez traduire les chanes.
Toutes les chanes du front-office s'affichent alors.

h3 Transmettre des informations (donnes) un thme PrestaShop

Le schma suivant explique comment les donnes sont transmises depuis

le coeur de PrestaShop jusqu' son thme. A l'aide de la mthode l(), le
thme peut afficher le texte dans la langue, si la chane a t traduite
auparavant

Best practices

Voici une liste non exhaustive de bonnes pratiques respecter :

1. Ne mlangez jamais du code XHTML et du code PHP.

2. Ne mlangez jamais du code XHTML et du code CSS, placez le code
dans un fichier .css part.
3. N'effectuez jamais de requte SQL dans un contrleur PHP (fichiers
.php la racine de PrestaShop), privilgiez l'utilisation des mthodes
existantes dans les classes PHP et/ou crez de nouvelles mthodes
dans ces classes.
4. Validez votre code XHTML et votre code CSS grce aux validateurs
du W3C : XHTML validator, CSS validator.
5. Vrifiez toujours si une mthode n'existe pas dj dans les classes.
6. Ne modifiez pas les fichiers du cur de PrestaShop, dveloppez un
maximum sous forme de modules afin de faciliter les mises jour.
 7. Respectez les normes de codes pour un code lisible et clair,
facilement maintenable.
8. Commentez votre code, en anglais.
9. Lorsque vous effectuez des corrections, mettez la boutique en
maintenance via le back-office de PrestaShop.
10. Utilisez les navigateurs Firefox, Google Chrome ou Opera, et
incitez les gens autour de vous en faire autant.
11. Autant que possible, utilisez des CSS sprites (article suivant).
12. Si vous souhaitez remercier l'quipe de PrestaShop pour son
dur labeur, n'hsitez pas faire un donc, ou en parler autour de
vous !

Schma SQL

Vous pouvez tlcharger le schma de PrestaShop 1.4 au format PNG, ou

au format original (vous devrez tlcharger MySQL Workbench pour le
lire).

Personnaliser le thme par dfaut

Suivez les tapes ci-dessous pour crer votre propre thme partir du
thme par dfaut.

1. Copier le thme par dfaut

1. Trouvez le dossier /themes dans votre installation de PrestaShop, et

crer une copie du dossier ../themes/prestashop/ par dfaut.
2. Renommez cette copie.
2. Modifier la feuille CSS

Dans le dossier du thme renomm (par exemple,

/themes/MyStoreTheme/), trouvez le dossier /css.
Ouvrez le fichier global.csss et modifiez-le selon vos besoins. Vous
n'tes limit que par votre propre crativit et votre connaissance
de CSS.
_A noter : les fichiers maintenance.css, situ dans le mme dossier,
contrle la mise en page de la page du Mode Maintenance.
Les images ajoutes ou modifies doivent tre places dans le
dossier /img du nouveau thme (par exemple,
/themes/MyStoreTheme/img).

Conseils de l'quipe de PrestaShop

Autant que possible, utilisez des CSS plutt que du HTML (par
exemple, n'utilisez des tableaux que pour les donnes tabulaires,
pas pour la mise en page).
Validez votre code HTML et CSS avec les outils du W3C : HTML
validator, CSS validator.
Rduisez la taille de vos images en les compressant. L'outil
SmushIt de Yahoo! vous sera pour cela trs utile.
Testez votre thme sur de nombreux navigateurs, pas seulement
Internet Explorer. Mozilla Firefox, les navigateurs WebKit (Apple
Safari, Google Chrome) et Opera sont tous prendre en compte.
Mais avant tout, vous devez vrifier que tout fonctionne bien sur
les navigateurs les plus utiliss par vos visiteurs. Si votre site n'a
pas encore t lance, regardez les statistiques de StatCounter
pour votre pays ; par exemple, voici les statistiques pour la
France, de 2010 2011.
Les noms de fichiers doivent tre en minuscule.
Les textes et le logo de la page d'accueil peuvent tre modifier
directement depuis le back-office : onglet "Modules", sous-onglet
"Thmes".-tab.
3. Crer une image de prvisualisation

Une fois que vous avez personnalis votre thme, vous devez placer un
fichier reprsentant le thme, appel preview.jpg, dans le thme la
racine (par exemple /themes/MyStoreTheme. Ce fichier doit tre une image
.jpg en 100*100 pixels.

4. Testez votre thme

1. Allez dans l'onglet "Prfrences" du back-office son sous-onglet

"Apparences" et sa section "Thmes" (en bas de page)
2. Choisissez le nouveau thme et cliquez sur enregistrer.

Partagez vos thmes !

Prsentez votre dur labeur, recevez des commentaires et consolidez votre

rputation en partageant votre thme dans la section thme de notre
Forum !

Vous pouvez galement vendre votre thme aux utilisateurs de

PrestaShop au travers du site Addons

Crez votre propre thme

Le thme par dfaut de PrestaShop

Le thme par dfaut a t cr dans un style neutre, et peut ainsi servir

pour n'importe quel type de boutique, quel que soit son secteur d'activit.
De plus, ce thme fait de son mieux pour se conformer aux standards du
Web tels qu'tablis par le W3C, et a t optimis pour s'afficher
parfaitement dans tous les les principaux navigateurs.

Ceci tant, vous pourriez vouloir un thme qui vous ressemble plus ou
intgre mieux l'esprit de votre activit, plutt que d'avoir le mme thme
que des millliers d'autres boutiques. C'est pour ce type de besoin que vous
pouvez concevoir votre propre thme et la manire la plus rapide est
d'utiliser le thme par dfaut comme fondation solide au-dessus de
laquelle faire jouer votre inspiration.

Les premiers pas de votre propre thme

Tous les thmes actuellement installs se trouvent dans le dossier /themes,

o le vtre propre se trouvera galement bientt. Le thme par dfaut est
situ dans le sous-dossier /themes/prestashop. C'est partir de ce dossier
que vous construirez votre propre thme.

Cela tant, nous vous engageons fortement ne pas modifier

directement les fichiers du thme, pour la simple raison que cela pourrait
introduire de nouveaux bugs, sans pouvoir revenir en arrire. Vous devez
conserver le thme par dfaut intact, afin de pouvoir le remettre en place
si vous dcouvrez un problme dans votre propre thme.

La premire tape consiste donc faire une copie du sous-dossier

/prestashop, et donner une nom unique cette copie, par exemple le nom
de votre futur thme ou de votre site. Ainsi, le thme par dfaut reste
intact.

Arborescence des fichiers d'un thme

Lorsque vous crez un thme, vous devenez connatre ds le dbut toutes

les diffrentes pages et indications que votre thme doit grer
correctement, afin de proposer une exprience complte vos
utilisateurs. Ici encore, le thme par dfaut est une bonne base
d'inspiration, la fois par la varit de fichiers qu'il comprend et de
comportement pour lesquels il a t conus, mais galement pour son
code, dans lequel vous pouvez vous plonger afin de mieux comprendre
comment un thme fonctionne.

Fichier ou
Description
dossier
Image utilise en tant qu'aperu dans la section
"Thme" du sous-onglet "Apparence" de l'onglet
"Prfrences". La prsence de cette image est
preview.jpg
obligatoire, sinon le thme ne peut tre slectionn.
De toute vidence, l'image devrait donner une image
de l'aspect du thme, et non afficher le logo du
 designer ou son nom...
Page affiche lorsque la page demande n'est pas
404.tpl
trouve (erreur 404).
address.tpl Page d'ajout ou de modification d'une adresse client.
addresses.tpl Page listant les adresses d'un client.
authentication.tpl Page d'identification et de cration de compte.
best-sales.tpl Page listant les meilleures ventes.
breadcrumb.tpl Chemin de navigation (fil d'Ariane).
category.tpl Page listant les produits au sein d'une catgorie.
category-tree-
Utilis uniquement pour le bloc Catgories.
branch.tpl
category-cms-tree-
...
branch.tpl
Pages informatives (onglet "Outil" > "CMS" du back-
cms.tpl
office).
contact-form.tpl Page du formulaire de contact.
discount.tpl Page listant les bons de rduction d'un client.
Est appel par l'ensemble de s pages. Affiche les
errors.tpl
erreurs.
footer.tpl Pied de page.
Used when a visitor has no know account on the site,
guest-tracking.tpl but wants his order to be tracked and therefore
needs to create an account or log in.
header.tpl En-tte de page.
history.tpl Page listant les commandes d'un client.
Page de modification des informations personnelles
identity.tpl
d'un client.
Blank file, prevents visitors to view the content of the
index.php
folder.
index.tpl Page d'accueil.
maintenance.tpl Page de mise en maintenance du site.
manufacturer.tpl Page listant les fabricants.
manufacturer-
Page listant les produits d'un fabricant.
list.tpl
my-account.tpl Page d'accueil du compte d'un client.
new-products.tpl Page listant les produits dernirement ajouts.
Page du processus de commande : tape 1 choix
order-address.tpl
des adresses (livraison, facturation).
Page du processus de commande : tape 2 choix du
order-carrier.tpl
mode de livraison.
order-
Page de confirmation de commande (aprs paiement).
confirmation.tpl
order-detail.tpl Page de dtail d'une commande d'un client.
order-follow.tpl Page de demande d'un retour produit pour un client.
order-opc.tpl ...
order-opc-new-
...
account.tpl
Page du processus de commande : tape 3 choix du
order-payment.tpl
mode de paiement.
order-return.tpl Page de dtail d'un retour d'un client.
order-slip.tpl Page listant les avoirs d'un client.
order-steps.tpl Barre d'volution du processus de commande.
Est appel par l'ensemble de s pages listant des
pagination.tpl produits. Boutons permettant de changer de page
dans une liste de produits.
password.tpl Page de changement de mot de passe d'un client.
prices-drop.tpl Page listant les promotions.
product.tpl Page de dtail d'un produit.
Est appel par l'ensemble des pages listant des
product-list.tpl
produits. Liste des produit.
Est appel par l'ensemble des pages listant des
product-sort.tpl produits. Menu permettant de filtrer une liste de
produits.
products-
...
comparison.tpl
Page de dtail d'une scne au sein d'une catgorie de
scenes.tpl
produits.
search.tpl Page listant les rsultats d'une recherche.
shopping-cart.tpl Page listant les produits dans le panier d'un client.
shopping-cart-
Page de dtail d'une ligne du panier.
product-line.tpl
sitemap.tpl Page de plan du site.
store_infos.tpl ...
stores.tpl ...
supplier.tpl Page listant les produits d'un fournisseur.
supplier-list.tpl Page listant les fournisseurs.
thickbox.tpl Page de zoom d'une photo d'un produit.
/cache ...
Contient les feuilles de style du thme. Le fichier
global.css concerne la mise en forme de la majeure
/css
partie du site. A moins d'tre un utilisateur averti, il
est conseill de laisser les fichiers d'origine.
Contient les images du thme. Remplacez les images
/img
adquates par vos crations personnelles. A moins
 que vous ne soyez un utilisateur averti, il est conseill
de laisser les fichiers d'origine.
Scripts JavaScript utiliss dans le thme. A moins que
/js vous ne soyez un utilisateur averti, il est conseill de
laisser les fichiers d'origine.
Fichiers de traduction. Ces fichiers sont gnrs par le
back-office et leur contenu doit tre modifi depuis
/lang
l'outil de traduction : onglet Outils, sous-onglet
"Traductions", section Modifier les traductions.

Quelques conseils

Firebug, Dragonyfly et autres : vous pouvez grandement simplifier votre

travail en tant que dveloppeur front-end en utilisant les bons outils,
pourvu que vous testiez votre cration dans un navigateur moderne
disposant de tels outils, sous la forme de module (FireBug pour Firefox) ou
directement intgr au navigateur (Dragonfly pour Opera, le Web
Inspector de Chrome & Webkit).

JavaScript: tous les fichiers JavaScript doivent tre placs dans le

dossier /js du thme.

Fichier preview.jpg : une fois que votre mise en page est termine, vous
pouvez crer le fichier de prvisualisation. Faites une capture d'cran et
rduisez-la 180 pixels de large afin d'en faire l'image preview.jpg par
dfaut. Vous pouvez utiliser l'outil de capture fourni par votre systme
d'exploitation (sous Windows, Outil Capture ; sous OS X, combinaison de
touches Cmd+Shift+4), ou installer une extension pour votre navigateur,
telle que FireShot ou Screengrab pour Firefoxtps://addons.mozilla.org/en-
US/firefox/addon/screengrab/].

Intgration : o vont les points d'accroche et les modules

L'un des aspects principaux de l'intgration de contenu dans PrestaShop

consiste savoir o le contenu sera affich, et donc o sont situs les
diffrents points d'accroche et modules.

Voici une reprsentation graphique de leurs emplacement, pour chaque

page. Vous y trouverez :

Le nom du bloc ;
L'identifiant du blog, afin de le cibler en CSS ;
Le dossier du bloc ou son fichier de modle, si vous souhaitez le
modifier.
Points d'accroche

Zone principale de contenu

Modules

Section en-tte
Blocs de la page d'accueil

Colonne centrale de catgorie

Fiche produit

Formulaire de cration de compte et tapes de commande

Formulaire de cration de compte
Bloc de commande

Adresses
Conditions lgales et choix du transporteur

Choix du module de paiement

Plan du site
Formulaire de contact
Page des boutiques