{"id":4529,"date":"2017-05-15T09:14:53","date_gmt":"2017-05-15T09:14:53","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=4529"},"modified":"2018-11-01T20:30:14","modified_gmt":"2018-11-01T11:00:14","slug":"add-cms-page-prestashop-1-6-x-linked-header-footer-menu","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/prestashop-blog\/add-cms-page-prestashop-1-6-x-linked-header-footer-menu\/","title":{"rendered":"How to add a CMS page on PrestaShop 1.6.x and 1.7.x linked with header and footer menu?"},"content":{"rendered":"

PrestaShop<\/a> is purely an eCommerce platform\u00a0and possesses a great CMS capability too. Though you don’t have the fully fledged controls like in the CMS platforms, you can still achieve all your basic requirements as a CMS with PrestaShop.\u00a0In this post, taking PrestaShop 1.6.x and 1.7.x\u00a0as the target version, I am going to explain how you can add a CMS page on\u00a0PrestaShop store. Furthermore, we will also see how you can link that page to the header\/footer menu.<\/p>\n

Adding a CMS page on PrestaShop 1.6.x<\/h2>\n

Step 1:<\/strong> Log into your PrestaShop back-office as an admin user.<\/p>\n

Step 2:<\/strong> Go to Preferences>>CMS<\/strong>.\u00a0 Here you will see all the CMS pages created on your PrestaShop store.<\/p>\n

\"Preferences-CMS\"<\/a><\/p>\n

Step 3:<\/strong> Click on \u201cAdd New CMS Page\u201d<\/strong> button at the top right corner of the page.<\/p>\n

\"Add<\/a><\/p>\n

Step 4:<\/strong> Next, you need to fill out all the required fields. After filling the fields, just enable the page and “Save” the changes.<\/p>\n

\"Save<\/a><\/p>\n

Step 5:<\/strong> Note down the CMS page ID displayed in the first column of the CMS pages list. You will need this ID later.<\/p>\n

Step 6:<\/strong> Now, go to Module>>Positions<\/strong>, and check which module is showing the Top horizontal menu in your template. I found it in “displayTop” section of the position in my version.<\/p>\n

\"Module-Positions\"<\/a><\/p>\n

Adding a CMS page on PrestaShop 1.7.x<\/h2>\n

Similarly for adding a CMS page in the Prestashop version 1.7.x, follow the steps mentioned-below:<\/p>\n

Step 1:<\/strong>\u00a0Log into your PrestaShop back-office as an admin user.<\/p>\n

Step 2:<\/strong>\u00a0Go to\u00a0Dashboard>>Improve>>Design>>Pages<\/strong> as shown in the image below:<\/p>\n

\"design\"<\/a><\/p>\n

Step 3:<\/strong>\u00a0Click on\u00a0\u201cAdd New Page\u201d\u00a0button at the top right corner of the page.<\/p>\n

\"new-page\"<\/a><\/p>\n

Step 4:<\/strong>\u00a0Next, you need to fill out all the required fields. After filling the fields, just enable the page and \u201cSave\u201d the changes.<\/p>\n

\"create-cms-page\"<\/a><\/p>\n

Step 5:<\/strong> Note down the CMS page ID displayed in the first column of the CMS pages list. You will need this ID later. Save the changes.<\/p>\n

Adding a link of the CMS page to the header menu<\/h2>\n

Step 1:<\/strong> Connect to your site\u2019s files by logging into your FTP account. You can use FileZilla<\/a> to access the files or the cPanel access<\/a> if you host has provided one.<\/p>\n

Step 2:<\/strong> Now, navigate to the following file directory:<\/p>\n

themes\/themeXXX\/modules\/blockpermanentlinks\u00a0\u00a0\u00a0<\/em> <\/strong><\/p>\n

PS: \u201cthemeXXX\u201d is the name of your theme.<\/p>\n

Edit, blockpermanentlinks-header.tpl<\/strong> file. You can use any text or code editor. I am using Netbeans for editing.<\/p>\n

Step 3:<\/strong> Each of the list element in the code here represent one menu element in the Header. For example this code represents a header menu element named sitemap:<\/p>\n

<li id="header_link_sitemap"><a href="{$link->getPageLink('sitemap')|escape:'html'}" title="{l s='sitemap' mod='blockpermanentlinks'}">{l s='sitemap' mod='blockpermanentlinks'}<\/a><\/li>\r\n<\/pre>\n
Step 4:<\/strong> Copy that line of code and paste it on a new line next to the one that you have copied.<\/p>\n
Step 5:<\/strong> Now, change the copied code to this one:<\/p>\n
<li><a href="{$link->getCMSLink('8', 'new')|escape:'html'}" title="{l s='new' mod='blockpermanentlinks'}">{l s='new' mod='blockpermanentlinks'}<\/a><\/li>\r\n<\/pre>\n
Step 6:<\/strong> Save the file. You have now added a link to the CMS page named \u201cnew\u201d which had the Page ID \u201c8\u201d.<\/p>\n
Adding a link of the CMS page to the Footer menu<\/h2>\n
How to Add a link of the CMS page to the Footer menu of Prestashop 1.7.x?<\/h3>\n
We will now link the same page to the footer menu of Prestashop 1.7.x.<\/p>\n
Step 1:<\/strong> Go to Design \u2013 > Link widget<\/strong>. This will display the blocks that are currently displayed on your site.<\/p>\n
\"link-widget\"<\/a><\/p>\n
Step 2:\u00a0<\/strong>In\u00a0order\u00a0to\u00a0open\u00a0a\u00a0Block\u00a0setting\u00a0from\u00a0the\u00a0existing\u00a0ones,\u00a0click\u00a0the\u00a0Edit\u00a0button\u00a0corresponding\u00a0to\u00a0it.<\/p>\n
\"link-block\"<\/a><\/p>\n
In order to activate the newly created page and make it visible, select the checkbox corresponding to it\u2019s title. You can find the link to your CMS page in the footer.<\/p>\n
\"link-widget-details\"<\/a><\/p>\n
We will now link the same page to the footer menu.<\/p>\n
How to Add a link of the CMS page to the Footer menu of Prestashop 1.6.x?<\/h3>\n
Follow the steps mentioned below to link the same page to the footer menu of Prestashop 1.6.x.<\/p>\n
Step 1:<\/strong> Go to your Admin panel and navigate to \u201cModules & Services >> Modules & Services\u201d<\/strong> and search \u201cCMS Block\u201d<\/strong> module.<\/p>\n
\"Admin<\/a><\/p>\n
Step 2:<\/strong> Click on the Configure<\/strong> button.<\/p>\n
Step 3:<\/strong> Look for the \u201cCONFIGURATION OF THE VARIOUS LINKS IN THE FOOTER\u201d section. Here, if you find your newly added CMS page in the list.<\/p>\n
\"Link<\/a><\/p>\n
Step 4:<\/strong> Enable your page by clicking on the check-box in the first column. Click the \u201cSave\u201d button to apply the changes. You have now added a link to your CMS page on the Footer menu.<\/p>\n
An Easier way to Create CMS Pages on Prestashop<\/h2>\n
Well, that was quite a show. We created a page, edited the codes, navigated from pages to pages and finally linked it to the Header and Footer menu. But that was just a single page we created, what if you need to link more pages? Each time editing the codes is a quite tiring job.<\/p>\n
Is there any easier way to do that without messing with the code?<\/h3>\n
Yes, Of Course! The PrestaShop page Maker module<\/a>\u00a0by Knowband has been designed to serve the exact purpose. Frankly, there is a lot more it can offer<\/a>. For now, let\u2019s see how can you use this module to create CMS pages and add them to the header link without editing the code.<\/p>\n
Step 1:<\/strong> Go to Knowband Page Maker<\/strong> menu in the left menu bar.<\/p>\n
\"Knowband<\/a><\/p>\n
Step 2:<\/strong> In the next screen, Click on \u201cAdd new page\u201d<\/strong> button.<\/p>\n
Step 3:<\/strong> The Add new page interface consists of the four tabs. In the Common Settings<\/strong> tab, fill out all the details.\u00a0 You can give a Page Title, Page Link Name, and custom page URL.<\/p>\n
Step 4:<\/strong> After filling out the details, You will see an option at the end of the page \u201cDisplay on Menu Header\u201d<\/strong>. You need to just enable this option and your newly added page will be instantly linked on the Header Menu.<\/p>\n
\"Display<\/a><\/p>\n
In addition, to the ease of creation of the CMS pages, the Prestashop CMS Page Maker addon offers a number of other features. Some of them are discussed below:<\/p>\n