8 étapes pour une boutique solidaire avec Friends Of Prestashop

L’initiative du E-commerce Solidaire by Friends Of Prestashop est une idée de Jeff Viguier, de l’agence Creabilis sur Toulouse, proposant durant le confinement de mettre en place gratuitement des boutiques Prestashop pour les commerçants proposant des produits de première nécessité, et voyant leur chiffre d’affaires se réduire à « peau de chagrin ».

Cette initiative plus que louable – à laquelle nous avons un peu participé, notamment en offrant notre module de référencement naturel Ever SEO pour Prestashop – consiste donc à avoir un expert Prestashop en contact, qui vous mets gratuitement en place une boutique contenant votre catalogue produit, de manière à ce que les commerçants puissent malgré tout continuer à vendre, et oserais-je dire « limiter ainsi la casse ».

Nous avons ainsi décidé de participer – sur initiative de Houria – à la création d’une boutique. Sur le site des Friends Of Prestashop, les commerçants peuvent laisser leur demande, qui est analysée afin déjà d’en vérifier la pertinence, et ensuite les demandes sont répercutées par régions ou codes postaux.

L’hébergeur 772424 offre l’hébergement sur la durée du confinement, de nombreux modules sont disponibles pour aider à la fois à la création de ces boutiques Prestashop, et les compétences de nombreux experts sont mises à disposition, ce gratuitement.

Comme nous sommes pour la plupart formateurs, nous avions d’emblée un agenda très chargé, qui s’est alourdi avec la période de confinement. Par-dessus le marché, nous avons ouvert des serveurs Discord afin d’aider les élèves et personnes au chômage (partiel ou non) de manière à les former encore plus, gratuitement, sur l’utilisation de Prestashop. Il a ainsi été compliqué pour nous de créer des boutiques en ligne pour l’initiative E-commerce Solidaire, puisque nous aidions à la fois les commerçants à l’utilisation de nos modules gratuits pour Prestashop, et avec les formations que nous avons donné en plus pour aider les personnes en difficulté.

Malgré cela, Houria a proposé de réaliser malgré tout des boutiques. Comme notre emploi du temps était très chargé, nous ne disposions que des dimanche pour les réaliser, avec des contraintes auxquelles nous n’étions pas habitué. Une première boutique fut ainsi mise en place en quelques heures, et fort de notre premier essai, nous avons donc décidé d’en créer une seconde.

Les « contraintes » étaient les suivantes :

• pas d’accès au FTP (donc pas de modification de code) : ce qui s’explique par le fait que la personne gérant les hébergements chez 772424 n’allait pas passer le tiers de ses journées à créer des accès pour les très nombreuses boutiques créées, à savoir le très patient Julien Mutzenhardt de Web RD Informatique
• pas de module payant en-dehors de ceux offerts par l’équipe de Friends Of Prestashop sur l’initiative du E-commerce solidaire
• Thème par défaut, ou l’excellent thème PrestaRocket qui est extraordinairement boosté en SEO
• Énorme contrainte de temps, puisqu’en création, nous n’avions que le dimanche, et encore, je préciserai en parlant plutôt d’une simple après-midi (et bonjour au passage la semaine à rallonge…) pour tout mettre en place une fois les données bien récupérées

Nous nous sommes donc organisés avec Houria. Une bonne procédure de travail est le gage d’une création efficace, surtout lorsqu’il s’agit ici de travailler en binôme. Les rôles étaient donc les suivants :

• Houria : chef de projet, s’occupe de la liaison avec le client, gère l’intégralité du catalogue, force de proposition pour accompagner le client, webdesign HTML/CSS/Bootstrap et rédactionnel
• Cyril : webdesign HTML/CSS/Bootstrap, installation et configuration des modules

Afin de vous aider à bien suivre les étapes selon la personne qui parle, nous illustrons notre contenu avec nos petits avatars respectifs 🙂 . Vous saurez ainsi si Houria est en train d’expliquer l’étape en cours, ou si c’est Cyril qui reprend la main sur le contenu !

Suite à la répartition des rôles, nous avons rapidement pu déduire une procédure de travail, que voici :

Comme d’habitude, le plus long, le plus fastidieux a bien été la récupération des données, car cela requiert énormément de temps et d’échange pour bien disposer d’une boutique correspondant au besoin du client. Ici, le sujet était un restaurant à Blagnac, le Black Angus.

Voici donc, en détail, comment il a été possible de mettre en ligne une boutique Prestashop sur l’initiative de Friends Of Prestashop. Etant formateurs HTML/CSS/Bootstrap, nous avons utilisé nos compétences pour mettre en place la boutique, ces compétences sont donc totalement requises pour réaliser une boutique Prestashop en modifiant le thème Classic uniquement avec des CSS, et afin d’ajouter des blocs HTML utilisant la grille Bootstrap présente par défaut.

Let’s go !

Récupération des informations

Voir le WordPress tout pété qui nous a bien aidé

Nous avons donc navigué sur leur site WordPress de manière à récupérer le plus d’informations possibles. Il est préférable d’avoir trop d’informations que pas assez, un dossier a donc été créé avec le maximum d’images et de texte possible.

Un document simple au format txt a ensuite été rédigé, car nous allions rapidement avoir besoin des informations d’entreprise et de contact. En effet, sur configuration d’une boutique Prestashop, il faut préciser les adresses emails, numéro de téléphone et adresse postale de la boutique, d’autant plus que dans le cas présent, il s’agit de demander aux clients de récupérer leur commande directement dans le restaurant.

Comme nous nous doutions que nous allions modifier le code CSS du thème, nous avons créé un fichier style.css et un fichier index.html, tout simplement pour disposer des outils de nos éditeurs de code (Sublime Text, Atom, Visual Studio Code ou autre) pour n’avoir plus qu’à copier-coller nos modifications dans l’administration de la boutique Prestashop.

Le dossier du client sur nos ordinateurs comportait donc 3 dossiers :

