6.1 Utiliser les onglets backoffice et frontoffice

Regarde le tuto complet directement ici ⬇️

Introduction SEO

Ce pas-à-pas EP Studly clarifie la différence entre back office front office PrestaShop et vous montre comment naviguer entre les deux : tableau de bord, menus clés (Commandes, Catalogue), ouverture d’une fiche produit, puis bascule vers la boutique via “Voir ma boutique” ou “Prévisualiser”. En épreuve E5B, savoir où configurer (back) et où contrôler le rendu (front) est capital pour exécuter rapidement la consigne et produire des captures probantes.

Étape 1 — Identifier le back-office (tableau de bord)

Le back-office regroupe tous les réglages non visibles des visiteurs.

Arrivée sur le Tableau de bord = back-office.
Accès aux menus clés : Commandes, Catalogue, etc.
C’est ici que vous créez, modifiez et gérez le site.

Étape 2 — Accéder au front-office (vue visiteur)

Basculez vers la boutique publique pour vérifier vos actions.

Cliquer sur Voir ma boutique depuis le back-office.
Vous arrivez sur la page d’accueil : c’est le front-office.
Le front affiche ce que voit réellement le client.

Étape 3 — Ouvrir et gérer les produits côté back-office

Travaillez vos fiches avant de contrôler en front.

Catalogue → Produits : voir la liste ou ajouter un produit.
Ouvrir une fiche produit pour modifier titres, prix, images…
Les changements sont enregistrés ici.

Étape 4 — Prévisualiser une fiche produit côté front

Contrôlez instantanément le rendu d’une fiche.

Sur la fiche produit (back), cliquer Prévisualiser.
La fiche s’ouvre en front-office dans un onglet.
Vérifier : titre, images, prix, CTA, modules liés (partage, avis…).

Étape 5 — Naviguer efficacement entre back et front

Adoptez un cycle de travail fluide pour l’épreuve.

Modifier en back → Enregistrer → Voir ma boutique/Prévisualiser.
Actualiser la page front après modification.
Revenir en back (onglet précédent) pour d’autres ajustements.

📌 Conseils pour l’examen

Préparez deux onglets : back (édition), front (contrôle).
Après chaque changement, rafraîchissez le front et notez le résultat.
Faites des captures nettes : menus visibles, éléments modifiés.
Si un rendu ne change pas, pensez au cache du navigateur.

⚠️ Erreurs à éviter

Confondre lieu d’édition (back) et lieu de vérification (front).
Quitter une page sans enregistrer.
Tester un produit hors ligne (non visible en front).
Oublier d’ouvrir Prévisualiser depuis la fiche travaillée.

✅ Checklist révision rapide

Savoir définir back vs front
Savoir accéder au front via Voir ma boutique
Gérer les produits depuis Catalogue
Utiliser Prévisualiser pour contrôler
Captures avant/après prêtes pour le jury

FAQ : Tout savoir sur back & front

Qu’est-ce que le back-office ?

L’espace administration réservé aux gestionnaires : vous y configurez produits, commandes, modules, clients. Rien n’y est visible pour les visiteurs. C’est votre atelier de mise en place.

Et le front-office ?

La boutique en ligne telle que vue par les clients : pages, fiches produits, panier. C’est votre vitrine. Vous y vérifiez l’affichage après chaque modification.

Comment passer rapidement du back au front ?

Depuis le back, cliquez Voir ma boutique. Depuis une fiche produit, utilisez Prévisualiser. Travaillez en deux onglets pour réduire les allers-retours.

Pourquoi mon changement n’apparaît pas en front ?

Vérifiez que vous avez bien enregistré ; actualisez la page. Assurez-vous que le produit est en ligne. Si besoin, videz le cache ou changez d’onglet.

Où se font les vraies modifications ?

Toujours en back-office. Le front sert uniquement au contrôle et aux tests (comportement des modules, lisibilité, cohérence).

Quelles captures fournir à l’évaluateur ?

Back : zone d’édition (ex. fiche produit). 2) Front : résultat visible. Ajoutez une courte note expliquant l’objectif et la conformité à l’énoncé.

📚 Envie d’aller plus loin ? Découvrez notre Formation Prestashop BTS NDRC 2025 pour maîtriser toutes les compétences de l’épreuve !

🎥 Retrouvez tous nos tutos en vidéo sur la playlist YouTube dédiée !