{"id":7962,"date":"2026-05-03T04:57:23","date_gmt":"2026-05-03T02:57:23","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=7962"},"modified":"2026-06-08T09:27:34","modified_gmt":"2026-06-08T07:27:34","slug":"cum-sa-editati-aspectul-paginii-in-prestashop-2","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/","title":{"rendered":"Cum s\u0103 edita\u021bi aspectul paginii \u00een PrestaShop"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">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&#8217;s source code.<\/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-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/#Context\" >Context<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/#Method_1_Layout_Settings_in_the_Admin_Panel\" >Method 1: Layout Settings in the Admin Panel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/#Method_2_Managing_Positions_and_Hooks\" >Method 2: Managing Positions and Hooks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/#Method_3_Editing_Template_Files_tpl\" >Method 3: Editing Template Files (.tpl)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/#Method_4_Visual_Page_Builders\" >Method 4: Visual Page Builders<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/#Distinction_CSS_vs_TPL\" >Distinction: CSS vs. TPL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/#Practical_Implications\" >Practical Implications<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/mybox.com\/help\/ro\/knowledgebase\/how-to-edit-page-layout-in-prestashop-2\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Context\"><\/span>Context<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">PrestaShop layouts are modular. They rely on &#8220;Hooks&#8221;\u2014designated locations on a page (like the header, footer, or left column)\u2014where specific modules can be attached. Controlling these hooks and the underlying <strong>Smarty (.tpl)<\/strong> templates allows you to completely transform the user interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_1_Layout_Settings_in_the_Admin_Panel\"><\/span>Method 1: Layout Settings in the Admin Panel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<\/div>\n\n<div id=\"mybox-1784994901\" 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\">This is the fastest way to change the basic structure (e.g., choosing between a full-width page or a page with a sidebar).<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Navigate to Themes:<\/strong> Go to <strong>Improve &gt; Design &gt; Theme &amp; Logo<\/strong>.<\/li>\n\n\n\n<li><strong>Choose Layouts:<\/strong> Click the <strong>Choose layouts<\/strong> button.<\/li>\n\n\n\n<li><strong>Assign Structures:<\/strong> You will see a list of page types (Category, Product, Contact, etc.). For each, you can select:\n<ul class=\"wp-block-list\">\n<li><strong>Full Width:<\/strong> No sidebars.<\/li>\n\n\n\n<li><strong>Three Columns:<\/strong> Both left and right sidebars.<\/li>\n\n\n\n<li><strong>Two Columns:<\/strong> One sidebar on either the left or right.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Save:<\/strong> Click save to apply the changes globally.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_2_Managing_Positions_and_Hooks\"><\/span>Method 2: Managing Positions and Hooks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to move a specific element, like moving the &#8220;Search Bar&#8221; from the top to the side, you use the Positions manager.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Open Positions:<\/strong> Go to <strong>Design &gt; Positions<\/strong>.<\/li>\n\n\n\n<li><strong>Locate the Hook:<\/strong> Find the specific area of the page (e.g., <code>displayNav1<\/code> or <code>displayHome<\/code>).<\/li>\n\n\n\n<li><strong>Reorder:<\/strong> Use the drag-and-drop handles to change the order of modules within that hook.<\/li>\n\n\n\n<li><strong>Unhook:<\/strong> If you want to remove a module from a specific spot without deleting the module itself, click the <strong>Unhook<\/strong> option.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_3_Editing_Template_Files_tpl\"><\/span>Method 3: Editing Template Files (.tpl)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For structural changes that the admin panel doesn&#8217;t support, you must edit the theme files via FTP.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Header and Footer:<\/strong> Edit <code>header.tpl<\/code> and <code>footer.tpl<\/code> in <code>\/themes\/[your-theme]\/templates\/_partials\/<\/code>.<\/li>\n\n\n\n<li><strong>Product Page:<\/strong> Edit <code>product.tpl<\/code> in <code>\/themes\/[your-theme]\/templates\/catalog\/<\/code>.<\/li>\n\n\n\n<li><strong>Best Practice:<\/strong> Always use a <strong>Child Theme<\/strong> when editing these files. This prevents your custom layout from being overwritten when the main theme is updated.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_4_Visual_Page_Builders\"><\/span>Method 4: Visual Page Builders<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In 2026, many PrestaShop users prefer &#8220;Drag &amp; Drop&#8221; modules which replace the default editor with a visual interface.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creative Elements:<\/strong> A popular Live Page Builder that allows you to design headers, footers, and product pages visually.<\/li>\n\n\n\n<li><strong>Default CMS Editor:<\/strong> For standard content pages, go to <strong>Design &gt; Pages<\/strong> and use the built-in editor to arrange text and media.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Distinction_CSS_vs_TPL\"><\/span>Distinction: CSS vs. TPL<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>TPL Files:<\/strong> Control the <strong>structure<\/strong> and logic (e.g., &#8220;Put the price <em>above<\/em> the Add to Cart button&#8221;).<\/li>\n\n\n\n<li><strong>CSS Files:<\/strong> Control the <strong>styling<\/strong> (e.g., &#8220;Make the price bold and blue&#8221;). Styles are typically found in <code>\/themes\/[your-theme]\/assets\/css\/custom.css<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Practical_Implications\"><\/span>Practical Implications<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cache Clearing:<\/strong> After editing <code>.tpl<\/code> or <code>.css<\/code> files, your changes may not appear immediately. You must go to <strong>Advanced Parameters &gt; Performance<\/strong> and click <strong>Clear Cache<\/strong>.<\/li>\n\n\n\n<li><strong>Smarty Compilation:<\/strong> While editing, set &#8220;Template compilation&#8221; to <strong>Recompile templates if the files have been updated<\/strong> to see changes in real-time.<\/li>\n\n\n\n<li><strong>Mobile View:<\/strong> Changing a three-column layout to full-width can significantly impact mobile readability. Always check your layout on a smartphone after making structural changes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Whether you are using the native &#8220;Choose Layouts&#8221; tool for quick structural changes or diving into <code>.tpl<\/code> 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.<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[58],"manual_kb_tag":[8878,8879,8880,8881,8882,8883,8884,1174,5100,8877],"class_list":["post-7962","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-web-applications-cms","manual_kb_tag-layout-settings","manual_kb_tag-choose-layouts","manual_kb_tag-positions-manager","manual_kb_tag-module-hooks","manual_kb_tag-hooks-and-modules","manual_kb_tag-smarty-templates","manual_kb_tag-tpl-files","manual_kb_tag-admin-panel","manual_kb_tag-theme-management","manual_kb_tag-prestashop-layout"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/7962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/7962\/revisions"}],"predecessor-version":[{"id":7963,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb\/7962\/revisions\/7963"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/media?parent=7962"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manualknowledgebasecat?post=7962"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/ro\/wp-json\/wp\/v2\/manual_kb_tag?post=7962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}