Shopware 6 Footer-Navigation erstellen und erweitern

#mega-menu-wrap-secondary #mega-menu-secondary ul.mega-sub-menu ul.menu { pointer-events: auto; } #content { #main { h1, h2, h3, h4, h5, h6 { @media screen and (max-width: 989px) { line-height: 1.3 !important; } } p { @media screen and (max-width: 989px) { line-height: 1.5 !important; } } @media screen and (max-width: 989px) { h1 { font-size: 35px !important; } h2 { font-size: 28px !important; } h3 { font-size: 22px !important; } } } .gb-container { &:has(.button-primary + .button-secondary) { @media screen and (max-width: 767px) { flex-direction: column; gap: 10px; } .button-primary, .button-secondary { @media screen and (max-width: 767px) { width: fit-content; } } } } .button-primary, .button-secondary { @media screen and (max-width: 767px) { } & > * { white-space: unset; cursor: pointer; } } } .flexible-layout { &--style { &_3 { .flexible-layout__images { gap: 10px; display: grid; grid-template-columns: repeat(2, 1fr); @media screen and (min-width: 768px) { } .flexible-layout { &__image-container { width: auto; &.flexible-layout__image-container--secondary { line-height: 0; img.flexible-layout__image { @media screen and (max-width: 575px) { max-height: 160px; } } } } &__image-column { gap: 10px; width: auto; } } } } } } // body.job-template-default .reasons-wrapper { & > .gb-grid-wrapper { // gap: 20px; & > .gb-grid-column > .gb-container { background: var(--base-3); padding: 50px 35px; h3:last-child { margin: 0; } } } } .benefits { .gb-grid-column { h3:last-child { margin-bottom: 0; } } } .wpcf7-form { input.wpcf7-form-control.wpcf7-submit { width: 100%; padding: 8px 18px; } .drop_uploader.drop_zone { min-height: unset !important; padding: 15px; border: 2px dashed var(--contrast-3); transition: .3s ease all; &:has(a.file_browse:hover) { border: 2px dashed var(--salmon); } .text_wrapper { margin-block: 30px; .text { font-size: 1em; } i { font-size: 30px; } } ul.files { &.thumb { margin: 0 auto !important; width: 100%; li { font-size: 0.75em !important; .thumbnail { background-position: center; } } } } } } .list-element-custom { p.gb-headline { .gb-icon { // display: inline-flex; // margin-block: auto; svg { height: 1em; // width: 1em; top: 2px; position: relative; /* background: lightcoral; */ } } } } .pagination { margin-top: 30px; br { display: none; } .wp-pagenavi { padding-inline: 20px; @media screen and (min-width: 990px) { padding-inline: 50px; } & > * { font-size: 18px !important; } a { transition: .5s ease all; &:hover { color: var(--c-secondary); } } } } .gb-container.text-image-section > .gb-grid-wrapper > .gb-grid-column > .gb-container { // height: 100%; // display: flex; // flex-direction: column; // justify-content: center; } .job-filter-wrapper, .job-results-wrapper { p:empty { display: none; margin-bottom: 0 !important; } } .job-filter-wrapper { form.searchandfilter { & > ul { margin-bottom: 40px; row-gap: 5px !important; } li.sf-field-search { input { &::placeholder { font-size: 1em; } } } li[data-sf-field-input-type="select"] { & > label { border: 2px solid #999; padding-right: 20px; border-radius: 10px; & > select { background: transparent; border: unset; padding: 10px 0 10px 20px; option { // padding-block: 15px; &.sf-option-active { // background: var(--c-secondary); } } } } &.active { & > label { border-color: var(--c-secondary); color: var(--c-secondary); } } } } } .job-results-wrapper { .search-filter-results { br + .job-listing { margin-top: 25px; } } .job-listing { @media screen and (min-width: 990px) { padding-inline: 50px; } } } body .button-primary, body .button-secondary { font-weight: 500; } .carreer-intro { &:before { // max-width: calc(100% - 850px); // left: unset; // width: 100%; } p { font-size: 20px; margin-block: 30px; } }

Eine Footer-Navigation dient u.a. der Verlinkung und Darstellung der wichtigsten Kategorien und Links zu Service-Seiten, wie bspw. die Datenschutzerklärung, am Ende einer Seite. Es kann sehr schnell ziemlich verwirrend werden, eine Shopware 6 Footer-Navigation zu erstellen, da diese komplett über das Kategorien-Menü realisiert wird. Mithilfe dieses Tutorials erfahren Sie, wie das funktioniert und wie man eigene Footer-Blöcke komplett über die Administration des Shops erstellen kann. Als Shopware-Agentur helfen wir Ihnen auch gerne persönlich weiter.

10h

pro Monat

Sie wünschen Support?

Unser zertifizierten Shopware-Experten unterstützen Sie

Individuell – startend ab 10 Stunden im Monat
Top Übersichtlichkeit & gesteigerte User-Experience
Personalisierter E-Commerce mit Experten

Jetzt Support-Kontingent anfragen

