Customize Footer in magento2

Question

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?

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

@Watson .. have you gotten solution? if you have solution please post here. — Sarvesh Tiwari, Dec 28 '17 at 06:38

Key Shang · Answer 1 · 2017-09-16T04:12:36.077

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.

score 1 · Answer 2 · edited Apr 11 '19 at 18:23

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>

LM_Fielding · Answer 3 · 2016-05-31T10:35:47.233

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>

edited May 31 '16 at 10:35

answered May 31 '16 at 10:23

LM_Fielding

1,533
4
29
51

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 '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
Can you show me your layout code? – LM_Fielding May 31 '16 at 13:22
I have added default.xml file code in my question. please look into this. – Dhaval Jun 01 '16 at 06:19
Let us continue this discussion in chat. – Dhaval Jun 01 '16 at 06:52

Customize Footer in magento2

3 Answers3

Short Answer

Detail

Linked