Mode d'emploi | Prestashop 1.4 Manuel utilisateur

Guide du designer
Le thème par défaut 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 thèmes sont disponibles par le biais de la place de marché
PrestaShop Addons. Ils ont été créés soit par l'équipe de PrestaShop, soit
par la communauté, et sont vendus à des prix raisonnables – parfois
même gratuitement.
En tant que designer, vous pouvez vous aussi mettre vos thèmes 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 créer un thème personnalisé pour PrestaShop. Pour peu
que vous vous y connaissiez également en PHP/Smarty, vous pouvez
construire un tout nouveau thème pour votre boutique. Grâce à un
système ouvert qui a fait ses preuves, n'importe quelle boutique peut
disposer d'un thème correspondant à ses besoins.
Conseils de design
Penser en amont
Avant même d'oubrir Photoshop, GIMP ou tout autre éditeur graphique,
vous devriez simplement vous assoir avec une feuille et un crayon, et
réfléchir à l'arborescence de votre boutique, afin de la rendre aussi flexible
que possible. Par exemple, toutes les boutiques n'ont pas le même
nombre de catégories, ou de produits par catégorie.
Un thème complète de PrestaShop requiert au moins 30 pages ou sections
de page :








Accueil
Page de catégorie
Page de produit
Page de comparaison de produit
Page de résultat de recherche
Page "Mon compte" et toutes ses sous-pages :
o Mes réductions
o Mon historique de commandes
o Mes informations personnelles
o Mon panier
Page de connexion
Page de création de compte















Page de commande :
o Liste d'adresses
o Coût d'expédition
o Choix du paiement (chèque, transfert...)
o Page unique de commande
Création 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 légales
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 thème
incomplet, et donc une mauvaise expèrience utilisateur.
Pour avoir une meilleure idée des pages à prendre en compte, plongezvous dans le thème par défaut, afin d'en disséquer le code.
Une fois que vous maîtrisez votre arborescence, faites quelques croquis
pour l‟interface, afin d'avoir une première idée de la position des divers
éléments : nouveaux produits, promotions, images, texte, etc.). Par
ailleurs, incluez les détails 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 général ; certains
professionnels préfèreront travailler directement dans Photoshop, puis
passer au code PHP, HTML et CSS.
Recommandations techniques
Afin de vous assurer que vous pourrez facilement partager votre création
avec d'autres (designer, intégrateurs, 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 méthodes, selon vos préférences :


un dossier pour tous les calques de textes, afin que les intégrateurs
puissent facilement accéder au design lui-même ;
un dosser pour chaque bloc de design (nouveaux produits,
meilleures vente, etc.)
Couleurs
N'utilisez pas le réglage CMYK, qui n'est adapté qu'à l'imprimerie. Utilisez
toujours le réglage 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
même chose :






Arial
Verdana
Helvetica
Georgia
Tahoma
Times News Roman
Utilisez le strict minimum de police : trop de polices différentes ne peut
que rendre votre design plus confus.
Unités
Quand vous créez pour le Web, l'unité de base est le pixel. Ne faites pas
vos mesures en picas, points ou centimètres.
Taille de texte
Gardez toujours en tête que l'utilisateur choisi la taille finale du texte,
étant donné que les navigateurs modernes peuvent l'augmenter ou la
réduire au besoin. En fait, vous devriez tester votre site avec différentes
variations dans les réglages 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 définissant une couleur de cache (la
même que celle du fond).
Autres



