Skip to main content

​
Overview

The footer component displays essential store information including description, navigation links, contact details, social media icons, app download links, and payment methods.

​
Location

src/views/components/footer/footer.twig

​
Configuration

​
footer_is_dark
boolean
default:false
Enable dark mode for the footer

​
Structure

The footer is organized in a responsive grid layout with these sections:

​
Store information (2 columns on large screens)

  • Store name as clickable heading
  • Store description (if available)
  • Social media links (desktop only)
  • Trust badges
  • VAT certificate and number (if configured)

​
Page links

  • Footer menu rendered via <salla-menu source="footer">

​
Contact information

  • Contact details via <salla-contacts>
  • Social media links (mobile only)

​
App downloads (2 columns on large screens)

  • App store and Google Play links via <salla-apps-icons>

​
VAT certificate

If the store has a VAT number configured, the footer displays:
  • VAT certificate image (clickable, opens modal)
  • VAT number with label
  • Modal with full certificate image
{% if store.settings.tax.number %}
  <div class="flex rtl:space-x-reverse space-x-2 items-end">
    {% if store.settings.tax.certificate %}
      <a class="load-img-onclick" data-modal-id="modal-value-tax" href="#/">
        <img width="40" height="50" src="{{ 'images/tax.png' | cdn(70,70) }}" />
      </a>
    {% endif %}
    <div>
      <p class="text-sm text-text-grey mb-1">{{ trans('common.elements.tax_number') }}</p>
      <b class="text-sm">{{ store.settings.tax.number }}</b>
    </div>
  </div>
{% endif %}

​
Usage example

{% component 'footer.footer' %}

​
Components used

The footer includes these Salla web components:
  • <salla-menu>: Footer navigation menu
  • <salla-social>: Social media icons
  • <salla-contacts>: Contact information
  • <salla-apps-icons>: App download links
  • <salla-payments>: Payment method icons
  • <salla-trust-badges>: Trust and security badges
  • <salla-modal>: VAT certificate modal
The bottom section displays:
  • Copyright text via {% hook copyright %}
  • Payment method icons via <salla-payments>

​
Dark mode

When footer_is_dark is enabled: 
<salla-trust-badges {% if theme.settings.get('footer_is_dark') %} dark {% endif %}>
</salla-trust-badges>
The body tag also receives the appropriate class: 
<body class="{{ theme.settings.get('footer_is_dark') ? 'footer-is-dark' : 'footer-is-light' }}">
The footer layout is responsive and adjusts from a single column on mobile to a 6-column grid on large screens.

Build docs developers (and LLMs) love

Get started for freeTalk to us