Child pages
  • Parcourir le front-office

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Si vous avez installé PrestaShop avec ses données de démonstration, vous verrez des produits Apple.

Image Added

Bien que le propriétaire d'une boutique puisse changer le thème front-office de sa boutique n'importe quand, grâce au grand nombre de thèmes disponibles sur la place de marche PrestaShop Addons (http://addons.prestashop.com/), ce chapitre sera basé uniquement sur le thème par défaut.

...

L'en-tête correspond à la zone de contenu accessible depuis toutes les pages du front-office.

Image Added

Il contient certains outils et liens essentiels, qui s'appliquent à l'ensemble de la boutique :

...

Le pied de page donne accès à quelques-unes des pages qui pourraient être les plus intéressantes pour l'utilisateur.

Image Added

  • Le bloc "Mon compte", contenant des liens vers les principales du compte de l'utilisateur (ou la page de connexion) :
    • Mes commandes. Toutes les commandes passées ou en cours.
    • Mes avoirs. Toute commande annulée donne droit à un avoir, qui peut être utilisé pour de futures commandes.
    • Mes adresses. Un client peut avoir plusieurs adresses pour varier ses options de livraison.
    • Mes informations personnelles. Prénom, nom, adresse e-mail, adresse physique, numéro de téléphone, date de naissance : toutes les informations utiles d'un client.
    • Mes bons de réduction. Tous les bons de réduction qui n'ont pas encore été utilisés.
    • *Mes produits favoris *. Un client peut mettre des produits en favoris, pour l'acheter plus tard. Ils sont stockés ici.
  • Le bloc "Information", contenant :
    • Trois liens vers des listes de produits :
      • Promotions : toutes les promotions en cours.
      • Nouveaux produits : les produits qui ont été récemment ajoutés au catalogue.
      • Meilleures ventes : les produits les plus populaires.
    • Quatre liens vers des pages d'informations :
      • Nos magasins
      • Contactez-nous
      • Conditions d'utilisation
      • À propos
  • Le bloc "Nous suivre", contenant des liens vers les comptes Facebook et Twitter de votre boutique, et un lien vers le flux RSS de vos pages CMS.
  • Le bloc "Contactez-nous", contenant l'adresse, le numéro de téléphone et l'adresse e-mail de votre société.

...

La colonne de gauche du thème par défaut ne change guère tandis que le client circule et valide ses achats, car elle sert principalement de réceptacle pour la navigation et les liens secondaires.

Bloc Tags

Image Added

Le propriétaire du magasin peut indiquer un ensemble de balises pour chaque produit. Une étiquette est un mot clé non-hiérarchique, également décrit comme métadonnées: il n'est pas affiché sur la page produit car il n'apporte aucune information utile, mais elle peut s'avérer très utile lors de la construction des listes thématiques - comme une étiquette nuage, où les tags les plus courants sont écrits dans une police plus grande que les plus rares.

Bloc Catégories

Image Added

Une catégorie permet de trier les éléments de manière hiérarchique : elle peut contenir des sous-catégories, ce que permet de créer un parcours de catégories de la plus généraliste à la plus spécifique.

...

Affiché uniquement si le client a regardé la page d'au moins un produit durant la session actuelle.

Image Added

Ce bloc sert de rappel des produits que l'utilisateur a déjà parcouru, et offre un raccourci vers ceux-ci dans le cas où il souhaiterait revenir en arrière.

Bloc Fournisseurs

Image Added

Le client peut choisir d'afficher tous les produits en provenance d'un même fournisseur, quel que soit leurs types ou leurs prix.

Bloc Fabricants

Image Added

Le client peut choisir d'afficher tous les produits en provenance d'un même fabricant, quel que soit leurs types ou leurs prix.

Bloc CMS

Image Added

Ce bloc permet à PrestaShop de lister les pages statiques écrites par le propriétaire de la boutique : information de livraison, mention légales, conditions d'utilisation... Ce ne sont pas des pages permettant de vendre des produits, mais leur contenu est suffisamment important pour justifier d'être toujours accessibles.

Bloc Publicité

Image Added

Par défaut, ce bloc contient une image menant au site officiel de PrestaShop. Vous pouvez en modifier les réglages pour promouvoir le site d'un ami ou une autre boutique.

Bloc Newsletter

Image Added

Les clients peuvent s'inscrire à votre lettre d'information directement depuis ce formulaire.

...

La colonne de droite du thème par défaut change très durant la visite du site. Ses blocs sont toujours disponibles, depuis n'importe quelle page.

Bloc Nouveaux Produits

Image Added

Ce bloc présente les derniers produits ajoutés à votre boutique, avec un lien vers leurs pages respectives.

Bloc Promotions

Image Added

Ce bloc donne un aperçu rapide des promotions en cours (s'il y en a), avec les prix original et le prix réduit.

Bloc Nos Magasins

Image Added

Ce bloc contient un lien vers l'outil de localisation des magasins, qui permet à vos clients de trouver le magasin le plus proche. C'est un outil essentiel pour votre société si vous avez effectivement des magasins avec pignon sur rue. Autrement, vous pouvez facilement désactiver cet outil – et ce bloc.

Bloc Contactez-Nous

Image Added

Il est essentiel d'avoir bien en vue, sur chaque page, le numéro de téléphone de votre service client.

...

La page d'accueil par défaut présente une vue globale de la boutique et des possibilités offertes aux clients. Un carrousel d'image (slider) sert d'introduction à la boutique.

Image Added

Ce carrousel est suivi d'un bloc "Produit phares", qui présente quatre des produits que le vendeur a choisi de mettre en avant, que ce soit pour leur nouveauté ou pour leur prix.

Image Added

Pour la plupart, les internautes arriveront sur votre boutique par le biais d'un moteur de recherche, directement sur la page d'un produit ou d'une catégorie de produits. Ceux qui arriveront sur la page d'accueil ne sont pas forcément la majorité, et c'est la raison pour laquelle elle devrait être conçue pour les nouveaux utilisateurs, avec une introduction en bonne et due forme.

...

Catégories, tags, fabricants, recherche, réductions, meilleures ventes ou nouveaux produits : PrestaShop dispose de nombreux parcours pour parvenir à un produit, mais en définitive le client verra toujours une mise en page cohérente des listes de produits, selon leur contexte.

Image Added

Malgré la variété des contenus, les mises en page de ces listes restent très similaires, afin de ne pas bousculer les nouveaux venus :

...

Les catégories peuvent disposer d'une image accompagnée d'un message d'introduction, tous les deux définis par l'administrateur.

Image Added

Ce n'est pas le cas par défaut, mais vous pouvez remplacer l'image de la catégorie par une "scène", c'est à dire une image cliquable (ou "image map" en anglais"). Chaque catégorie peut disposer d'un nombre illimité de scènes, et l'utilisateur peut passer de l'une à l'autre de l'outil situé en-dessous.

...

L'affichage des produits par catégorie ou par fabricant peut être trié par prix, nom ou disponibilité.

Image Added

Notez bien que l'affichage par tag ne permet pas un tel tri.

...

Les produits d'une catégorie peuvent être comparés entre eux grâce à la case à cocher "Comparer" (à gauche de la miniature). C'est la seule manière de comparer des produits, ce qui est logique étant donné qu'il serait compliqué de comparer des produits n'étant pas d'une même catégorie (donc ayant des différences techniques). Bien entendu, cela signifie que vous devez mettre dans une même catégorie que les produits comparables.

Image Added

À condition que les informations sur les produits soient complètes et cohérentes, la page de comparaison affichera une ligne pour chaque caractéristique comparable. C'est extrêmement utile, surtout pour les produits similaires mais ayant des différences techniques.

...

C'est ici que toutes les informations saisies par le propriétaire de la boutique sont mises à disposition de l'utilisateur. En fonction de la mise en page du thème, une page produit peut être très complète, avec de nombreuses informations, et présenter simplement les faits essentiels. Le thème par défaut est typique, en cela que sa particularité la plus proéminente est les images du produit, avec un outil de défilement en-dessous.

Image Added

A côté des images se trouvent deux blocs :

...

En cliquant sur le bouton "Panier" du bloc "Panier" dans la colonne de droite, ou sur le symbole du caddie dans l'en-tête, le client accède à la page "Récapitulatif de la commande", qui .

Image Added

Celle-ci se trouve être la première étape du processus de commande, comme l'annonce le fil d'Ariane présenté en haut, indiquant les étapes suivantes du processus :

...

Parce qu'il s'agit de l'un des premiers points de fuite des nouveaux clients sur les sites de commerce en ligne, PrestaShop fait en sorte de simplifier le plus possible le processus de création de compte.

En client cliquant sur les liens "Votre compte" ou "Identifiez-vous", le visiteur arrive sur la page de connexion, où il peut remplir l'un des deux formulaires :

  • Créer un compte ;
  • Se connecter à un compte existant.

Image Added

La première étape pour créer un nouveau compte client consiste à saisir son adresse e-mail dans le formulaire et à le valider. Cela l'emmène à page de création de compte elle-même. Deux blocs d'information doivent être remplis afin de créer un compte :

  • Vos informations personnelles. Tout ce qui peut servir à identifier le client de manière précise : prénom, nom, e-mail (déjà saisi), date de naissance ;
  • Confidentialité des données clients. En s'inscrivant sur votre site, le visiteur doit accepter votre politique de gestion des données. Le thème par défaut vous donne un exemple, mais c'est à vous de l'écrire, car c'est un lien légal entre vous et vos clients.

Image Added

Une fois enregistré, le client est envoyé sur la page "Mon compte", où il peut déjà voir les pages auxquelles il a accès : historique des commandes, avoirs, bons de réduction, et l'accès aux informations qu'il vient de donner.

...

  1. (si le visiteur n'est pas connecté) Le écran d'authentification, d'où le visiteur peut soit créer un compte, soit se connecter.
  2. L'adresse du choix de page. Si le compte de l'utilisateur n'a pas d'adresse enregistrée, celui-ci voit directement s'afficher le formulaire de création d'adresse.
    Note

    Une commande nécessite deux adresses :

      • L'adresse de facturation, qui doit être liée à la méthode de paiement ;
      • L'adresse de livraison, où la commande doit être envoyée.

    Image Added

    Si le client veut faire envoyer sa commande à une adresse autre que celle de facturation, il peut décocher la case "Utiliser la même adresse pour la facturation" et soit sélectionner une adresse parmi celles déjà saisie, ou bien en saisir une nouvelle.

    Si le client remarque une erreur dans une adresse, il peut la corriger en cliquant sur son lien "Mettre à jour".

  3. La page de livraison. C'est ici que le client doit choisir parmi les options de livraison et d'empaquetage.
    • Il faut absolument accepter les conditions de vente du site.
    • En fonction de ce que la boutique propose, le client peut choisir un paquet en matière recyclée and et un emballage cadeau pour la commande (avec en option un petit mot imprimé).
    • Le client DOIT choisir un transporteur pour passer à l'étape suivante.
      Image Added
  4. La page de règlement.
    Le client peut choisir plusieurs options de paiement, en fonction de ce que le vendeur a mis en place. Le client clique sur la méthode choisie, et en fonction de celle-ci, il est soit envoyé vers le gestionnaire du fournisseur tiers, ou bien vers une page de PrestaShop où l'utilisateur peut saisir les détails nécessaires, comme la validation avant d'afficher le chèque ou les informations bancaires.
    Note

    Les chèques et les cartes de crédit sont les options les plus courantes, mais PrestaShop facilite l'ajout de méthodes de paiement utilisant PayPal, Google Checkout ou d'autres fournisseurs tiers. Rendez-vous dans la page "Modules" du back-office pour découvrir tous les modules de paiement disponibles par défaut, et découvrez-en de nombreux autres sur le site Addons : http://addons.prestashop.com/.

    Image Added
  5. Une fois que le client a tout validé, il atteint la page de résumé.
    Celle-ci commence par "Votre commande sur (nom de la boutique) est terminée". En fonction de la méthode de paiement choisie, certaines informations finales peuvent être envoyées au client, avec une notification de la confirmation par e-mail et un lien vers la page de support. Le client doit cliquer sur "Je confirme ma commande" afin de la voir validée.
    Image Added
Info
titleCommande instantanée

Quand un utilisateur non connecté rempli son panier de produits et clique sur le bouton "Commander", la page d'authentification présente également deux sections :

When a non-logged visitor fills the cart with product and clicks the "Check out" button, the authentication page also features two additional sections: "Commande instantanée" and "Adresse de livraison".

La commande instantanée (ou "commande express") permet aux visiteurs d'acheter des produits sans devoir forcément créer un compte. PrestaShop a toujours besoin de certaines informations essentielles pour la livraison ou le paiement, mais l'utilisateur n'aura jamais à donner de mot de passe.

Vous pouvez désactiver la commande instantanée en passant par le back-office, dans la page des préférences de commandes, avec l'option "Activer la commande express (guest checkout).

...

L'une des importantes fonctionnalités de PrestaShop est la possibilité d'obtenir une liste géolocalisée de tous les magasins physiques auxquels la boutique est liée. Si l'option est activée (comme avec la boutique de démonstration), un clic sur le bloc "Nos magasins" ouvre une page avec une carte, un formulaire de recherche et un sélecteur de zoom.

Image RemovedImage Added

Sur cette carte, les magasins sont indiqués avec le logo de la boutique. Un clic sur ce logo amène une fenêtre pop-up qui révèle l'adresse complète et le numéro de téléphone, ainsi que les heures d'ouvertures, le tout comme indiqué par le propriétaire du site.

...