How to edit page layout in PrestaShop?

Editing the page layout in PrestaShop is a crucial element in the process of creating a unique and attractive online store. In this article, we’ll show you how to customize the look of your store step by step.

Editing the page layout in the admin panel

Change the layout in theme settings

PrestaShop offers the ability to customize the layout without having to edit the code. To do this:

1. Log in to the administration panel.
2. Go to Appearance → Themes Logos.
3. Click the Customize button next to the theme you’re currently using.
4. In the Page Layout section, you can choose a layout for different store pages (homepage, categories, products, cart, and so on).

Modules and their positioning

PrestaShop uses modules that can be freely placed in different sections of the page:

1. Go to Appearance → Positions.
2. Search for the module you want to move or rearrange.
3. Use the Move option to place it in a different section of the page.
4. You can also remove unnecessary modules or add new ones by clicking Add New Module.

Edit templates and files in the theme

Change the structure of template files

If you want to customize the page layout in more detail, you’ll need to edit your theme files:

1. Go to the theme’s directory: You can find it in /themes/your-theme-name/.
2. Edit files .tpl: Theme files in PrestaShop are mainly files .tplthat can be edited using the code editor.
3. Customize header.tplthe file, footer.tpl and product.tpl: These are responsible for the header, footer, and product page.

Changing the CSS for the page layout

If you want to edit styles, edit the CSS files:

1. Open /themes/your-theme-name/assets/css/ and find the file theme.css or custom.css.
2. Add or modify styles to customize the appearance of the page.
3. After the changes, clear the cache in Advanced → Performance.

Using the PrestaShop Visual Editor

In some versions of PrestaShop, a visual editor is available that allows you to customize the page using the drag and drop method:

1. Go to the Appearance → Pages.
2. Click the edit button for the selected page.
3. Use the editor to move items.