• Les images récupérées depuis le site WordPress
• Les informations du client
• Le code HTML et le code CSS qui sera copié collé

Houria s’est alors chargée de son côté de prendre contact avec le « client » (peut-on l’appeler ainsi pour une initiative gratuite ?) de manière à récupérer le catalogue produits selon la structure que propose Prestashop, et afin que ce dernier ne soit pas trop complexe à gérer, ni pour nous, ni pour le client. A noter que la réactivité du client a énormément pesé dans la balance, tout comme l’accompagnement que Houria a su faire régulièrement, par email ou par téléphone, après ses journées de formation, et également le fameux dimanche.

Configuration de la boutique Prestashop

A force de le faire, nous en sommes venus à appeler cette étape le « déroulé standard » 😀

Lorsque j’ai voulu réaliser cette étape, je me suis rendu compte qu’Houria était déjà passée sur tous les réglages de la boutique, j’ai donc simplement regardé certains onglets dans l’administration de Prestashop pour voir tout ce qu’elle avait mis en place. Voici les étapes de ce « déroulé standard ». Quelque part, si nous avions mieux échangé (et pourtant Dieu sait à quel point nous échangeons régulièrement !), nous aurions été plus efficace…. Apprenons de cet oubli désormais !

Le cache de Prestashop

Par défaut, lorsqu’une boutique Prestashop est installée, le cache est actif et n’autorise pas la recompilation des fichiers. Ces réglages se trouvent dans l’onglet « Paramètres avancés » puis « Performance« . Afin de travailler sereinement, il faut donc d’emblée changer cela et passer le réglage de cache comme ceci :

Un peu plus bas, il est préférable de temporairement désactiver la Concaténation, Compression et mise en Cache, le temps de mettre en place le webdesign.

Sans ces réglages (qu’il faudra changer lorsque la boutique sera définitivement en ligne) il sera très compliqué d’arriver à analyser le code CSS utilisé pour le webdesign du thème (ici le thème Classic). Ces réglages ne devraient pas avoir de secrets pour vous, surtout si vous avez lu notre tutoriel concernant le cache sous Prestashop.

Les réglages généraux de Prestashop

A présent que la boutique est ralentie au possible avec la modification des performances, il va falloir configurer globalement le Prestashop. Pour cela, il faut donc se rendre dans l’onglet « Paramètres de la boutique » puis « Paramètres généraux« . Comme toute boutique en ligne, il est plus que recommandé de mettre en place le HTTPS, ou « certificat SSL ». Ici, l’hébergeur 772424 les a gracieusement mis en place, ce même gratuitement.

Comme nous nous doutions que les clients – afin de venir retirer leur commande – risquaient d’avoir besoin de localiser le restaurant, nous savions donc d’avance que nous allions devoir non seulement afficher l’adresse du restaurant, mais également qu’il serait judicieux d’insérer un peu partout sur la boutique une iframe de Google Map (gratuit donc, nous verrons comment ajouter cela lors de l’étape de création de blocs HTML avec Bootstrap).

Les premiers réglages ont donc été les suivants :

S’agissant d’un restaurant, les autres réglages étaient donc plutôt simples à déduire, puisqu’il s’agit ici de ne pas afficher ni marques, ni fournisseurs, et certainement pas un multiboutique.

Nous n’avons pas fait le choix d’afficher les meilleures ventes, car sur le démarrage d’une boutique, il n’y en a aucune.

Une fois ces réglages enregistrés, il a donc fallu passer la boutique en mode maintenance, de manière à travailler sereinement, sans que quiconque ne puisse visualiser le Prestashop, à moins d’y être autorisé par son adresse IP.

Et une fois le mode maintenance de Prestashop, cet onglet de Prestashop est à présent définitivement en place, passons aux suivants. Les réglages et l’utilité du mode maintenance sous Prestashop ont d’ailleurs été l’objet d’un autre tutoriel Prestashop, détaillant un peu plus son utilité et son fonctionnement.

D’ailleurs, saviez-vous qu’il est possible de ne mettre en place le mode debug mais que pour les adresses IP incluses dans le mode maintenance de Prestashop ?

Les réglages de commande de Prestashop

Ici, les réglages sont restés assez « basiques » si je puis m’exprimer ainsi. N’oublions pas qu’il s’agit d’un restaurant physique. Il n’y a donc pas de livraison, puisque c’est au client d’aller récupérer sa commande au jour le jour.

Pensons tout de même UX (User eXperience) en mettant bien en avant ce que le client va payer, avec les réglages suivants :

A noter qu’en effet, le recalcul des frais de port après modification de la commande peut être passé à « Non », puisque ces frais de port sont bien gratuits, mais cela n’aura en conséquence aucun impact sur le panier du client.

Comme il s’agit de restauration, nul besoin de proposer des emballages cadeaux, et pas besoin non plus de proposer des emballages recyclés.

Les réglages des produits de Prestashop

Ici, nous avons donc un catalogue présentant des aliments, qu’il s’agisse de boissons ou de plats. Par défaut, nous avons les réglages suivants :

Notez que nous avons augmenté la taille du résumé produit, dans le doute. Cela nous permettra plus tard de ne pas rencontrer trop de soucis pour le rédactionnel des produits, d’autant plus que nous allons nous efforcer de le générer.

Tous les réglages de stock ont été désactivés, ce jusqu’à ce que le client puisse être en mesure de le gérer, mais dans l’immédiat, la boutique n’étant même pas « en ligne », et le client voyant justement son stock demeurer sans être écoulé, autant lui laisser la main dessus. De plus, afin de réaliser sereinement des tests de commande plus tard, il est judicieux pour le moment de ne pas gérer le stock.

En revanche, et afin que la pagination soit bien en place et le plus compatible avec les critères des moteurs de recherche, nous avons passé le nombre de produits par page à 64, de manière à réduire au maximum le nombre de clics pour que le visiteur trouve le produit qu’il recherche.

