Custom Footer for Magento 2

What you get

Magento 2 Footer

Panth Footer replaces the default Magento storefront footer with a configurable one. It adds a newsletter section, a grid of two to four footer columns (logo and about text, two link columns, and a contact column), a bottom bar with copyright text, payment icons and bottom links, and a floating back-to-top button. All content is entered in the admin configuration; no template editing is needed for day-to-day changes.

The module ships two template sets. The base layout uses vanilla JavaScript templates that work on Luma; when the Hyva theme is active the default_hyva layout handle switches the newsletter and back-to-top blocks to Alpine.js templates. It is used by store owners and content teams who want to manage footer content from the admin.

Product page: kishansavaliya.com/magento-2-footer.html

Features

• Footer grid with a "Footer Layout" of 2, 3 or 4 columns; each column can be enabled or disabled separately
• Column 1 shows an optional title, the store logo, an about text and social media icons
• Columns 2 and 3 are link lists entered as JSON arrays in the admin; each link can set a target
• Column 4 shows a phone number (rendered as a tel: link), an email address (rendered as a mailto: link), a physical address and working hours
• Social media links for Facebook, Twitter/X, Instagram, LinkedIn, YouTube and Pinterest, rendered as inline SVG icons; an empty URL hides that icon
• Newsletter section with configurable title, subtitle, benefits list, placeholder and button text; the form posts to Magento's own newsletter/subscriber/new action with fetch() and shows Magento's own result message without a page reload
• Back-to-top button at the bottom right or bottom left that appears after the page is scrolled more than 300 pixels and scrolls smoothly to the top. It is not rendered on the cart and checkout pages (checkout_cart_index and checkout_index_index remove it) so it never covers the order buttons or form fields, and it uses z-index 30. Floating elements share one bottom stack per side: back-to-top sits at the bottom, the WhatsApp button above it, the EU withdrawal tab (phones and tablets) above that. Each element adds --panth-bottom-bar-offset (bottom notification bars), the slot variables --panth-float-slot-btt-<side> and --panth-float-slot-wa-<side> of the elements below it, and --panth-float-edge (24px, 16px below 768px). The button hides while a drawer, modal, mini cart, open search or mobile menu is shown. Up to 1024px the footer adds bottom padding equal to the tallest float column plus 8px, so the last footer links can always be scrolled clear of the floats.
• Bottom bar with copyright text ({{year}} is replaced with the current year), Visa, Mastercard, PayPal and Amex icons, and a row of bottom links entered as JSON
• Admin JSON fields have "Beautify JSON", "Minify JSON" and "Validate JSON" buttons and are pretty-printed on page load
• Every setting is available at default, website and store view scope
• Removes the stock Luma and Hyva footer blocks (footer links, newsletter form, store switcher, copyright, report bugs link) from the layout
• Colours are read from CSS variables that fall back to the values in etc/theme-config.json; the module registers itself with the "Panth_Core" theme configuration so the colours can be managed centrally

Usage

Layout changes

view/frontend/layout/default.xml does the following on every frontend page:

• Removes these blocks and containers: footer_links, cms_footer_links_container, form.subscribe, newsletter_head_components, store_switcher, copyright, report.bugs, absolute_footer, footer-content and footer.newsletter.
• Adds panth.footer (template Panth_Footer::footer.phtml) to the footer container, with the children panth.footer.newsletter (template Panth_Footer::luma/newsletter.phtml) and panth.footer.logo (alias logo, class Magento\Theme\Block\Html\Header\Logo, template Panth_Footer::logo.phtml).
• Adds panth.footer.back_to_top (template Panth_Footer::luma/back-to-top.phtml) to before.body.end.
• Adds Font Awesome 6.5.1 from cdnjs to the page head. The stylesheet carries a subresource integrity hash (sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==) and crossorigin="anonymous", so the browser refuses a modified file.
• Adds Panth_Footer::css/footer-fonts.css, which declares the DM Sans font (weights 400 to 800, font-display: swap) from the self-hosted files view/frontend/web/fonts/dm-sans-latin.woff2 and dm-sans-latin-ext.woff2. No request is made to Google Fonts. DM Sans is licensed under the SIL Open Font License 1.1; the license text is in view/frontend/web/fonts/OFL.txt.

