Categories

Featured templates

PrestaShop 1.5.x. How to manage footer and header links

Rating: 4.0. From 3 votes.
Please wait...

The following tutorial is going to show you how to manage header and footer links in PrestaShop 1.5.x templates.

PrestaShop 1.5.x. How to manage footer and header links

  1. Log into your PrestaShop admin panel and navigate to Modules -> Positions.

    image1

  2. Here you should search for ‘Top of pages’ position and check which module is used to display header links.

  3. That would be Permanent links block in our case.

    image2

  4. Connect via FTP to your domain and navigate to themes\themeXXX\modules\blockpermanentlinks folder, where themeXXX is the theme you have installed. Here you should edit blockpermanentlinks-header.tpl file using any code editor.

  5. The following lines of code display header links:

    <ul id="header_links">
    <li><a href="{$link->getPageLink('index.php')}" class="header_links_home">{l s='home' mod='blockpermanentlinks'}</a></li>
    <li id="header_link_contact"><a href="{$link->getPageLink('contact', true)}" title="{l s='contact' mod='blockpermanentlinks'}">{l s='contact' mod='blockpermanentlinks'}</a></li>
    <li id="header_link_sitemap"><a href="{$link->getPageLink('sitemap')}" title="{l s='sitemap' mod='blockpermanentlinks'}">{l s='sitemap' mod='blockpermanentlinks'}</a></li>
    <li id="header_link_bookmark">
    <script type="text/javascript">writeBookmarkLink('{$come_from}', '{$meta_title|addslashes|addslashes}', '{l s='bookmark' mod='blockpermanentlinks' js=1}');</script>
    </li> 
    </ul>
    

    Each line of code represents one menu element. E.g. This line is displaying Sitemap menu element:

    <li id="header_link_sitemap"><a href="{$link->getPageLink('sitemap')}" title="{l s='sitemap' mod='blockpermanentlinks'}">{l s='sitemap' mod='blockpermanentlinks'}</a></li>
    
  6. You should remove line of code in case you would like to delete some menu element, or you should add a new line of code if you would like to add a new link to menu.

  7. Foe example, we will add a link to Specials page to header links section. URL to Specials page is http://domain.com/index.php?controller=prices-drop.

  8. You should edit themes\themeXXX\modules\blockpermanentlinks\blockpermanentlinks-header.tpl file using any code editor.

  9. Search for the following code:

    <ul id="header_links">
    <li><a href="{$link->getPageLink('index.php')}" class="header_links_home">{l s='home' mod='blockpermanentlinks'}</a></li>
    <li id="header_link_contact"><a href="{$link->getPageLink('contact', true)}" title="{l s='contact' mod='blockpermanentlinks'}">{l s='contact' mod='blockpermanentlinks'}</a></li>
    <li id="header_link_sitemap"><a href="{$link->getPageLink('sitemap')}" title="{l s='sitemap' mod='blockpermanentlinks'}">{l s='sitemap' mod='blockpermanentlinks'}</a></li>
    <li id="header_link_bookmark">
    <script type="text/javascript">writeBookmarkLink('{$come_from}', '{$meta_title|addslashes|addslashes}', '{l s='bookmark' mod='blockpermanentlinks' js=1}');</script>
    </li> 
    </ul>
    
  10. Add a new line of code

    <li id="header_link_specials"><a href="{$link->getPageLink('prices-drop')}" title="{l s='Specials' mod='blockpermanentlinks'}">{l s='Specials' mod='blockpermanentlinks'}</a></li>
    

    right below:

    <li id="header_link_contact"><a href="{$link->getPageLink('contact', true)}" title="{l s='contact' mod='blockpermanentlinks'}">{l s='contact' mod='blockpermanentlinks'}</a></li>
    
  11. Let me explain the meaning of the code:

    href="{$link->getPageLink('prices-drop')}"

    we should insert a part of URL to the page. The part which goes right after controller=. That would be prices-drop in our case.

    title="{l s='Specials'

    is the name of the button which is displayed on your site.

  12. Now we will check which modules are used to display links in footer of the site.

  13. Navigate to Modules -> Positions in PrestaShop admin panel and search for Footer position.

    image3

  14. These modules are used to display content for footer links section:

    image4

  15. CMS Block is displaying CMS pages. You can navigate to Modules -> Modules section, search for CMS block, Configure it and select which pages to display on the page.

  16. Our Stores link shows up in CMS block if Display in the footer option is enabled under Preferences -> Store Contacts section

    image5

  17. Categories column displays all the categories activated in Admin > Catalog > Categories.

  18. My account block for your website’s footer is displaying My account section. You can enable or disable that block under Modules -> Modules in your PrestaShop admin panel.

  19. My account links can be modified in /themes/themeXXX/modules/blockmyaccount/blockmyaccount.tpl file, where themeXXX is your theme folder name.

      <ul class="store_list"> <li><a href="{$link->getPageLink('history', true)}" title="">{l s='My orders' mod='blockmyaccount'}</a></li> {if $returnAllowed}<li><a href="{$link->getPageLink('order-follow', true)}" title="{l s='My merchandise returns' mod='blockmyaccount'}">{l s='My merchandise returns' mod='blockmyaccount'}</a></li>{/if} <li><a href="{$link->getPageLink('order-slip', true)}" title="{l s='My credit slips' mod='blockmyaccount'}">{l s='My credit slips' mod='blockmyaccount'}</a></li> <li><a href="{$link->getPageLink('addresses', true)}" title="{l s='My addresses' mod='blockmyaccount'}">{l s='My addresses' mod='blockmyaccount'}</a></li> <li><a href="{$link->getPageLink('identity', true)}" title="{l s='My personal info' mod='blockmyaccount'}">{l s='My personal info' mod='blockmyaccount'}</a></li> {if $voucherAllowed}<li><a href="{$link->getPageLink('discount', true)}" title="{l s='My vouchers' mod='blockmyaccount'}">{l s='My vouchers' mod='blockmyaccount'}</a></li>{/if} {$HOOK_BLOCK_MY_ACCOUNT} </ul>
  20. Information links can be modified in /themes/themeXXX/modules/blockcms/blockcms.tpl file, where themeXXX is your theme folder name.
  21. The following code is displaying Information section:

    <ul class="list-footer toggle_content clearfix">
    {if !$PS_CATALOG_MODE}<li class="first_item"><a href="{$link->getPageLink('prices-drop')}" title="{l s='Specials' mod='blockcms'}"><i class="icon-circle-arrow-right"></i>{l s='Specials' mod='blockcms'}</a></li>{/if}
    <li class="{if $PS_CATALOG_MODE}first_{/if}item"><a href="{$link->getPageLink('new-products')}" title="{l s='New products' mod='blockcms'}">{l s='New products' mod='blockcms'}</a></li>
    {if !$PS_CATALOG_MODE}<li class="item"><a href="{$link->getPageLink('best-sales')}" title="{l s='Top sellers' mod='blockcms'}"><i class="icon-circle-arrow-right"></i>{l s='Top sellers' mod='blockcms'}</a></li>{/if}
    {if $display_stores_footer}<li class="item"><a href="{$link->getPageLink('stores')}" title="{l s='Our stores' mod='blockcms'}">{l s='Our stores' mod='blockcms'}</a></li>{/if}
    <li class="item"><a href="{$link->getPageLink($contact_url, true)}" title="{l s='Contact us' mod='blockcms'}"><i class="icon-circle-arrow-right"></i>{l s='Contact us' mod='blockcms'}</a></li>
    {foreach from=$cmslinks item=cmslink}
    {if $cmslink.meta_title != ''}
    <li class="item"><a href="{$cmslink.link|addslashes}" title="{$cmslink.meta_title|escape:'htmlall':'UTF-8'}"><i class="icon-circle-arrow-right"></i>{$cmslink.meta_title|escape:'htmlall':'UTF-8'}</a></li>
    {/if}
    {/foreach}
    {*
    <li><a href="{$link->getPageLink('sitemap')}" title="{l s='sitemap' mod='blockcms'}"><i class="icon-circle-arrow-right"></i>{l s='Sitemap' mod='blockcms'}</a></li>
    *}
    </ul>
      
  22. Each line of code represents one menu element. The syntax is the same as in themes\themeXXX\modules\blockpermanentlinks\blockpermanentlinks-header.tpl file.

  23. Block contact info is displaying Contact us section. Navigate to Modules -> Modules in your PrestaShop admin panel and search for Block contact info in the list of blocks.

    image6

  24. Click Configure button to edit block.

    image9

  25. Social networking block is displaying Follow us section. Navigate to Modules -> Modules in your PrestaShop admin panel and search for Social networking block in the list of blocks. Click Configure link to edit it.

    image7

  26. Here you can update links for each social icon.

    image8

Feel free to check the detailed video tutorial below:

PrestaShop 1.5.x. How to manage footer and header links

Premium Prestashop Themes
This entry was posted in PrestaShop Tutorials and tagged archived_tutorial, footer, header, links, manage, Prestashop. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket