Layout

Grundlayout

Maximale Shop-Breite (px)

Über diese Einstellung legst du fest, wie breit der Inhalt deines Shops maximal dargestellt werden soll. Du entscheidest also, ob du die gesamte Bildschirmbreite nutzen möchtest oder ein kompakteres Layout bevorzugst.

Sidebar anzeigen

Standardmäßig wird die Sidebar im Snackys-Template nur in Kategorien angezeigt – unabhängig davon, welche Einstellungen du im Shop-Backend gewählt hast. Wenn du die Sidebar auch auf anderen Seiten anzeigen möchtest, stelle die Einstellung auf „Überall".

Boxed-Layout

Entscheide hier, ob du für deinen Shop das Boxed-Layout verwenden möchtest.

Im fluiden Layout werden Style-Elemente (z. B. der Hintergrund der Navigationsleiste) unabhängig von deiner maximalen Content-Breite von Browserrand zu Browserrand dargestellt. Beim Boxed-Layout richten sich auch diese Style-Elemente nach deiner eingestellten maximalen Seitenbreite.

Zusätzlich kannst du ein Hintergrundbild hinter deinem Shop-Content festlegen. Für ein stimmiges Boxed-Layout empfehlen wir, eine eher kleinere maximale Content-Breite zu wählen.

Sobald du das Boxed-Layout aktivierst, stehen dir folgende Einstellungen zur Verfügung:

Abstand zum oberen & unteren Browserrand

Hier legst du fest, ob dein Boxed-Container direkt am oberen und unteren Browserrand beginnt oder ob jeweils ein Abstand hinzugefügt wird.

#bxt-w {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

Rahmen um Box-Container anzeigen

Mit dieser Option fügst du dem Box-Container, der deinen Shop beinhaltet, einen Rahmen hinzu. Das sorgt für eine stärkere Abgrenzung zu deinem gewählten Hintergrund. Den Rahmen kannst du anschließend im Bereich der Farben anpassen.

Hintergrundbild

Hier kannst du ein Hintergrundbild festlegen, das hinter und außerhalb deines Boxed-Layouts angezeigt wird. Lasse dieses Feld leer, wenn du kein Hintergrundbild verwenden möchtest. Wenn du kein Hintergrundbild verwendest, kannst du im Bereich der Farben eine eigene Hintergrundfarbe festlegen.

Topbar

Die Topbar enthält in der Regel Seiten aus der Linkgruppe „Kopf" sowie – falls vorhanden – einen Sprach- und Währungswechsler. Über die Einstellungen kannst du definieren, ob die Topbar auf Desktop- und/oder Mobilgeräten angezeigt werden soll.

Header

Hier findest du verschiedene vordefinierte Header-Styles für deinen Shop:

@media screen and (min-width: 768px) {
    #logo {
        order: -1;
        display: flex;
        justify-content: flex-start;
    }
    #logo img {
        object-position: left center;
    }
    form#search-form {
        margin: auto;
    }
}

Fullscreen-Header

Zusätzlich stehen dir Fullscreen-Header zur Verfügung. Damit wird auf der Startseite ein vollflächiger Bereich für eines der folgenden Elemente reserviert: Slider, Banner oder Video.

• Slider legst du im Shop-Backend unter Darstellung > Eigene Inhalte > Slider an.
• Banner legst du im Shop-Backend unter Darstellung > Eigene Inhalte > Banner an.
• Video: Nach der Auswahl kannst du im Snackys-Backend direkt ein Video sowie ein Vorschaubild hinterlegen.

Social-Media-Buttons im Header

Je nach ausgewähltem Header (z. B. Light) kannst du hier deine Social-Media-Kanäle einblenden, die du zuvor im Bereich Style & Branding hinterlegt hast.

Sprachschalter in Shopnavigation anzeigen

Wenn du mehrere Sprachen im Shop aktiviert hast, kannst du den Sprachwechsler rechts bei den Action-Buttons platzieren. Das ist ideal, wenn du z. B. die Topbar (inkl. Sprachwechsler) deaktiviert hast.

Suche im Mobile-Header geöffnet anzeigen?

Standardmäßig wird die Suche auf Mobilgeräten hinter einem Such-Icon verborgen und öffnet sich per Klick. Mit dieser Option kannst du eine dauerhaft geöffnete Suchleiste unterhalb des mobilen Headers aktivieren.

Hauptmenü

In diesem Bereich kannst du das Desktop-Kategoriemenü anpassen.

Darstellung Hauptmenü

Du kannst zwischen einem seitenbreiten Megamenü und einem einfachen Dropdown-Menü wählen.

Link zur Startseite

Hier bestimmst du, ob im Kategorienmenü ein Link zur Startseite angezeigt wird – als Home-Icon oder mit eigenem Text. Du kannst den Link auch komplett deaktivieren.

Kategorien anzeigen

Hier entscheidest du, ob Kategorien aus der WaWi automatisch im Hauptmenü angezeigt werden. Wenn du diese Option deaktivierst, werden Kategorien nicht mehr eingeblendet – praktisch, wenn du dir ein eigenes Menü über Seiten aufbauen möchtest.

Unterkategorien anzeigen