A ce sujet, de plus en plus de référenceurs recommandent de réduire la pagination, pour que d’emblée les moteurs de recherche puissent visiter le maximum de produits, comme les internautes, et en un minimum de clics.

Allez, enregistrons et passons aux réglages clients.

Les réglages des clients de Prestashop

Ici, très simple. Il s’agit juste de cocher une case ou deux, et de rendre les informations clients le moins fastidieux possible.

D’ordinaire, nous ne sommes pas très favorables au fait de demander la date de naissance aux clients, mais il s’est avéré que certaines plate-formes bancaires le demandent très expressément pour valider une commande payée par carte bleue. La case hélas demeure donc cochée.

Au passage, la date de naissance n’est hélas plus requise sous Prestashop 1.7. Sur cette boutique, sans accès FTP, il n’a pas été possible de modifier cela, mais nous avions déjà réalisé une modification en suivant l’excellent tutoriel de notre ami Webbax. Ici, faute d’avoir la main sur les overrides, pas moyen de corriger cela.

Une fois ces réglages en place (et nul besoin ici de gérer les groupes clients ou les titres de civilité), passons aux « contacts ».

Les contacts sur Prestashop

Ce que Prestashop appelle « Contacts » est en réalité les adresses emails et coordonnées de la boutique. Cela se passe donc sous l’onglet « Paramètres de la boutique » puis « Contact ».

Comme à l’étape précédente, Houria a su récupérer d’emblée toutes les informations nécessaires (adresse email, adresse postale, numéro de téléphone, etc), il a été assez rapide de mettre en place les réglages.

A noter qu’en l’absence d’une clé API Google Map, et comme il n’y a qu’un seul « magasin », il faut veiller à supprimer les magasins par défaut renseignés sous Prestashop, pour obtenir ceci :

Pour afficher l’emplacement du restaurant, nous allons plutôt utiliser une simple iframe Google Map, comme précisé précédemment, et que nous allons voir un peu plus tard, lors de l’ajout de blocs HTML avec Bootstrap.

Trafic & SEO par défaut sous Prestashop

Souvent, bien trop souvent ignorés ! Ici, les réglages que nous mettons en place sont un peu un mélange de que qu’Olivier Clémence recommande sur son excellent site, mais aussi des réglages que nous mettons régulièrement en place pour que les administrateurs de boutiques Prestashop puissent avoir la main sans risque sur le référencement naturel de leur e-commerce.

D’emblée, il faut changer la title et la meta description de la page d’accueil de la boutique, en modifiant la page nommée « index » :

Une fois ce premier réglages effectué, descendons un peu plus bas dans la page, et paramétrons immédiatement les URL réécrites, ainsi que la redirection 301 (les redirections 302 ne sont pas utiles puisque nous sommes en mode maintenance)

Une fois ces réglages en place, allons un peu paramétrer le format des URL, pour à la fois le simplifier et le rendre plus sécurisé pour le commerçant qui gérera la boutique.

Tout d’abord, retirons les éléments non utiles des URL des produits, comme la catégorie et l’EAN13 (d’autant plus qu’ici les produits seront très simples, et sans EAN13). La route vers les produits devient donc celle-ci :

{id}{-:id_product_attribute}-{rewrite}.html

De la sorte, si un produit change de catégorie, cela n’engendrera ni erreur 404, ni redirection. Concernant les routes vers les fournisseurs, marques, pages et catégories de pages, il s’y trouve par défaut des termes sans grand intérêt en SEO, comme « supplier » ou « content ». Ici, nous avons simplement mis une seule lettre, afin de réduire l’impact de ces termes inutiles en référencement naturel. De la sorte, la route vers les fournisseurs devient celle-ci :

s/{id}-{rewrite}

La route vers les marques devient celle-ci :

b/{id}-{rewrite}

Et la route vers les catégories de pages passe donc à ce réglage :

c/cc/{id}-{rewrite}

Le résultat pour ces routes devient le suivant :

Et nous en avons fini avec les réglages de Prestashop ! Ici, je n’ai pu que constater qu’Houria avait rapidement réalisé les réglages… En un sens, si j’avais pensé à lui demander, je n’aurais pas perdu quelques minutes à juste constater qu’elle avait déjà tout paramétré !

Allez, à ton tour Houria !

Mise en place du catalogue

Allez dans le menu Personnaliser / dans l’onglet « Modules » et «catalogue de modules» dans le champ de recherche, saisissez « Nettoyage » ou «cleaner». Installez ce module. Attention, ce module vous permet de supprimer toutes les données de votre boutique, il s’agit typiquement d’un module qu’il vaut mieux désinstaller et supprimer une fois que votre site est en ligne, de manière à éviter au maximum toute suppression de catalogue et de clients qui serait irréversible. Après tout, le « problème est entre la chaise et le clavier ».

Ensuite, cliquez sur configurer et effectuez chacune des opérations dans l’ordre proposé de manière à supprimer tout contenu par défaut, et optimiser votre base de données, rien de compliqué ici (et c’est peut-être là le plus grand danger en production, malgré les avertissements que Prestashop a la décence de vous afficher).

Passons maintenant la création de votre catalogue produits

Tout d’abord, il faut réfléchir à l’organisation et à la structure de la boutique en ligne.

En effet, en fonction de ce que le e-commerçant souhaite proposer comme produits, il faudra mettre en place une certaine structure. Je m’explique : pour une autre boutique nous avions un restaurateur qui souhaitait proposer 3 menus comme c’est le cas de beaucoup de restaurant :

• un menu : plat + dessert
• un menu : entrée + plat
• un menu complet : entrée + plat + dessert

Avec pour chaque menu 2 choix pour les entrées, 2 pour les plats et 2 pour les desserts. Pour offrir ces possibilités aux utilisateurs, nous avons opté pour des déclinaisons de produits.