Pensez à activer toutes les options afin de voir le rendu avec le
thème standard.
Modifiez une fiche produit de voir quelles sont les options possibles
(promotion, nouveautés, etc. …) et leurs impacts sur l‟affichage en
front-office.
Le style graphique de votre boutique doit être homogène.
Ergonomie
Sans plonger dans les théories complexes sur les interaction hommemachine, 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 problème d‟utilisation, vous perdez la confiance des visiteurs. Si
elle arrive en dessous d‟un certain niveau, la frustration s‟installe et
l‟internaute quitte le site. D‟où l‟importance de l‟ergonomie dans un site ecommerce.
N‟oubliez pas que votre but (en plus de vendre, bien sûr) est de montrer
aux visiteurs que derrière le site e-commerce que vous faites, il se cache
des personnes sérieuses et compétentes.
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 décider s'il peut faire confiance à votre site et vous donner son numéro
de carte bleue.
Vous devez faire en sorte d'avoir un style général distinct, facilement
reconnaissable, et d'avoir votre catalogue visible dès la première page.
L'en-tête du site vous permet de placer les éléments les plus
représentatifs : 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.
L‟aspect visuel est très important (d‟où la phase de Réflexion en amont)
vous devez trouver un moyen élégant de mettre en avant vos produits
sans pour autant surcharger votre page. De plus vous devez utiliser des
couleurs et graphisme homogènes entre les pages. Par exemple, si vous
utilisez un effet sur les boutons d'une page, pensez à réutiliser les même
effets sur toutes les pages de votre site.
Le moteur de recherche doit être facile à trouver. En tant que visiteur, il
arrive souvent que l‟on sait ce qu‟on vient chercher aussi il est important
que l‟on distingue du premier coup d'oeil cet outil.
Lors de la création de votre site pensez aussi à la navigation dans les
catégories, 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 téléphonique ou un tchat en ligne, n‟hésitez pas à
le mettre en avant. Cela montrera votre proximité avec le client et c‟est ce
que fera la différence.
Bien entendu, n'utilisez pas votre numéro de téléphone personnel : ils
doivent sentir qu'ils contactent une équipe de support, pas qu'ils vous
dérangent 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 c‟est qu‟il est intéressé par votre
produit et qu‟il souhaite des détails. 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 homogène avec le reste du design : si le bouton se détache
trop, le visiteur pourrait ne pas le voir, de la même manière que de
nombreuses personnes ont appris à ne pas voir les publicités sur Internet.
Mettez en avant aussi les “étiquettes” reliées à ces produits (nouveautés,
promotions, coupon de réduction, etc. …) et affichez clairement les délais
de livraison !
Le tunnel de conversion (Mon compte et ses pages intérieures)
Le "tunnel de transformation" (en anglais, "conversion funnel", c'est à dire
"entonnoir de conversion", ce qui est plus proche de la réalité) correspond
aux pages où vous transformerez vos visiteurs en clients (d‟où le terme
"transformation" ou "conversion"). Si ces pages sont mal structurées, cela
peut vous faire perdre plusieurs clients potentiels, et donc les commandes
qu'ils auraient pu passer.
Création de compte / "Mon compte"
Le thème par défaut de PrestaShop dispose d'un formulaire apportant un
très bon taux de transformation. Mais suivant votre site, il ne sera pas
forcément adapté à vos besoins. Voici donc quelques conseils à suivre si le
formulaire de base ne vous convient pas :



Ne laissez que l‟essentiel. Le visiteur doit se concentrer sur la
création de son compte et l‟acte d‟achat. Inspirez-vous des
formulaires d'Amazon et de la Fnac.
Réduisez 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 à
côté du champs du formulaire. Les erreurs devraient être affichées
avec une couleur distincte (le rouge a fait ses preuves), et les
champs requis doivent être clairement indiqués (avec une astérisque
*, par exemple).
Dernière chose : le bouton validation se situe toujours à la droite du
bouton annuler.
Le paiement
Le visiteur a créé son compte client, félicitations ! Mais tout n'est pas
gagné, il doit encore passer l'étape de l'acte d'achat.
Là encore, même chose que le formulaire de création de compte :