Mit dieser Einstellung bestimmst du, ob die dritte Kategorie-Ebene im Megamenü angezeigt werden soll.

Seiten der Linkgruppe „megamenu"

Hier kannst du eigene Seiten im Megamenü ausgeben lassen. Lege dazu im Shop-Backend Seiten innerhalb der Linkgruppe megamenu an – diese werden dann hinter den Kategorien angezeigt.

Hersteller-Dropdown anzeigen

Hier kannst du aktivieren, dass im Kategorienmenü ein zusätzlicher Reiter für Hersteller angezeigt wird. Aufgelistet werden alle Hersteller, die im Shop aktiv sind und mindestens ein Produkt besitzen.

Anzahl Unter-Unter-Kategorien

Hier legst du fest, wie viele Einträge der dritten Kategorie-Ebene im Megamenü angezeigt werden, bevor ein „Mehr …" erscheint. Der „Mehr …"-Link führt dann auf die jeweilige Oberkategorie. Das ist hilfreich, wenn einzelne Kategorien besonders viele Unterkategorien haben und das Menü sonst unruhig wirkt.

Anzahl Unterebenen

Hier stellst du ein, wie viele Unterebenen das Dropdown-Menü laden soll.

Mobiles Menü

Hier kannst du das Verhalten deines mobilen Menüs unabhängig vom Desktop-Menü anpassen.

Verhalten Kategorie-Klick

Hier bestimmst du, wie sich Kategorien mit Unterkategorien verhalten:

• Bei Klick: Zur Kategorie: Ein Klick auf den Kategorienamen führt direkt zur Kategorie. Unterkategorien öffnen sich über den Pfeil rechts neben dem Namen.
• Bei Klick: Unterkategorie einfahren: Ein Klick führt in die nächste Menüebene. Dort steht oben zusätzlich der Button „Alle anzeigen", um die Oberkategorie weiterhin aufrufen zu können.

Anzahl Unterebenen

Wie beim Desktop-Menü kannst du hier einstellen, wie viele Unterebenen im mobilen Menü verfügbar sein sollen.

Shopnavigation anzeigen

Mit der Shopnavigation sind Action-Buttons wie Anmeldung, Warenkorb, Wunschzettel und mehr gemeint. Wenn du diese Option aktivierst, können Besucher auch aus dem mobilen Menü heraus darauf zugreifen.

Sprach- und Währungswechsler anzeigen

Wenn du diese Option aktivierst, werden im mobilen Menü auch Sprach- und Währungswechsler angezeigt (sofern dein Shop mehrere Sprachen und/oder Währungen unterstützt).

Footer

Social-Media-Buttons im Footer

Mit dieser Option kannst du Social-Media-Verlinkungen im Footer anzeigen lassen, die du zuvor im Bereich Style & Branding hinterlegt hast.

Newsletter-Anmeldung im Footer

Mit dieser Option fügst du eine Newsletter-Anmeldebox in deinem Footer hinzu. Bitte beachte, dass das Newsletter-System im Shop-Backend aktiviert sein muss, damit die Box angezeigt wird.

Shoplogo im Footer

Wenn diese Option aktiv ist, wird im Footer automatisch ganz links dein Shoplogo angezeigt. Wenn du im Bereich Style & Branding ein SVG-Logo hinterlegt hast, wird hier ebenfalls dieses verwendet.

Zahlungsarten im Footer

Wenn du diese Option aktivierst, zeigt Snackys im Footer alle aktiven Zahlungsarten an, die mit Versandarten verknüpft sind. Du kannst festlegen, wie die Zahlungsarten dargestellt werden sollen:

1. Ja: Zeigt Zahlungsarten mit Bildern an und zusätzlich Zahlungsarten ohne Bilder als Text.
2. Ja, nur Bilder: Zeigt nur Zahlungsarten, zu denen ein Bild hinterlegt ist.
3. Ja, nur Text: Zeigt alle Zahlungsarten ausschließlich als Text.

Sprach- und Währungswechsler im Footer

Hier legst du fest, ob im Footer ein Sprach- und Währungswechsler angezeigt werden soll. Diese Option ist nur relevant, wenn du mehrere Sprachen und/oder Währungen im Shop aktiviert hast.

Anordnung Copyright

Hiermit sind Informationen unterhalb des Footers gemeint, z. B. der JTL-Copyright-Hinweis, der Snackys-Copyright-Hinweis sowie weitere Hinweise (z. B. zur Preisauszeichnung). Du bestimmst, ob diese Angaben untereinander oder in einer Zeile dargestellt werden sollen.

Footer-Boxen mobil zuklappen?

Hier kannst du festlegen, ob Footer-Boxen in der mobilen Ansicht geöffnet oder geschlossen dargestellt werden sollen. Wenn du viele Footer-Boxen verwendest, empfiehlt es sich, diese Option zu aktivieren, damit Besucher weniger scrollen müssen.

Ausrichtung Footer-Boxen

Standardmäßig werden in der großen Desktop-Ansicht bis zu fünf Footer-Boxen pro Zeile angezeigt. Wenn du z. B. nur drei oder vier Footer-Boxen nutzt, kannst du hier festlegen, wie diese ausgerichtet werden sollen: linksbündig am Content, zentriert im Shop-Layout oder rechtsbündig.