2

I know how to remove default Magento2 footer link.

in default.xml file add below code.

<referenceBlock name="footer_links" remove="true"/>

also I know how to add new link in footer using default.xml file

<referenceContainer name="footer">           
        <block class="Magento\Framework\View\Element\Html\Link\Current" name="Our Store">
            <arguments>
                <argument name="label" xsi:type="string">Our Store</argument>
                <argument name="path" xsi:type="string">our_story</argument>
            </arguments>
        </block>
    </referenceContainer>

but I want to add footer link like I attach image for that how can I do formatting and code so I get what I want?

enter image description here

default.xml file code is below.And this is default magento code I didn't change anything in this file. now I want to add footer link like I show in image above.How can I do? In magento 1.x we go to footer.phtml file and place code or call cms block or page. can we do same in magento2 or do only using xml?

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
   <referenceContainer name="header.panel">
       <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
           <arguments>
               <argument name="css_class" xsi:type="string">header links</argument>
           </arguments>
       </block>
   </referenceContainer>
   <referenceBlock name="logo">
       <arguments>
           <argument name="logo_img_width" xsi:type="number">148</argument>
           <argument name="logo_img_height" xsi:type="number">43</argument>
       </arguments>
   </referenceBlock>
   <referenceContainer name="footer">
       <block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" after="footer_links" template="switch/stores.phtml"/>
   </referenceContainer>
   <referenceBlock name="report.bugs" remove="true"/>
   <move element="copyright" destination="before.body.end"/>
</body>
</page>

enter preformatted text here

Improve this question
4
  • have you done 5 columns footer?
    – Bojjaiah
    Nov 30, 2016 at 7:33
  • Have you got solution ? Have you any custom theme?
    – Pawan
    Aug 17, 2017 at 4:55
  • @Watson .. have you gotten solution? if you have solution please post here.
    – Sarvesh Tiwari
    Dec 28, 2017 at 6:38
  • @ErSarveshVTiwari no can't find solution.
    – Dhaval
    Dec 28, 2017 at 7:16

3 Answers 3

Reset to default
6

Short Answer

My solution is remove the footer_links and add a footer block in footer, then add any codes in the block to create a footer I want.

Detail

In /app/design/frontend/vendor/theme/Magento_Theme/layout/default.xml, add codes:

<referenceBlock name="footer_links" remove="true"/>
<referenceContainer name="footer">
    <block class="Magento\Cms\Block\Block" name="footer_block">
        <arguments>
            <argument name="block_id" xsi:type="string">footer_block</argument>
        </arguments>
    </block>
</referenceContainer>

In dashboard - content - blocks, add a new block which identifier is "footer_block", add the footer codes in it. Below is a code example, you could add any html or js in it.

<ul class="footer links">
    <h5>How Can We Help?</h5>
    <li class="nav item">
        <a href="#">Search Terms</a>
    </li>
    <li class="nav item">
        <a href="#" data-action="advanced-search">Advanced Search</a>
    </li>
    <li class="nav item">
        <a href="#">Contact Us</a>
    </li>
    <li class="nav item">
        <a href="#">Orders and Returns</a>
    </li>
</ul>
...
(other ul or image codes)

Save the block.

Edit the css file.

Refresh cache.

Improve this answer
1

On one of my projects I added footer columns with links and for better mobile functionality I had to make collapsible functionality so I did the following

<block class="Magento\Framework\View\Element\Template" name="footer-middle-navigate" template="Magento_Theme::html/collapsible.phtml">
<arguments>
    <argument name="block_title" translate="true" xsi:type="string">Navigation</argument>
    <argument name="block_css" xsi:type="string">block-collapsible-nav</argument>
</arguments>
<block class="Magento\Framework\View\Element\Html\Links" name="footer_navigation">
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="our-shops">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">Our shops</argument>
            <argument name="path" xsi:type="string">/our-shop.html</argument>
        </arguments>
    </block>
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="faq">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">FAQ</argument>
            <argument name="path" xsi:type="string">/faq.html</argument>
        </arguments>
    </block>
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="blog">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">Blog</argument>
            <argument name="path" xsi:type="string">blog.html</argument>
        </arguments>
    </block>
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="contact">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">Contact</argument>
            <argument name="path" xsi:type="string">contact/</argument>
        </arguments>
    </block>
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="my-account">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">My account</argument>
            <argument name="path" xsi:type="string">customer/account/</argument>
        </arguments>
    </block>
    <block class="Magento\Framework\View\Element\Html\Link\Current" name="my-orders">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">My orders</argument>
            <argument name="path" xsi:type="string">sales/order/history/</argument>
        </arguments>
    </block>
</block>

Improve this answer
0

The way that I find easiest is to find the relevant xml file that your theme is inheriting from. I assume you're either using the blank theme or inheriting from it.

Here you can see how the footer links were originally added, what you're inheriting from:

magento\vendor\magento\module-theme\view\frontend\layout.xml

Docs, we're looking for something like parameters for this: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#ref_container

Closest I can get so far:

<block class="Magento\Framework\View\Element\Link" name="account_link" group="navigation-sections">
    <arguments>
        <argument name="title" translate="true" xsi:type="string">Account</argument>
        <argument name="use_force" xsi:type="boolean">true</argument>
        <argument name="text" xsi:type="string"><![CDATA[<!-- Account links -->]]></argument>
    </arguments>
</block>
Improve this answer
8
  • 1
    I want to add column header like "About Us" , "Shop Toys" . "Account" , "Customer Services" , "Newsletter" and how can I do that?
    – Dhaval
    May 31, 2016 at 10:29
  • Not sure. Scouring the files now for you, I'd like an answer too. The documentation is lousy.
    – LM_Fielding
    May 31, 2016 at 10:30
  • Editing into answer
    – LM_Fielding
    May 31, 2016 at 10:32
  • brother it's not working.
    – Dhaval
    May 31, 2016 at 10:53
  • if you see my image there is first column " About Us" and it has four sub category like our story , our store etc.. I want that can you tell how can I set this?
    – Dhaval
    May 31, 2016 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.