Nous avons donc crée nos 3 attributs Entrée – Plat – Dessert dans le menu Catalogue / Attributs et caractéristiques afin de pouvoir les récupérer à la création de nos produits « menu » :

Ensuite, pour chaque attribut nous avons entré les choix proposés par le restaurateur.

Ensuite dans Catalogue / et dans l’onglet Produits nous pouvons ajouter un nouveau produit qui sera notre menu complet Entrée + plat + dessert. Il nous suffit alors de cocher la case Produits avec déclinaisons pour voir apparaître un nouvel onglet Déclinaison dans lequel nous allons pourvoir générer nos différentes déclinaisons.

Ainsi, l’utilisateur pourra choisir à sa convenance une entrée, un plat et un dessert !

Ça donne faim non ?

Passons maintenant à la création de produits un peu plus standard comme pour le restaurant Black Angus

Finalement comme Cyril l’évoquait plus haut, ce qui nous a pris le plus de temps et qui est souvent le cas lors d’une création de site, c’est de récupérer les contenus ! Et pour des contenus de qualité, il faut bien border cette étape avec un mail de demande des informations précises dont nous avons besoin comme le nom et le nombre de catégories, le nombre de produits, les descriptions, les tarifs HT et TTC… Heureusement, notre contact n’a pas tardé à nous envoyer les différents éléments et nous avons pu entamer la création du catalogue.

Vous pouvez aussi vous appuyer sur la carte des menus imprimé qui peut vous servir de base.

La première étape la création des catégories :

Si vous avez des sous-catégories il faudra alors cocher la case correspondante dans la catégorie parente. Vous pourrez également taper votre description en y ajoutant quelques niveaux de titres pour un meilleur référencement. Puis n’oubliez pas de renseigner les informations des balises Title et Meta description qui sont les clés pour un meilleur positionnement dans la SERP en veillant bien à y placer vos mots clés principaux en début de phrase. Vous pouvez enregistrer et créer vos autres catégories.

La deuxième étape la création des produits:

Pour notre exemple nous allons créer le produit BURGER HOLIDAY INN + FRITES, toujours dans notre menu Catalogue / Produits et nouveau produit.

Notre produit est un produit standard mais vous pouvez aussi choisir de créer un pack de produit (en ayant déjà des produits en ligne dans votre boutique) ou encore comme sur le site de la Team un produit dématérialisé.

Ajoutez la description

Remplissez aussi les champs récapitulatif (qui apparaît en haut sur la droite sur votre fiche produit) et description longue (qui apparaît en bas à droite sur la fiche produit ).

Là encore n’hésitez pas à bien renseigner les informations concernant votre produit avec des niveaux de titres et des mots clés. Mettez-vous à la place de vos utilisateurs et demandez-vous pourquoi ils achèteraient votre produit plutôt qu’un autre. Mettez également des liens vers vos autres produits pour apporter du maillage interne.

Maintenant que toutes les informations sont renseignées, n’oubliez pas d’activer et d’enregistrer votre produit afin qu’il apparaisse sur votre boutique en ligne, c’est une erreur que je retrouve régulièrement chez mes élèves.

Installation des modules

• un module permettant d’insérer tant bien que mal du code CSS depuis l’administration de la boutique : disponible gratuitement chez SunnyToo
• Un module permettant de créer des blocs HTML en illimité : disponible gratuitement sur notre boutique
• Notre module de référencement naturel Prestashop, offert pour toute initiative e-commerce solidaire par Friends Of Prestashop
• Et pour que les clients sélectionnent l’heure de livraison, en précisant un message concernant les attestations de sortie dérogatoire : le module d’option dans le tunnel de commande, d’après le super tutoriel de Hervé Hennes

Avant toute chose, il y a deux modules à désinstaller par défaut sur Prestashop, car ils ralentissent votre boutique et/ou ne servent pas à grand-chose. Recherchez donc dans la liste des modules installés le module « gamification » et le module « bienvenue » pour les supprimer totalement de la boutique.

Puis, comme Prestashop insère des données par défaut sur la boutique suite à son installation, Houria a intégralement supprimé le catalogue précédemment en place, avec le module PS Cleaner. Cela permet ainsi de repartir sur une boutique vierge.

Le module Mail Alert est à ne pas oublier ! Ce module permettra au commerçant de recevoir par email toute commande passée sur la boutique, raison pour laquelle – une fois de plus – la récupération des données est très importante, et noter ces informations dans un document partagé est un gain de temps non négligeable.
Concernant la nouvelle étape du tunnel de commande, j’ai mis en place ces réglages :

Ce module très utile pour de la récupération de commande dans le cas présent, a permis de réaliser cette étape cruciale pour la récupération des commandes côté client :

Webdesign CSS

Voyons comment modifier un thème par défaut de Prestashop pour lui donner une cohérence graphique vis-à-vis d’une charte ou d’un simple logo…

Nous partons mine de rien d’assez loin. Voici le design d’une boutique Prestashop par défaut :

Armé de mon navigateur internet, de mes compétences HTML/CSS, et du fichier style.css dans un coin de mon ordinateur, j’attaque donc la modification du design. Je vais démarrer par du « global », afin de changer tout ce blanc qui ne correspond pas aux couleurs du restaurant.

S’agissant d’un « steack house », imaginons une ambiance légèrement saloon, et allons récupérer d’ailleurs l’image de fond sur leur site WordPress. Comme je n’ai pas accès au FTP, pour mettre l’image en ligne sur le site, je n’ai pas le choix : je dois uploader l’image de fond depuis une page ou un produit, n’importe laquelle, je n’ai besoin que de l’URL. J’en profite au passage pour uploader tous les médias que j’ai pu récupérer avant de démarrer la boutique, sait-on jamais je pourrais en avoir besoin lors d’une intégration HTML Bootstrap.

Je me note donc bien de côté l’URL de l’image, qui va me servir en fond.

Des CSS globales sur le thème Classic

