PrestaShop logo – categories tree on product page

Add categories tree list to product details – Prestashop 1.7

Quick steps to add categories tree to product details

A very requested feature which is pretty hard for new prestashop users.

When viewing a product details you fiind it hard to browse other products from other categories. You need to press back button and then click again.

What you would like is to to fill the following area with Category Tree view and/or other modules:

PrestaShop product page showing the category tree

Follow these steps:

  1. Go to backoffice panel (admin panel)
  2. Click on Design > Theme & Logo
  3. Click Choose Layouts (on your selected theme)
PrestaShop theme file to edit

4. Scroll to “product”

5. Check from the dropdown: “Two Columns, small left column – Two columns with small left column”

PrestaShop controller code for the category tree

6. Press SAVE

7. Click on Design > Positions

8. On the top right click “Transplant a Module”

Code to add in the product template

9. Select from the first dropdown “Category tree links”

10. Select from the 2nd dropdown the Transplant to: “displayLeftColumnProduct (This hook displays new elements in the left-hand column of the product page)“

Category tree code in the PrestaShop template

11. Press SAVE

12. Go to Modules > Module Manager

13. Scroll to “Design & Navigation”

14. Go to “Category tree links” (if you don`t see it press see more)

15. Click configure on the right

Template variable for the categories list

16. Select “Home Category” and press SAVE

CSS for the categories tree list

17. Go into the Front-Office and see the final result:

Categories tree list on the PrestaShop product page

Enjoy and Good Luck!