How to edit page layout in PrestaShop

The layout of your PrestaShop store defines how your content is structured and presented to your customers. Depending on your technical comfort level, you can modify your layout using the built-in administration tools, specialized modules, or by directly editing the theme’s source code.

Context

PrestaShop layouts are modular. They rely on “Hooks”-designated locations on a page (like the header, footer, or left column)-where specific modules can be attached. Controlling these hooks and the underlying Smarty (.tpl) templates allows you to completely transform the user interface.

Method 1: Layout Settings in the Admin Panel

This is the fastest way to change the basic structure (e.g., choosing between a full-width page or a page with a sidebar).

1. Navigate to Themes: Go to Improve > Design > Theme & Logo.
2. Choose Layouts: Click the Choose layouts button.
3. Assign Structures: You will see a list of page types (Category, Product, Contact, etc.). For each, you can select:
   • Full Width: No sidebars.
   • Three Columns: Both left and right sidebars.
   • Two Columns: One sidebar on either the left or right.
4. Save: Click save to apply the changes globally.

Method 2: Managing Positions and Hooks

If you want to move a specific element, like moving the “Search Bar” from the top to the side, you use the Positions manager.

1. Open Positions: Go to Design > Positions.
2. Locate the Hook: Find the specific area of the page (e.g., displayNav1 or displayHome).
3. Reorder: Use the drag-and-drop handles to change the order of modules within that hook.
4. Unhook: If you want to remove a module from a specific spot without deleting the module itself, click the Unhook option.

Method 3: Editing Template Files (.tpl)

For structural changes that the admin panel doesn’t support, you must edit the theme files via FTP.

• Header and Footer: Edit header.tpl and footer.tpl in /themes/[your-theme]/templates/_partials/.
• Product Page: Edit product.tpl in /themes/[your-theme]/templates/catalog/.
• Best Practice: Always use a Child Theme when editing these files. This prevents your custom layout from being overwritten when the main theme is updated.

Method 4: Visual Page Builders

In 2026, many PrestaShop users prefer “Drag & Drop” modules which replace the default editor with a visual interface.

• Creative Elements: A popular Live Page Builder that allows you to design headers, footers, and product pages visually.
• Default CMS Editor: For standard content pages, go to Design > Pages and use the built-in editor to arrange text and media.

Distinction: CSS vs. TPL

• TPL Files: Control the structure and logic (e.g., “Put the price above the Add to Cart button”).
• CSS Files: Control the styling (e.g., “Make the price bold and blue”). Styles are typically found in /themes/[your-theme]/assets/css/custom.css.

Practical Implications

• Cache Clearing: After editing .tpl or .css files, your changes may not appear immediately. You must go to Advanced Parameters > Performance and click Clear Cache.
• Smarty Compilation: While editing, set “Template compilation” to Recompile templates if the files have been updated to see changes in real-time.
• Mobile View: Changing a three-column layout to full-width can significantly impact mobile readability. Always check your layout on a smartphone after making structural changes.

Summary

Whether you are using the native “Choose Layouts” tool for quick structural changes or diving into .tpl files for a custom design, PrestaShop provides a flexible framework for layout management. By mastering the relationship between Hooks and Modules, you can ensure your store is both visually appealing and functionally optimized.