Puisque je désire donner un esprit un peu « saloon » au site, j’opte pour une police de caractères gratuite chez Google Font, qui me fournit tout simplement le code CSS suivant :

@import url('https://fonts.googleapis.com/css2?family=Girassol&display=swap');

Et – à présent que j’ai à la fois mon image de fond, et ma police de caractères – je commence mon code CSS. Il va falloir malheureusement que je mette des !important un peu partout, car en passant par un module, mon code est appelé un peu tôt dans la page. J’obtiens donc le code CSS suivant :

@import url('https://fonts.googleapis.com/css2?family=Girassol&display=swap');
/* Global */
h1{
    font-family: 'Girassol', cursive!important;
    font-size: 2rem!important;
}
h2{
    font-family: 'Girassol', cursive!important;
    font-size: 1.7rem!important;
}
h3{
    font-family: 'Girassol', cursive!important;
    font-size: 1.5rem!important;
}
body{
    background: url(https://black-angus-blagnac.ecommerce-solidaire.fr/img/cms/bg_1.jpg);
    background-size: cover;
    background-repeat: repeat-y;
}

Le souci étant que mon image de fond n’apparaît pas encore partout. Mais avant d’aller voir directement le contenu des pages Prestashop pour leur donner de la transparence, je m’attaque tout de suite au header, en descendant donc, sur un ordre logique de lecture, c’est ensuite que j’en arrive au « wrapper » ou réellement aux blocs de contenu. Le code CSS s’agence désormais comme ceci :

@import url('https://fonts.googleapis.com/css2?family=Girassol&display=swap');
/* Global */
h1{
    font-family: 'Girassol', cursive!important;
    font-size: 2rem!important;
}
h2{
    font-family: 'Girassol', cursive!important;
    font-size: 1.7rem!important;
}
h3{
    font-family: 'Girassol', cursive!important;
    font-size: 1.5rem!important;
}
body{
    background: url(https://black-angus-blagnac.ecommerce-solidaire.fr/img/cms/bg_1.jpg);
    background-size: cover;
    background-repeat: repeat-y;
}
#header .header-nav .cart-preview.active{
    background: #a91428;
}
#header .header-nav{
    background:rgba(255,255,255,0.8);
}
#header .menu ul{
    background:transparent;
}
#header .header-top a[data-depth="0"]{
    color:#fff;
}
#header .top-menu a[data-depth="0"]:hover{
    color:#a91428;
    background: #fff;
    transition: 1s;
}
#wrapper, header{
    background: transparent!important;
}
#wrapper .breadcrumb li a {
    color: #fff;
}
#main .page-header{
    background: #ffffffbd!important;
    border-radius: 0px 50px 50px 0px;
    padding: 1%;
}

Et pour tester l’efficacité de mon code CSS – car il y a forcément tôt ou tard des adaptations à réaliser – je copie colle le code de mon style.css directement dans le module de CSS préalablement installé. Pour pallier à toute éventualité, j’en profite aussi pour vider le cache.

Techniquement, sur mon navigateur internet, j’ai donc trois onglet ouverts :

• la page des performances de Prestashop
• la page du module CSS
• le front-office

Avec quelques raccourcis claviers, comme ALT TAB pour changer d’application, ou CTRL TAB pour changer d’onglet dans le navigateur internet, les modifications sont plus rapides à mettre en place.

Je passe donc à mon footer. Il faudra bien que je différencie le footer « global » des footers que l’on retrouve parfois dans les étapes du tunnel de commande. Si le catalogue n’est pas en place, j’ai toujours un Prestashop à moitié cassé sur mon ordinateur, mais dans le cas présent, Houria m’avait déjà mis à disposition un produit, pour que je puisse progresser jusque dans le tunnel de commande. Travail d’équipe !

Donc, à bien vérifier dans le footer sur les différentes pages, j’obtiens le code CSS suivant :

/* Footer */
#footer{
    border-top: 3px dotted #a91428;
}
.footer-container{
    background: rgba(0,0,0,0.8);
}
body#checkout section.checkout-step .form-footer{
    background:#fff;
}
footer p, .footer-container p, .footer-container a, .footer-container li a, .footer-container .block-contact, .label, label, footer #block_myaccount_infos .myaccount-title a, footer .block-contact .block-contact-title{
    color: #fff!important;
}

(Et bigre pourquoi n’y a-t-il pas de cohérence dans les titres du footer ? Cela aurait été plus simple en CSS…)

J’ai à présent un « global CSS » pas trop mauvais, je peux donc commencer à redescendre selon un cheminement logique : d’abord les pages catégories, puis les pages produits, puis le tunnel de commande, et enfin les petits détails. Je terminerai par des CSS pour bien avoir un design mobile propre, surtout que je suis un peu en train de « tout casser ».

Des CSS pour les pages catégories

Je passe donc aux catégories, qui d’emblée ont récupéré le design CSS global que j’ai inséré précédemment. Quelques détails sont à adapter, comme la pagination, la taille des polices de caractères, etc. Concernant mes catégories, j’ajoute donc ces lignes de CSS :

/* Category */
.pagination, .total-products p, .products-selection .sort-by{
    color: #fff;
}
.block-category h2 {
    border-left: solid 4px #d13239;
    padding-left: 5px;
    margin: 5px 0;
}
#products .product-title a{
    font-size: 1.2rem;
}
#products .product-title a, .featured-products .product-title a, .product-accessories .product-title a, .product-miniature .product-title a{
    font-size: 1.2rem;
}
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping{
    color: #2fb5d2;
}

Il ne faut pas hésitez à faire des rappels de couleurs comme pour le border-left devant nos titres.

J’en profite également pour changer un peu les couleurs, puisque le logo semble noir majoritairement, mais avec des pointes de rouge. Et comme précédemment, je copie colle l’intégralité de mon style.css pour mettre le code dans le module de CSS, je veille bien à vider le cache et je vérifie sur la page catégorie si tout est bien propre. Au besoin, je corrige un peu les CSS pour les « forcer » ou les rendre conformes.