Réduisez au maximum le nombre d„étapes. (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 sécurisé de votre banque. Par exemple, utilisez une icône
"cadenas" avec une petit texte explicatif.
o Si le paiement est par chèque (ou autre que paiement en
ligne), indiquez clairement la marche à suivre (adresse,
montant, …)
Après cette étape cruciale votre visiteur est à présent 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 améliorer l‟utilisation
de votre site e-commerce.
Créer un thème
Le système de thème de PrestaShop est basé sur un moteur de
modèle/template, appelé Smarty, qui permet aux web-designers et
développeurs de créer facilement leur propre thème, avec peu de
connaissances techniques.
Tous les designers et développeurs web devraient utiliser les outils
suivants :





Firefox: Firebug est une extension gratuite permettant de
facilement comparer et débuguer du CSS et son résultat.
Firefox/Chrome: Web Developer ajoute de nombreux outils pour
développeurs, directement dans le navigateur.
Safari/Chrome: activer le Web Inspector.
Opera: Dragonfly, un environnement de débogage 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 thème PrestaShop
Un thème 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 thèmes ont leurs fichiers dans le dossier racine /themes.
Chaque thème dispose de son propre sous-dossier, dans le thème
racine.
Chaque thème est fait de fichiers modèles (.tpl), d'images (.gif),
.jpg, .png), d'un ou plusieurs fichiers CSS .css, et parfois même de
fichiers JavaScript(.js).
Chaque thème a un fichier preview.jpg dans son dossier racine,
permettant au propriétaire du site d'avoir un aperçu du thème
directement depuis le back-office, et donc de choisir son thème en
connaissance de cause.
Voici un aperçu de l'arborescence de fichiers d'un thème PrestaShop (ici,
le thème par défaut) :





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 thème. Ses droits
d'accès devraient être à CHMOD 666 (par exemple), afin que l'outil
de traduction puisse y avoir accès.
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 thème peut
parfaitement fonctionner sans, il vous revient de les créer selon vos
besoins.
Gérer les traductions
Toutes les chaînes de vos thèmes doivent être comprises dans une
fonction Smart, comme suit :
{l s='My Text'}
Cela permettra à n'importe qui de traduire le thème 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 déroulant, choisissez "Traduction front-office", puis cliquez sur le
drapeau de la langue dans laquelle vous voulez traduire les chaînes.
Toutes les chaînes du front-office s'affichent alors.
h3 Transmettre des informations (données) à un thème PrestaShop
Le schéma suivant explique comment les données sont transmises depuis
le coeur de PrestaShop jusqu'à son thème. A l'aide de la méthode l(), le
thème peut afficher le texte dans la langue, si la chaîne a été traduite
auparavant
Best practices
Voici une liste non exhaustive de bonnes pratiques à respecter :
1. Ne mélangez jamais du code XHTML et du code PHP.
2. Ne mélangez jamais du code XHTML et du code CSS, placez le code
dans un fichier .css à part.
3. N'effectuez jamais de requête SQL dans un contrôleur PHP (fichiers
.php à la racine de PrestaShop), privilégiez l'utilisation des méthodes
existantes dans les classes PHP et/ou créez de nouvelles méthodes
dans ces classes.
4. Validez votre code XHTML et votre code CSS grâce aux validateurs
du W3C : XHTML validator, CSS validator.
5. Vérifiez toujours si une méthode n'existe pas déjà dans les classes.
6. Ne modifiez pas les fichiers du cœur de PrestaShop, développez 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'hésitez pas à faire un donc, ou à en parler autour de
vous !
Schéma SQL
Vous pouvez télécharger le schéma de PrestaShop 1.4 au format PNG, ou
au format original (vous devrez télécharger MySQL Workbench pour le
lire).
Personnaliser le thème par défaut
Suivez les étapes ci-dessous pour créer votre propre thème à partir du
thème par défaut.
1. Copier le thème par défaut
1. Trouvez le dossier /themes dans votre installation de PrestaShop, et
créer une copie du dossier ../themes/prestashop/ par défaut.
2. Renommez cette copie.
2. Modifier la feuille CSS



Dans le dossier du thème 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 créativité – et votre connaissance
de CSS.
_A noter : les fichiers maintenance.css, situé dans le même dossier,
contrôle la mise en page de la page du Mode Maintenance.
Les images ajoutées ou modifiées doivent être placées dans le
dossier /img du nouveau thème (par exemple,
/themes/MyStoreTheme/img).
Conseils de l'équipe de PrestaShop