view/frontend/layout/default_hyva.xml switches panth.footer.newsletter to Panth_Footer::hyva/newsletter.phtml and panth.footer.back_to_top to Panth_Footer::hyva/back-to-top.phtml. According to the layout comment this handle is added only when the Hyva theme is active.

Managing content

Column links and bottom links are JSON arrays such as [{"title":"Contact Us","url":"/contact"},{"title":"Blog","url":"https://blog.example.com","target":"_blank"}]. Newsletter benefits are a JSON array of strings. The admin fields for these settings use the JsonBeautifier renderer, which adds format, minify and validate buttons.

Newsletter behaviour

Both newsletter templates submit the form with fetch() to newsletter/subscriber/new, including the form key and the X-Requested-With: XMLHttpRequest header. Magento's controller always answers with a redirect and stores its result message in the mage-messages cookie. After the request the templates read that cookie, show the message text (success styling only when every message is a success message) and remove the cookie so the message is not shown again on the next page. When no message is found, or the request fails, "Something went wrong. Please try again." is shown. Subscribers are stored by Magento's newsletter module.

Templates that can be overridden

• view/frontend/templates/footer.phtml (columns and bottom bar, shared by both themes)
• view/frontend/templates/logo.phtml (footer logo)
• view/frontend/templates/luma/newsletter.phtml and view/frontend/templates/luma/back-to-top.phtml (vanilla JavaScript, inline styles)
• view/frontend/templates/hyva/newsletter.phtml and view/frontend/templates/hyva/back-to-top.phtml (Alpine.js and Tailwind classes)

Styling

view/frontend/web/css/source/_module.less contains the Luma overrides and is compiled into Luma's styles-m.css and styles-l.css by Magento's LESS pipeline.

Documentation

USER_GUIDE.md covers installation, checking that the module is active, general settings, configuring each column, social media links, the newsletter section, the back-to-top button, the bottom bar, colour customization and troubleshooting.

Changelog

See CHANGELOG.md.

Compatibility

Composer constraints on Magento packages: magento/framework ^103.0, magento/module-store ^101.0, magento/module-theme ^101.0, magento/module-cms ^104.0, magento/module-config ^101.0.

Requirements

• Magento Open Source or Adobe Commerce 2.4.4 to 2.4.8
• PHP 8.1, 8.2, 8.3 or 8.4
• mage2kishan/module-core ^1.0 (module "Panth_Core"); it is declared in require and Composer installs it automatically. The module's etc/module.xml sequences after "Panth_Core", "Magento_Store", "Magento_Theme" and "Magento_Cms".
• No suggested packages are declared.

Installation

composer require mage2kishan/module-footer
bin/magento module:enable Panth_Core Panth_Footer
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

setup:di:compile is only needed in production mode. setup:static-content:deploy -f is listed because the module ships a LESS file under view/frontend/web.

Check that the module is enabled:

bin/magento module:status Panth_Footer

Configuration

Admin path: Stores > Configuration > Panth Extensions > Footer Configuration. The same page is reachable from the admin menu entry Panth Extensions > Footer > Configuration, which the module adds in etc/adminhtml/menu.xml.

All settings live under the config path prefix panth_footer/. Defaults come from etc/config.xml.

General Settings

Config paths: panth_footer/general/enabled, panth_footer/general/layout.

Column 1 - Logo and About

Config paths: panth_footer/column1/enabled, panth_footer/column1/show_logo, panth_footer/column1/title, panth_footer/column1/content, panth_footer/column1/show_social.

Column 2 - Quick Links

Config paths: panth_footer/column2/enabled, panth_footer/column2/title, panth_footer/column2/links.