Des CSS pour mes pages produits

Une fois que mes catégories me semblent propres, je passe aux produits, qui eux aussi récupèrent le code CSS « global ». Démarrer donc par un CSS « global » a donc une fois de plus été un gain de temps.

/* Product */
#product #content-wrapper .col-md-6{
    background:rgba(255,255,255,0.8);
    padding: 1%;
}
.product-flags li.product-flag{
    background:#000;
}
#product .current-price span{
    color: #a91428;
    font-size: 1.5rem;
}
.product-actions .add-to-cart{
    background: transparent;
    border:1px solid #a91428;
    color:#a91428;
}
.product-actions .add-to-cart:hover{
    background: #a91428;
    border:1px solid #fff;
    color:#fff;
    -moz-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
    transition: 0.5s;
}
.product-actions .add-to-cart:not( :hover ){
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate06deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: 0.5s;
}

J’ajoute des petites transitions au survol de la souris sur les boutons d’ajout au panier, ce qui m’aide à dynamiser ces call to action si importants en e-commerce (et puis j’aime bien les rotations CSS3 sur les sites 🙂 )

Pour rendre le fond un peu plus visible, mais tout en conservant la visibilité, je mets également un peu d’opacité par-ci par-là, ce qui donne un effet plus « smooth » aux pages.

Tout de suite, ça fait un peu plus classe, et par-dessus le marché on récupère directement dans le rédactionnel la police de caractères. L’étape suivante, dans la logique e-commerce, est à présent la page panier, juste avant le tunnel de commande. Si vous avez prêté attention aux CSS issues du thème Classic ou de celles fournies ci-dessous, vous avez peut-être repéré qu’il va être possible de cibler la page panier avec body#cart.

D’emblée, sur ma page panier, la liste des produits commandés n’est pas du tout lisible. Je dois donc adapter le tableau HTML listant les produits se trouvant dans le panier. Bon gré mal gré, je me suis contenté de ceci :

#wrapper .cart-grid-body a.label{
    color:#fff!important;
}
body#cart .product-line-grid-body{
    background-color: #000;
}

Et personnellement je ne trouve pas cela très beau, mais je n’ai pas su être en mesure de faire mieux, le temps m’étant compté… Je suis preneur de toute meilleure solution !

Mon code CSS pour la page panier se transforme en ceci :

/* Cart */
.cart-summary .btn-primary{
    background: transparent;
    border:1px solid #a91428;
    color:#a91428;
}
.cart-summary .btn-primary:hover{
    background: #a91428;
    border:1px solid #fff;
    color:#fff;
    -moz-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
    transition: 0.5s;
}
#wrapper .cart-grid-body a.label{
    color:#fff!important;
}
/* Meh ! ça c'est vraiment moche... */
body#cart .product-line-grid-body{
    background-color: #000;
}

Un peu déçu d’avoir coincé sur le panier pour le rendre plus joli en CSS, je passe au tunnel de commande…

Déçu, mais CSS du tunnel de commande

La particularité du tunnel de commande est que le design affiché change énormément par rapport au reste du site.

/* Checkout */
body#checkout #header .header-nav{
    background: transparent;
}
body#checkout #header .header-nav a{
    color:#FFF;
}
body#checkout section.checkout-step{
    background-color: rgba(255,255,255,0.9);
}
#wrapper .label, #wrapper label{
    color: #000!important;
}
.cart-grid-right{
    background: rgba(255,255,255,0.8);
}
body#checkout #order-summary-content #order-items h3 {
    font-family: 'Noto Sans'!important;
    font-size: 0.9rem!important;
}
#payment-confirmation .btn-primary{
    background: transparent;
    border:1px solid #a91428;
    color:#a91428;
}
#payment-confirmation .btn-primary:hover{
    background: #a91428;
    border:1px solid #fff;
    color:#fff;
    -moz-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
    transition: 0.5s;
}

Le diable se cache dans les détails en CSS

Il existe une loi un peu générique, qu’on appelle la règle des « 80-20 ». Elle précise que 80% du travail est réalisé en 20% de temps, mais que les 20% de travail occupent 80% du temps imparti.

Il s’agit donc ici de régler tous les petits détails qui polluent un peu le webdesign. Vous me pardonnerez donc le commentaire CSS décrivant à quoi font référence les règles CSS, mais il s’agit bel et bien de petits détails par-ci par-là à adapter ou « webdesigner » pour que cela soit cohérent par rapport à la mise en page globale.

/* Bordel à la con */
body#prices-drop #js-product-list-header, body#new-products #js-product-list-header, body#best-sales #js-product-list-header{
    background: rgba(255,255,255,0.8);
    border-radius: 50px;
    text-align: center;
}
.featured-products h2{
    background: rgba(255,255,255,0.8);
    border-radius: 50px;
    text-align: center;
}
#blockcart-modal .cart-content p.product-total .label{
    color: #363a42!important;
}
.blockreassurance_product {
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    position: relative;
    display: block;
    margin-bottom: .75rem;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid rgba(0,0,0,.125);
    padding: 4%;
}
/* Contact */
#contact #left-column {
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    position: relative;
    display: block;
    margin-bottom: .75rem;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid rgba(0,0,0,.125);
    padding: 4%;
}

Dans l’ensemble, ce sont des changements de couleurs de fond, un peu d’ombre sur certains blocs, et la page Contact à revoir.

Les couleurs de fond n’étant pas de base dans le module Reassurance, je préfère le retirer totalement, quitte à gérer plus tard du contenu avec un simple bloc HTML. L’avantage est que le rédactionnel sera totalement géré depuis un seul module, ce qui évitera d’avoir à naviguer parmi les multiples onglets de l’administration de Prestashop, tant pour Houria et moi que pour le client final.

Des media queries !

