Gérer les colonnes et la mise en page de vos pages Prestashop

Les mises en page disponibles

Chaque page de votre boutique Prestashop utilise une mise en page, définie par votre thème. Avec le thème par défaut, comme avec la plupart des thèmes, vous avez le choix entre :

• Pleine largeur, sans colonne : idéale pour l'accueil, les fiches produits ou le tunnel de commande.
• Deux colonnes avec une colonne à gauche : la plus courante pour les pages catégories, avec les filtres et le menu des catégories.
• Deux colonnes avec une colonne à droite.

Certains thèmes proposent des mises en page supplémentaires, par exemple avec deux colonnes latérales.

Choisir la mise en page de chaque page

Rendez-vous dans la section Apparence >> Thème et logo de votre back-office, puis cliquez sur le bouton Choisir la mise en page.

Vous obtenez la liste de toutes les pages de votre boutique (accueil, catégorie, produit, panier, contact, pages CMS…), avec pour chacune une liste déroulante permettant de choisir sa mise en page. Les pages qui ne sont pas réglées ici utilisent la mise en page par défaut du thème.

Enregistrez, puis videz le cache (Paramètres avancés >> Performances) si le changement n'apparaît pas tout de suite sur votre boutique.

Placer des modules dans une colonne

Le contenu des colonnes est constitué de modules : menu des catégories, filtres, meilleures ventes, bannière… Chaque module s'affiche à un emplacement précis de la page, appelé point d'accroche (ou hook). Les colonnes correspondent aux points d'accroche displayLeftColumn (colonne de gauche) et displayRightColumn (colonne de droite).

Pour ajouter un module dans une colonne :

• Rendez-vous dans la section Apparence >> Positions de votre back-office et cliquez sur Greffer un module en haut de la page.
• Choisissez le module, puis le point d'accroche de la colonne.
• Si besoin, sélectionnez les exceptions : les pages sur lesquelles le module ne doit pas apparaître.
• Enregistrez.

Tous les modules ne peuvent pas s'afficher dans une colonne : seuls ceux qui ont été prévus pour ce point d'accroche apparaissent dans la liste.

Organiser les modules d'une colonne

Toujours dans la section Apparence >> Positions, la liste des points d'accroche vous permet de gérer les modules déjà en place :

• Changer leur ordre par glisser-déposer, ou avec les flèches.
• Modifier leurs exceptions avec l'icône en forme de crayon.
• Retirer un module d'une colonne avec l'option Dégreffer, sans le désinstaller.

Utilisez la recherche en haut de la liste pour trouver rapidement le point d'accroche qui vous intéresse.

Une colonne vide ?

Si une colonne n'apparaît pas alors que la mise en page de la page la prévoit, vérifiez que :

• Au moins un module est greffé sur le point d'accroche de cette colonne.
• Ce module est bien activé, et qu'aucune exception ne l'empêche de s'afficher sur cette page.
• Le module a quelque chose à afficher : par exemple, le module de filtres n'apparaît que sur les pages qui listent des produits.

Pensez aussi au mobile : sur un petit écran, les colonnes passent généralement sous le contenu principal. Un module important ne doit donc pas se retrouver tout en bas de la page.

Et avec le thème Universal ?

Le thème Prestashop Universal est livré avec une mise en page adaptée à chaque type de page : une colonne de gauche pour les catégories et les listes de produits, la pleine largeur pour l'accueil et les fiches produits. Vous restez libre de la modifier page par page, comme expliqué dans cet article.

Conclusion

Choisir la mise en page de chaque page et placer les bons modules dans les colonnes permet d'adapter votre boutique à votre catalogue : des filtres et un menu là où vos clients en ont besoin, et des pages épurées là où ils doivent se concentrer sur un produit ou sur leur commande.