Column 3 - Customer Service

Config paths: panth_footer/column3/enabled, panth_footer/column3/title, panth_footer/column3/links.

Column 4 - Contact Information

Config paths: panth_footer/column4/enabled, panth_footer/column4/title, panth_footer/column4/show_contact_info, panth_footer/column4/phone, panth_footer/column4/email, panth_footer/column4/address, panth_footer/column4/working_hours.

Social Media Links

Only relative, http and https URLs are rendered; a URL with any other scheme hides that icon.

Config paths: panth_footer/social/facebook, panth_footer/social/twitter, panth_footer/social/instagram, panth_footer/social/linkedin, panth_footer/social/youtube, panth_footer/social/pinterest.

Newsletter Section

Config paths: panth_footer/newsletter/enabled, panth_footer/newsletter/title, panth_footer/newsletter/subtitle, panth_footer/newsletter/benefits, panth_footer/newsletter/placeholder_text, panth_footer/newsletter/button_text.

Back to Top Button

Config paths: panth_footer/back_to_top/enabled, panth_footer/back_to_top/position.

Bottom Bar

Config paths: panth_footer/bottom/show_payment_icons, panth_footer/bottom/copyright_text, panth_footer/bottom/show_footer_links, panth_footer/bottom/footer_links.

The group comments in the admin note that footer, newsletter and back-to-top colours are not set here; they are managed through the Theme Customizer provided by "Panth_Core".

Uninstallation

bin/magento module:disable Panth_Footer
composer remove mage2kishan/module-footer
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

The module creates no tables. Saved configuration values under panth_footer/* remain in core_config_data after removal; delete them manually if they are no longer wanted. mage2kishan/module-core stays installed if other modules depend on it.

License

Commercial software license. See LICENSE.txt in this repository.

Developer Notes

• Module name: Panth_Footer
• Composer package: mage2kishan/module-footer
• Namespace: Panth\Footer
• Panth\Footer\ViewModel\FooterData: view model passed to the templates as footer_view_model; exposes isEnabled(), getLayout(), getGridClasses(), getColumnData(int), getSocialLinks(), getSocialIcon(string), getCopyrightText(), showPaymentIcons(), showFooterLinks(), getFooterLinks(), isNewsletterEnabled(), getNewsletterTitle(), getNewsletterSubtitle(), getNewsletterBenefits(), getNewsletterPlaceholder(), getNewsletterButtonText(), isBackToTopEnabled(), getBackToTopPosition() and getAllowedHtmlTags()
• Panth\Footer\Helper\Data: reads the panth_footer/* configuration at store scope, parses the JSON fields with Magento\Framework\Serialize\Serializer\Json, and provides colour getters that read theme_customizer/* paths with hard-coded fallbacks
• Panth\Footer\Block\Adminhtml\Form\Field\JsonBeautifier: admin field renderer for the JSON textareas
• Panth\Footer\Model\Config\Source\Layout and Panth\Footer\Model\Config\Source\Position: option sources for "Footer Layout" and "Button Position"
• Panth\Footer\Model\Config\Backend\Enabled: backend model of "Enable Custom Footer"; it extends Magento\Framework\App\Config\Value without additional logic
• Panth\Footer\Model\Config\Backend\Json: backend model of the four JSON fields; validates the value on save and stores it compact
• Panth\Footer\Observer\AddEnabledHandle: frontend layout_load_before observer that adds the panth_footer_enabled handle (stock footer removal and footer CSS) while "Enable Custom Footer" is Yes
• etc/frontend/di.xml adds Panth_Footer to the registeredModules argument of Panth\Core\ViewModel\ThemeConfig; etc/theme-config.json holds the default colour values
• ACL resources: Panth_Footer::footer ("Footer") and Panth_Footer::config ("Configuration"), both under Panth_Core::panth_extensions
• No plugins, preferences, controllers, routes or cron jobs are declared
• No db_schema.xml; the module creates no database tables