{"id":588,"date":"2025-12-18T14:40:28","date_gmt":"2025-12-18T13:40:28","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=588"},"modified":"2026-02-18T23:14:04","modified_gmt":"2026-02-18T22:14:04","slug":"how-to-edit-page-layout-in-prestashop","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-edit-page-layout-in-prestashop\/","title":{"rendered":"How to edit page layout in PrestaShop?"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<div class=\"wp-block-onethird-callout-box onethird-callout-wrap\"><div class=\"onethird-callout onethird-callout--hint\" style=\"--ot-bg:#EAFFF7;--ot-border:#C8E8D8;--ot-text:#6F7C88;--ot-title:#384048;--ot-body:#6F7C88;--ot-icon:#384048;border-radius:6px;padding:16px\"><div class=\"onethird-callout__head\"><span class=\"onethird-callout__icon\"><svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"none\" stroke=\"#384048\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 10h4v12H2V10zm20 1c0-1.1-.9-2-2-2h-6.31l.95-4.57.02-.2c0-.26-.11-.5-.29-.68L13.17 2 7.59 7.59C7.22 7.95 7 8.45 7 9v11c0 1.1.9 2 2 2h8c.82 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z\"><\/path><\/svg><\/span><div class=\"onethird-callout__title\">Note<\/div><\/div><div class=\"onethird-callout__body\"><em><strong>&#8220;Drupal&#8221;<\/strong><\/em> and <em><strong>&#8220;PrestaShop&#8221;<\/strong><\/em> will be available at a later time, but not during the &#8220;Early Access&#8221; phase.<\/div><\/div><div class=\"onethird-callout__separator\" style=\"height:18px\" aria-hidden=\"true\"><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;ll show you how to customize the look of your store step by step.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-edit-page-layout-in-prestashop\/#Editing_the_page_layout_in_the_admin_panel\" >Editing the page layout in the admin panel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-edit-page-layout-in-prestashop\/#Edit_templates_and_files_in_the_theme\" >Edit templates and files in the theme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-edit-page-layout-in-prestashop\/#Using_the_PrestaShop_Visual_Editor\" >Using the PrestaShop Visual Editor<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Editing_the_page_layout_in_the_admin_panel\"><\/span>Editing the page layout in the admin panel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Change the layout in theme settings<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">PrestaShop offers the ability to customize the layout without having to edit the code. To do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log in to the administration panel.<\/li>\n\n\n\n<li>Go to <strong>Appearance<\/strong> \u2192 <strong>Themes Logos<\/strong>.<\/li>\n\n\n\n<li>Click the <strong>Customize<\/strong> button next to the theme you&#8217;re currently using.<\/li>\n\n\n\n<li>In the <strong>Page Layout<\/strong> section, you can choose a layout for different store pages (homepage, categories, products, cart, and so on).<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Modules and their positioning<\/strong><\/h4>\n\n\n\n<\/div>\n\n<div id=\"mybox-2142085959\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">PrestaShop uses modules that can be freely placed in different sections of the page:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance<\/strong> \u2192 <strong>Positions<\/strong>.<\/li>\n\n\n\n<li>Search for the module you want to move or rearrange.<\/li>\n\n\n\n<li>Use <strong>the Move<\/strong> option to place it in a different section of the page.<\/li>\n\n\n\n<li>You can also remove unnecessary modules or add new ones by clicking <strong>Add New Module<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Edit_templates_and_files_in_the_theme\"><\/span>Edit templates and files in the theme<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Change the structure of template files<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to customize the page layout in more detail, you&#8217;ll need to edit your theme files:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Go to the theme&#8217;s directory<\/strong>: You can find it in <code>\/themes\/your-theme-name\/<\/code>.<\/li>\n\n\n\n<li><strong>Edit files <code>.tpl<\/code><\/strong>: Theme files in PrestaShop are mainly files <code>.tpl<\/code>that can be edited using the code editor.<\/li>\n\n\n\n<li><strong>Customize <code>header.tpl<\/code>the file, <code>footer.tpl<\/code> and <code>product.tpl<\/code><\/strong>: These are responsible for the header, footer, and product page.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Changing the CSS for the page layout<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to edit styles, edit the CSS files:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open <code>\/themes\/your-theme-name\/assets\/css\/<\/code> and find the file <code>theme.css<\/code> or <code>custom.css<\/code>.<\/li>\n\n\n\n<li>Add or modify styles to customize the appearance of the page.<\/li>\n\n\n\n<li>After the changes, clear the cache in <strong>Advanced<\/strong> \u2192 <strong>Performance<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_the_PrestaShop_Visual_Editor\"><\/span>Using the PrestaShop Visual Editor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In some versions of PrestaShop, a visual editor is available that allows you to customize the page using the drag and drop method:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>the Appearance<\/strong> \u2192 <strong>Pages<\/strong>.<\/li>\n\n\n\n<li>Click the edit button for the selected page.<\/li>\n\n\n\n<li>Use the editor to move items.<\/li>\n<\/ol>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[25,58,125],"manual_kb_tag":[2876,2877,2878,2879,2880,2881,2882,330,445,571,849,1174,2875],"class_list":["post-588","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-hosting","manualknowledgebasecat-web-applications-cms","manualknowledgebasecat-websites","manual_kb_tag-theme-settings","manual_kb_tag-appearance-settings","manual_kb_tag-module-positioning","manual_kb_tag-add-new-module","manual_kb_tag-module-management","manual_kb_tag-template-files","manual_kb_tag-edit-templates","manual_kb_tag-administration-panel","manual_kb_tag-prestashop","manual_kb_tag-online-store","manual_kb_tag-visual-editor","manual_kb_tag-admin-panel","manual_kb_tag-page-layout"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/588\/revisions"}],"predecessor-version":[{"id":4959,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/588\/revisions\/4959"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=588"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}