Comme un bon webdesigner, je vérifie sur mobile si mon design est cohérent. Et là, c’est la panique !

C’est illisible, les textes du menu sont invisibles… Il faut donc que je réadapte toute la partie mobile, grâce à quelques media queries en CSS. Le format de « bascule » sur le thème Classic entre les appareils mobiles et l’ordinateur sont basés sur une taille de 767px, ainsi que mon inspecteur me le précise sur mon navigateur internet.

Séparons donc ces deux types d’appareil :

@media only screen and (max-width: 767px) {
    /*Mobile*/
}
@media only screen and (min-width: 768px) {
    /*Ordinateur*/
}

Pour les smartphones, je dois « blanchir » certains éléments. Je mets donc ces CSS :

@media only screen and (max-width: 767px) {
    #header .header-nav{
        background: transparent;
    }
    #header .header-nav #menu-icon .material-icons {
        color: #fff;
    }
    #header .header-top a[data-depth="0"]{
        color:#1e1e1e;
    }
    .block-category{
        box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
        background: #fff;
        padding: 1.563rem 1.25rem;
        margin-bottom: 1.563rem;
    }
    #footer .h1, #footer .h2, #footer .h3{
        color: #fff;
    }
    .footer-container .links ul{
        background-color: transparent;
    }
}

Avec un peu d’huile de coude, c’est assez rapide. Cependant, je n’aime mais alors pas du tout sur les fiches produits l’espace blanc qui se trouve en-dessous des images. Par-dessus le marché, je vais m’efforcer de centrer le menu et le logo, avec flexbox, sur une largeur de 100%, pour positionner le menu en-dessous du logo.

Au passage, j’ai bien galéré pour disposer d’une CSS qui puisse m’agrandir la description du produit, d’habitude je passe par une modification du thème, mais ici… Pas le choix !

@media only screen and (min-width: 768px) {
    #_desktop_logo{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .header-top .position-static{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    #top-menu{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 3%;
        margin-bottom: 0;
    }
    /*Si quelqu'un est doué en CSS, qu'il m'explique, j'ai rien compris mais ça marche !*/
    body#product .tabs{
        margin-left: calc(-100vw / 2 + 100px / 2);
    }
}

Et tout de suite le descriptif produit prend plus de place, occupant l’espace vide qui se trouvait juste avant. J’ai absolument rien compris à la CSS, mais avec un peu de bidouille ça a fonctionné 😀

Au passage, on m’a signalé depuis Twitter un léger bug. Comme quoi non seulement j’ai rien compris, mais en plus je n’ai pas vérifié de partout 😛

Le menu, comme le logo, sont désormais centrés grâce à flexbox en CSS, mais uniquement pour ordinateurs :

Des CSS Bootstrap manquantes

Ici, je vous fais gagner un peu de temps. En effet, il aura fallu que je passe à l’étape suivante (l’ajout de bloc HTML Bootstrap) pour réaliser que je ne pouvais pas disposer des dernières fonctionnalités fournies dans la documentation officielle de Bootstrap.

Techniquement, j’ai besoin de jongler un peu sur du centrage et des marges en CSS, ainsi que de rapidement centrer du texte. Il me suffit d’ajouter ceci dans mon code CSS :

/* Missing Bootstrap */
.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}
.justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}
.text-center{
    text-align: center!important;
}
.mt-3, .my-3 {
    margin-top: 1rem!important;
}

Le code étant directement issu du si populaire outil Bootstrap, un copier coller suffit à rendre ces classes fonctionnelles. Dans mon cas, il a fallu que je réalise lors de la saisie de code HTML Bootstrap que certains éléments ne fonctionnait pas. Comme à mon habitude, j’ai d’abord râlé, puis j’ai ajouté les quelques CSS qui finalement ne prenaient pas tant de temps que cela à mettre en place, ce grâce au module de CSS.

Je te laisse poursuivre Houria 🙂

Intégration de blocs HTML avec Bootstrap

Création du code du Bloc à insérer

Voici notre design découpé :

Ici nous avons 2 groupes « parents » en vert pour lesquels on va ajouter la classe d-flex dans notre fichier css (voir plus haut) ainsi nous pourrons agir sur les éléments enfants avec les propriétés de Flexbox !

/*Flex*/
.d-flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
.flex-column {
    -webkit-box-orient: vertical!important;
    -webkit-box-direction: normal!important;
    -ms-flex-direction: column!important;
    flex-direction: column!important;
}
.flex-wrap {
    -ms-flex-wrap: wrap!important;
    flex-wrap: wrap!important;
}
.justify-content-around {
    -ms-flex-pack: distribute!important;
    justify-content: space-around!important;
}