Autant que possible, utilisez des CSS plutôt que du HTML (par
exemple, n'utilisez des tableaux que pour les données tabulaires,
pas pour la mise en page).
Validez votre code HTML et CSS avec les outils du W3C : HTML
validator, CSS validator.
Réduisez la taille de vos images en les compressant. L'outil
SmushIt de Yahoo! vous sera pour cela très utile.
Testez votre thème 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 vérifier que tout fonctionne bien sur
les navigateurs les plus utilisés par vos visiteurs. Si votre site n'a
pas encore été lancée, 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
"Thèmes".-tab.
3. Créer une image de prévisualisation
Une fois que vous avez personnalisé votre thème, vous devez placer un
fichier représentant le thème, appelé preview.jpg, dans le thème à la
racine (par exemple /themes/MyStoreTheme. Ce fichier doit être une image
.jpg en 100*100 pixels.
4. Testez votre thème
1. Allez dans l'onglet "Préférences" du back-office son sous-onglet
"Apparences" et sa section "Thèmes" (en bas de page)
2. Choisissez le nouveau thème et cliquez sur enregistrer.
Partagez vos thèmes !
Présentez votre dur labeur, recevez des commentaires et consolidez votre
réputation en partageant votre thème dans la section thème de notre
Forum !
Vous pouvez également vendre votre thème aux utilisateurs de
PrestaShop au travers du site Addons
Créez votre propre thème
Le thème par défaut de PrestaShop
Le thème par défaut 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 thème 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 thème qui vous ressemble plus ou
intègre mieux l'esprit de votre activité, plutôt que d'avoir le même thème
que des millliers d'autres boutiques. C'est pour ce type de besoin que vous
pouvez concevoir votre propre thème – et la manière la plus rapide est
d'utiliser le thème par défaut comme fondation solide au-dessus de
laquelle faire jouer votre inspiration.
Les premiers pas de votre propre thème
Tous les thèmes actuellement installés se trouvent dans le dossier /themes,
où le vôtre propre se trouvera également bientôt. Le thème par défaut est
situé dans le sous-dossier /themes/prestashop. C'est à partir de ce dossier
que vous construirez votre propre thème.
Cela étant, nous vous engageons fortement à ne pas modifier
directement les fichiers du thème, pour la simple raison que cela pourrait
introduire de nouveaux bugs, sans pouvoir revenir en arrière. Vous devez
conserver le thème par défaut intact, afin de pouvoir le remettre en place
si vous découvrez un problème dans votre propre thème.
La première étape consiste donc à faire une copie du sous-dossier
/prestashop, et donner une nom unique à cette copie, par exemple le nom
de votre futur thème ou de votre site. Ainsi, le thème par défaut reste
intact.
Arborescence des fichiers d'un thème
Lorsque vous créez un thème, vous devenez connaître dès le début toutes
les différentes pages et indications que votre thème doit gérer
correctement, afin de proposer une expérience complète à vos
utilisateurs. Ici encore, le thème par défaut est une bonne base
d'inspiration, à la fois par la variété de fichiers qu'il comprend et de
comportement pour lesquels il a été conçus, mais également pour son
code, dans lequel vous pouvez vous plonger afin de mieux comprendre
comment un thème fonctionne.
Fichier ou
dossier
preview.jpg
Description
Image utilisée en tant qu'aperçu dans la section
"Thème" du sous-onglet "Apparence" de l'onglet
"Préférences". La présence de cette image est
obligatoire, sinon le thème ne peut être sélectionné.
De toute évidence, l'image devrait donner une image
de l'aspect du thème, et non afficher le logo du
404.tpl
designer ou son nom...
Page affichée lorsque la page demandée n'est pas
trouvée (erreur 404).
Page d'ajout ou de modification d'une adresse client.
Page listant les adresses d'un client.
Page d'identification et de création de compte.
Page listant les meilleures ventes.
Chemin de navigation (fil d'Ariane).
Page listant les produits au sein d'une catégorie.
address.tpl
addresses.tpl
authentication.tpl
best-sales.tpl
breadcrumb.tpl
category.tpl
category-treeUtilisé uniquement pour le bloc Catégories.
branch.tpl
category-cms-tree...
branch.tpl
Pages informatives (onglet "Outil" > "CMS" du backcms.tpl
office).
contact-form.tpl
Page du formulaire de contact.
discount.tpl
Page listant les bons de réduction 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-tête 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.
manufacturerPage 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 dernièrement ajoutés.
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.
orderPage de confirmation de commande (après paiement).
confirmation.tpl
order-detail.tpl
order-follow.tpl
order-opc.tpl
order-opc-newaccount.tpl
order-payment.tpl
order-return.tpl
order-slip.tpl
order-steps.tpl
pagination.tpl
password.tpl
prices-drop.tpl
product.tpl
product-list.tpl
product-sort.tpl
productscomparison.tpl
scenes.tpl
search.tpl
shopping-cart.tpl
shopping-cartproduct-line.tpl
sitemap.tpl
store_infos.tpl
stores.tpl
supplier.tpl
supplier-list.tpl
thickbox.tpl
/cache
/css
/img
Page de détail d'une commande d'un client.
Page de demande d'un retour produit pour un client.
...
...
Page du processus de commande : Étape 3 – choix du
mode de paiement.
Page de détail d'un retour d'un client.
Page listant les avoirs d'un client.
Barre d'évolution du processus de commande.
Est appelé par l'ensemble de s pages listant des
produits. Boutons permettant de changer de page
dans une liste de produits.
Page de changement de mot de passe d'un client.
Page listant les promotions.
Page de détail d'un produit.
Est appelé par l'ensemble des pages listant des
produits. Liste des produit.
Est appelé par l'ensemble des pages listant des
produits. Menu permettant de filtrer une liste de
produits.
...
Page de détail d'une scène au sein d'une catégorie de
produits.
Page listant les résultats d'une recherche.
Page listant les produits dans le panier d'un client.
Page de détail d'une ligne du panier.
Page de plan du site.
...
...
Page listant les produits d'un fournisseur.
Page listant les fournisseurs.
Page de zoom d'une photo d'un produit.
...
Contient les feuilles de style du thème. Le fichier
global.css concerne la mise en forme de la majeure
partie du site. A moins d'être un utilisateur averti, il
est conseillé de laisser les fichiers d'origine.
Contient les images du thème. Remplacez les images
adéquates par vos créations personnelles. A moins
que vous ne soyez un utilisateur averti, il est conseillé
de laisser les fichiers d'origine.
Scripts JavaScript utilisés dans le thème. A moins que
vous ne soyez un utilisateur averti, il est conseillé de
laisser les fichiers d'origine.
Fichiers de traduction. Ces fichiers sont générés par le
back-office et leur contenu doit être modifié depuis
l'outil de traduction : onglet Outils, sous-onglet
"Traductions", section Modifier les traductions.
/js
/lang
Quelques conseils
Firebug, Dragonyfly et autres : vous pouvez grandement simplifier votre
travail en tant que développeur front-end en utilisant les bons outils,
pourvu que vous testiez votre création dans un navigateur moderne
disposant de tels outils, sous la forme de module (FireBug pour Firefox) ou
directement intégré au navigateur (Dragonfly pour Opera, le Web
Inspector de Chrome & Webkit).
JavaScript: tous les fichiers JavaScript doivent être placés dans le
dossier /js du thème.
Fichier preview.jpg : une fois que votre mise en page est terminée, vous
pouvez créer le fichier de prévisualisation. Faites une capture d'écran et
réduisez-la à 180 pixels de large afin d'en faire l'image preview.jpg par
défaut. Vous pouvez utiliser l'outil de capture fourni par votre système
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/enUS/firefox/addon/screengrab/].
Intégration : où vont les points d'accroche et les modules
L'un des aspects principaux de l'intégration de contenu dans PrestaShop
consiste à savoir où le contenu sera affiché, et donc où sont situés les
différents points d'accroche et modules.
Voici une représentation 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 modèle, si vous souhaitez le
modifier.
Points d'accroche
Zone principale de contenu
Modules
Section en-tête
Blocs de la page d'accueil
Colonne centrale de catégorie
Fiche produit
Formulaire de création de compte et étapes de commande
Formulaire de création de compte
Bloc de commande
Adresses
Conditions légales et choix du transporteur
Choix du module de paiement
Plan du site
Formulaire de contact
Page des boutiques