Magento – Customize Footer in magento2

magento2

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

Best Answer

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.

Related Topic