Ensuite aux groupes verts, j’ajoute la classe « flex-column » pour que les éléments enfants se placent les uns en-dessous des autres, et au groupe contenant les images j’ajoute les classes « d-flex flex-wrap justify-content-around » pour que les images soit rangées les unes à la suites des autres, que leurs tailles soient conservées et que l’espace qu’il reste en marge soit bien répartit entre et autour des images.

    <div class="d-flex flex-column text-center text-lg-left">
        <div class="text-center">
            <h2 class="products-section-title text-uppercase text-center">Notre restaurant sur Toulouse ~ Blagnac</h2>
            <h3>LE BLACK ANGUS, HOTEL HOLIDAY INN</h3>
            <h3>1 Porte de Bordebasse, 31700 Blagnac</h3>
        </div>
        <div class="d-flex flex-wrap justify-content-around">
            <img class="img-fluid img-thumbnail" src="/g1.jpg" alt="g1.jpg" />
            <img class="img-fluid img-thumbnail" src="/g2.jpg" alt="g2.jpg" />
            <img class="img-fluid img-thumbnail" src="/g3.jpg" alt="g3.jpg" />
            <img class="img-fluid img-thumbnail" src="/g4.jpg" alt="g4.jpg" />
            <img class="img-fluid img-thumbnail" src="/g5.jpg" alt="g5.jpg" />
            <img class="img-fluid img-thumbnail" src="/g6.jpg" alt="g6.jpg" />
            <img class="img-fluid img-thumbnail" src="/g7.jpg" alt="g7.jpg" />
            <img class="img-fluid img-thumbnail" src="/g8.jpg" alt="g8.jpg" />
        </div>
    </div>
    <div class="d-flex flex-column text-center text-lg-left mt-3">
        <h3 class="text-center">Retrouvez le Black Angus Steak House sur Toulouse Blagnac</h3>
        <h3 class="text-center">Restaurant de grillades à l'américaine</h3>
        <p>Nous privilégions les produits frais, le plus naturel possible, issus de productions locales et régionales. Nous sommes adhérents au mouvement Slowfood qui combat la standardisation du goût et des cultures. Certains de nos plats sont marqués de
            la mention «Km zéro» et du logo Slowfood. Il s’agit de recettes dont les matières premières principales sont approvisionnées dans un rayon de moins de 180 km de notre établissement.
        </p>
        <p>We strongly value fresh products which are mostly picked from local ang regional organic productions or sustainable farming. We are adherents to the Slowfood movement that fights against the standardization of taste and culture. Some of our dishes
            are marked with the «Km zero» and the Slow Food logo. This concept induces that the main ingredients are supplied within less than 180km from the hotel.
        </p>
        <iframe width="100%" height="450" style="border: 0;" src="https://www.google.com/maps"
            frameborder="0"></iframe>
    </div>

Mise en place du bloc dans le Module Bloc HTML :

Nous allons dans le paramétrage du module ajouter un nouveau bloc que l’on va positionner sur le hook « displayFooterBefore » pour qu’il s’affiche juste avant le footer sur la Homepage ( page racine), n’oubliez pas de donner un nom parlant à votre bloc et l’activer.

Ensuite il suffit de cliquer sur les chevrons pour afficher le code source et coller ce que l’on a prépéré avec notre éditeur de texte, et ainsi conserver les classes. Et voilà le tour est joué et c’est responsive !

Génération de contenu SEO

Le contenu c’est un peu la clé de votre porte du référencement, si votre site est pauvre en contenu il faudra qu’il ait en contrepartie une forte popularité pour remonter sur Google. Malheureusement c’est souvent cette partie qui est négligée des e-commerçants par manque de temps et d’informations. La bonne nouvelle c’est qu’avec notre super module Ever SEO, on va pouvoir faire du content spinning, autrement dit on va générer du texte à partir du contenu déjà présent dans nos pages pour enrichir nos pages en deux temps trois mouvements !

Cela va générer des variantes de notre contenu et ainsi on échappera au duplicate content très mal vu par les robots de Google pour le SEO. On va pouvoir également placer du maillage interne en utilisant des liens sur des short code.

Comment faire du content spinning en pratique avec Ever SEO ?

Pour cela rendez-vous dans le menu générateur de contenu produit dans les réglages généraux du module Ever SEO.

On arrive directement sur la liste des short code à disposition. En dessous, vous aurez aussi la possibilité de choisir de remplacer le contenu existant ou de l’ajouter à la suite du contenu déjà inscrit sur votre fiche produit. On pourra également sélectionner la langue sur laquelle on souhaite travailler.

Pour générer le contenu, il faudra ensuite choisir la catégorie concernée, et enfin on va pouvoir créer le contenu de la description courte ou de la description longue du produit.

Grâce à notre générateur de contenu nous allons pouvoir écrire ceci pour la description courte du produit :

Pensez à accompagner votre [product_title] avec des boissons !

Faites un tour sur notre carte  pour choisir la boisson qui accompagnera au mieux votre [product_title], également en retrait dans notre restaurant [shop_name] à Blagnac

Ce qui donnera sur la fiche produit du Burger Holiday Inn:

Alors facile non ? Maintenant à vous de jouer en prenant soin de structurer vos contenus avec des titres et des listes à puces … et en ajoutant des liens vers d’autres pages de votre boutique ce qui améliorera le maillage interne !

Remerciements

En premier lieu, un énorme merci à toute l’équipe Friends Of Prestashop, qui se sont tous battus (et bien souvent avec plus d’acharnement que nous) pour aider les commerçants à disposer de boutiques en ligne gratuitement. Cette initiative durant une période de confinement si difficile est à saluer, sans compter que beaucoup d’experts ont donné le meilleur d’eux-mêmes tout en mettant de côté leur propre activité.

Il s’agit bien là d’une preuve de dévouement incroyable que tous ont su mettre à contribution, avec un esprit d’entraide, de communication et de soutien durant ces moments historiques et anxiogènes que nous avons tous vécu.

Nos remerciements accompagnent également tous les partenaires qui ont offert des outils et des prestations, comme l’hébergeur 772424 cité plusieurs fois ici, mais aussi Store Commander , qui a offert son module permettant de gérer des catalogues produits bien plus volumineux que celui que nous avons eu à gérer ici.

Nous tenons aussi à citer particulièrement Julien Mutzenhardt de Web RD qui s’est vu attribuer la lourde tâche de gérer les noms de domaines et les hébergements, se situant ainsi en amont de toute demande réalisée pour les e-commerces solidaires.

Avec Houria, malgré notre emploi du temps très (trop) chargé, nous sommes heureux d’avoir pu créer cette boutique gratuitement, nous étions parti du principe qu’en cette période, toute aide demeure la bienvenue, et que ce qui a été décrit plus haut comme des contraintes a en réalité été perçu comme un exercice de webdesign, permettant aux personnes maîtrisant HTML, CSS et Bootstrap de designer une boutique sans se ruiner (d’où ce tutoriel).

Les sources HTML et CSS sont disponibles directement en cliquant sur ce lien de téléchargement, n’hésitez pas à les adapter et les modifier pour redécorer vos thèmes Classic Prestashop !

 Imprimer