> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/einfuehrung/footer-konfigurieren.md).

# Footer konfigurieren

Der Footer von ThemeWare® ist modular aufgebaut. Du bestimmst selbst, welche Inhalte (Widgets) im Footer erscheinen, in welchem Bereich sie liegen und in welcher Reihenfolge sie ausgegeben werden.

## Aufbau des Footers

| Bereich               | Inhalt                                                                   |
| --------------------- | ------------------------------------------------------------------------ |
| **Oberer Bereich**    | Erste Zone für Widgets, z.B. Newsletter oder Vorteile                    |
| **Mittlerer Bereich** | Hauptzone für Widgets, z.B. Footer-Navigation, Über uns, Service-Hotline |
| **Unterer Bereich**   | Dritte Zone für Widgets, z.B. Zahlungs- und Versandarten                 |
| **Logos-Footer**      | Separater Bereich unterhalb, z.B. für Auszeichnungen                     |
| **Copyright-Footer**  | Unterste Zeile mit Copyright, Service-Navigation und Branding            |

{% hint style="info" %}
**Info**: Im Checkout wird ein reduzierter Footer ausgegeben. Diesen konfigurierst du im Bereich "Minimaler Footer (im Checkout)".
{% endhint %}

## Schritt 1: Spalten festlegen

1. Öffne die Administration deines Shops
2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" ("Inhalte" => "Themes")
   * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
4. Wechsel in den Tab "**Footer**"
5. Öffne den Bereich "**Layout**"
6. Lege im Abschnitt "**Spalten**" die "**Spaltenanzahl @Tablet (≥768px)**" und die "**Spaltenanzahl @Desktop (≥1200px)**" fest

## Schritt 2: Inhalte zuweisen und anordnen

1. Öffne den Bereich "**Inhalte zuweisen und anordnen**"
2. Du findest hier die Abschnitte "**Element 1**" bis "**Element 11**" mit jeweils denselben Konfigurationen:
   * "**Inhalt (Widget)**": das Widget, das an dieser Stelle ausgegeben wird
   * "**Bereich**": "Oberer Bereich", "Mittlerer Bereich" oder "Unterer Bereich"
   * "**Reihenfolge**": die Sortierung innerhalb des Bereichs (kleinere Zahl = weiter vorne)
   * "**Elementbreite**": die Breite des Elements
   * "**Mobile Ansicht**": das Verhalten in der mobilen Ansicht (z.B. ein- und ausklappbar)
3. Nicht benötigte Elemente stellst du beim "**Inhalt (Widget)**" auf "**nicht anzeigen**"

Diese Widgets stehen zur Auswahl:

* Über uns
* Auszeichnungen, Siegel oder Zertifikate
* Vorteile
* Communities bzw. Social Media
* Individueller Text
* Footer Navigation
* Service-Hotline
* Standort bzw. Ladengeschäft
* Newsletter
* Zahlungs- und Versandarten
* Zahlungsarten
* Widerruf
* Versandarten

{% hint style="success" %}
**Tipp**: Die Inhalte der Widgets selbst konfigurierst du im Tab "**Widgets**". Dort findest du für jedes Widget einen eigenen Bereich.
{% endhint %}

## Schritt 3: Optik anpassen

Für die Bereiche "**Oberer Bereich**", "**Mittlerer Bereich**", "**Unterer Bereich**" und "**Copyright-Footer**" stehen dir jeweils dieselben Abschnitte zur Verfügung:

* "**Basiskonfiguration**": Innen- und Außenabstände, Ausrichtung der Spalten
* "**Farbkonfiguration**": Text-, Link- und Hintergrundfarben
* "**Hintergrundbild**": eigenes Hintergrundbild inklusive Abmessungen, Position, Wiederholung und Fixierung
* "**Typografie**": Textausrichtung

Die übergreifenden Einstellungen (Hintergrundfarbe, Hintergrundbild, Schriftarten und Schriftgrößen des gesamten Footers) findest du im Bereich "**Layout**".

## Schritt 4: Speichern und prüfen

1. Speicher die Theme-Konfiguration
2. Wechsel in die Storefront und lade die Seite einmal neu

Du hast nun den Footer konfiguriert.

***

## Weiterführende Informationen

* Einführung: [Footer-Navigation konfigurieren](/wissensdatenbank/einfuehrung/footer-navigation-konfigurieren.md)
* Einführung: [Service-Navigation konfigurieren](/wissensdatenbank/einfuehrung/service-navigation-konfigurieren.md)
* Einführung: [Zahlungs- und Versandanbieter Logos](/wissensdatenbank/einfuehrung/zahlungs-und-versandanbieter-logos.md)

#### ThemeWare® Video-Tutorial

{% embed url="<https://service.themeware.design/themeware-tutorial>" %}
ThemeWare® Video-Tutorial
{% endembed %}