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

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

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.

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>

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>
  • I want to add column header like "About Us" , "Shop Toys" . "Account" , "Customer Services" , "Newsletter" and how can I do that? – Dhaval May 31 '16 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 '16 at 10:30
  • Editing into answer – LM_Fielding May 31 '16 at 10:32
  • brother it's not working. – Dhaval May 31 '16 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 '16 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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