1

I have create custom magento 2 theme based on magento blank theme. how can i customize the footer as show image below enter image description here

1 Answer 1

0

You can create default.xml file here in your custom theme

app/design/frontend/Vendor/Theme/Magento_Theme/layout/default.xml

Content for this file is ..

<?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>
        <referenceBlock name="footer_links" remove="true" />
        <referenceBlock name="form.subscribe" remove="true" />
        <referenceBlock name="copyright" remove="true" />

        <referenceContainer name="footer-container">
            <container name="footer" htmlTag="div" htmlClass="footer-top" before="-">
                <container name="footer_main.content" htmlTag="div" htmlClass="footer content">
                    <container name="footer_main.content.row" htmlTag="div" htmlClass="row">
                        <container name="footer_main.content.logo" htmlTag="div" htmlClass="footer-logo">
                            <block class="Magento\Framework\View\Element\Template" name="footer.logo" before="-" template="Magento_Theme::html/footer/logo.phtml"/>
                        </container>
                        <container name="footer_main.content.row.social" htmlTag="div" htmlClass="footer-links">
                            <block class="Magento\Framework\View\Element\Template" name="footer.links" after="-" template="Magento_Theme::html/footer/links.phtml"/>
                            <block class="Magento\Theme\Block\Html\Footer" name="copyright.custom" template="Magento_Theme::html/copyright.phtml" after="footer_main.content.row.social" />
                        </container>
                    </container>
                </container>
            </container>
        </referenceContainer>
    </body>
</page>

After adding this content in your xml, you need to create template files.. We will create two new template files and we have used one default template file for copyright text.

So create first template file here

app/design/frontend/Vendor/Theme/Magento_Theme/templates/html/footer/logo.phtml

Content for this file is ...

<?php echo $this->getLayout()->createBlock("Magento\Theme\Block\Html\Header\Logo")->setTemplate("Magento_Theme::html/header/logo.phtml")->toHtml(); ?>

<a href="external-link">External Link</a>

We will create another template file here.

app/design/frontend/Vendor/Theme/Magento_Theme/templates/html/footer/links.phtml

Content for this file is ..

<div class="col-xs-12 col-sm-6 col-lg-4 footer-links">
    <a href="test-1">Footer link 1</a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 footer-links">
    <a href="test-2">Footer link 2</a>
</div>
<div class="col-xs-12 col-lg-4 footer-links">
    <a href="test-3">Footer link 3</a>
</div>

Note : You can add your css to display that all blocks properly here..

After adding above files you need to run below commands

php bin/magento cache:clean
php bin/magento cache:flush

Then you can see output as below attached Image..

enter image description here

Hope this will help you!

6
  • Is above solution helpful to you ? Oct 20, 2019 at 12:55
  • I need to add copyright text under footer links also ..
    – Dev Space
    Oct 21, 2019 at 13:27
  • I've updated this file there app/design/frontend/Vendor/Theme/Magento_Theme/layout/default.xml, Please check this will work for you. Oct 21, 2019 at 13:38
  • You need to do some designing changes there Oct 21, 2019 at 13:38
  • 1
    Thanks kishan your solution work for me ..
    – Dev Space
    Oct 21, 2019 at 16:27

Your Answer

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

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