Schritt 1: Footer-Navigation-Kategorie erstellen

Um später im Verkaufskanal den richtigen Einstiegspunkt für die Footer-Navigation wählen zu können, muss dafür eine separate Kategorie erstellt werden.

Navigieren Sie in Ihrer Shopware-Administration zu Kataloge > Kategorien.
Klicken Sie bei der bereits vorhandenen Kategorie auf die drei kleinen Punkte und wählen Sie Neue Kategorie danach.
Benennen Sie diese am besten in Footernavigation.
Speichern Sie anschließend den Namen per Enter-Taste oder per Klick auf den kleinen Haken.
Klicken Sie auf die Kategorie und konfigurieren Sie diese wie folgt:
- Checkbox Kategorie ist aktiv: aktivieren > aktiviert die Kategorie, sonst wird sie nicht angezeigt.
- Kategorietyp: Strukturkategorie > dient nur der Strukturierung und kann selbst nicht aufgerufen werden.

Schritt 2: Subkategorien erstellen (Footerblöcke)

Für eine vollständige Shopware 6 Footer-Navigation werden anschließend innerhalb der Footer-Navigation-Kategorie die einzelnen Subkategorien erstellt. D.h. also die einzelnen Blöcke des Footers Ihres Online-Shop.

Klicken Sie bei der Footer-Navigation auf die drei kleinen Punkte und wählen Sie Neue Subkategorie.
Wählen Sie einen Namen für die Subkategorie, bspw. Informationen. Diese stellt im Shop die jeweilige Blocküberschrift in der Footernavigation dar.
Konfigurieren Sie die Subkategorie gleich wie die übergeordnete Kategorie (siehe Schritt 1).

Haben Sie nun alle Blöcke bzw. Subkategorien erstellt, können Sie sich an die Inhalte der einzelnen Blöcke machen.

Sie benötigen Unterstützung bei der Erstellung Ihrer Shopware 6 Footer-Navigation?

Kein Problem! Vereinbaren Sie jetzt einen Termin mit unseren zertifizierten Shopware-Entwicklern.

Jetzt Kontakt aufnehmen

Schritt 3: Footerblöcke mit Inhalt befüllen

Erstellen Sie innerhalb des jeweiligen Footerblocks ebenfalls eine neue Subkategorie, um die Footerblöcke selbst mit Inhalt zu befüllen – also bspw. innerhalb vom Block Informationen erstellen Sie die Subkategorie Payment/Shipping.
Wählen Sie unter Kategorietyp den Eintrag Kategorie aus – hier ist die Konfiguration etwas anders als bei den vorherigen Schritten.
Wählen Sie unter Layout-Zuweisung ein passendes Layout für diese Kategorie aus, bspw. Zahlungsbedingungen – diese Layouts können unter Inhalte > Erlebniswelten angepasst oder erstellt werden.

Eine mögliche Strukturierung der Footernavigation könnte wie folgt aussehen:

[av_font_icon icon=’uec11′ font=’entypo-fontello‘ style=“ caption=“ size=’14px‘ position=’left‘ color=“ link=“ linktarget=“ animation=“ id=“ custom_class=“ av_uid=’av-sngnbx-3′ admin_preview_bg=“][/av_font_icon]Die Konfiguration des Footerblock-Eintrages könnte wie folgt aussehen:

Schritt 4: Zuordnung des Einstiegs der Shopware 6 Footer-Navigation im Verkaufskanal

Letztendlich muss dem jeweiligen Verkaufskanal noch mitgeteilt werden, wo sich der Einstiegspunkt der Footer-Navigation befindet.

Wählen Sie bei der Menükategorie Verkaufskanäle den gewünschten Verkaufskanal aus: in unserem Fall Storefront.
Wählen Sie nun unter Grundeinstellungen bei Einstieg für die Footer-Navigation die erstellte Footer-Navigation aus.

Anmerkung: Sollte in dem Dropdown die Footernavigation nicht angezeigt werden, geben Sie einfach die ersten Buchstaben in das Feld ein

Die Footernavigation sollte nun erscheinen:

Nach einem Klick auf Speichern sollte nun im Shop die Footernavigation erweitert sein:

Anmerkung: Der Block Service Hotline in der Shopware 6 Footer-Navigation ist bereits im Standard von Shopware 6 integriert. Sie können den Inhalt des Blocks über die Anpassung der jeweiligen Textbausteine abändern oder, wenn gewünscht, den Block per CSS oder per Überschreiben des jeweiligen Twig-Templates ausblenden.

Sie haben nun eine eigene Footer-Navigation in Shopware 6 erstellt. Aufgrund der höheren Usability kann Ihr Kunde nun besser durch Ihren Shop navigieren und am Ende der Seite nochmals zu bestimmten Links springen. Zudem legen Sie durch die Verlinkungen in der Footer-Navigation nochmals den Fokus auf die wichtigsten Inhalte Ihres Shops. Wenn Sie weitere Hilfe benötigen, fragen Sie gerne bei unserer Shopware-Agentur in München an.