Beispiel: Du wurdest als Top-Shop ausgezeichnet und möchtest dein Badge im Header anzeigen? Kein Problem – mit Snackys-Inhalten ist das schnell umgesetzt.
Produktvideos in der Artikelgalerie
Besonders stark ist die Möglichkeit, Produktvideos direkt in die Artikelgalerie einzubinden. Wie das funktioniert, erfährst du in unserem Tutorial:
Tutorial ansehenLinke Seitenleiste
Inhalte
In diesem Bereich siehst du alle angelegten Kategorien, in denen du Inhalte abgelegt hast. Inhalte, die keiner Kategorie zugeordnet sind, werden automatisch der Kategorie Unkategorisiert zugeordnet.
Info: Kategorien helfen dir, Inhalte schneller wiederzufinden. Du kannst z. B. alle Inhalte für die Startseite in eine Kategorie Startseite einsortieren.
Aktionen
Inhalt hinzufügen
Über Inhalt hinzufügen kannst du rechts aus den vordefinierten Inhaltstypen wählen und neue Inhalte anlegen.
Kategorie hinzufügen
Hierüber erstellst du neue Kategorien, um deine Inhalte sauber zu strukturieren. So behältst du auch bei vielen Inhalten jederzeit den Überblick.
Neuen Inhalt anlegen
Beim Erstellen eines neuen Inhalts kannst du zwischen verschiedenen Inhaltstypen wählen.
Galerie-Video / Video
Mit diesem Inhaltstyp kannst du Produktvideos direkt in deine Artikelgalerie einbinden. Zusätzlich lassen sich Videos auch an beliebigen anderen Stellen im Shop ausgeben.
HTML/SMARTY
Mit diesem Element kannst du HTML, JavaScript, CSS und auch SMARTY-Code ausführen. So kannst du deinen Shop erweitern, ohne ein Child-Template anlegen zu müssen.
Beispiel: Du kannst zusätzliche Artikelinfos ausgeben, die im {$Artikel}-Array enthalten sind.
Inhalt
Mit diesem Element fügst du klassische Textinhalte hinzu. Dafür steht dir ein Texteditor zur Verfügung, wie du ihn z. B. auch aus dem Shop-Backend von eigenen Seiten kennst.
Produktslider
Hierüber kannst du eigene Produktslider an beliebigen Stellen im Shop ausspielen. Du bestimmst selbst, welche Produkte angezeigt werden und welchen Titel der Slider erhält.
Grid Layout
Mit dem Grid-Layout erstellst du strukturierte Inhalte mit mehreren Elementen nebeneinander. Du legst zuerst einen Container an und fügst anschließend Unterelemente hinzu, z. B.: HTML/SMARTY, Inhalt, Produktslider, Bild und Video.
Bei jedem Unterelement gibst du an, wie viel Platz es im Grid einnehmen soll. So kannst du z. B. auf der Startseite einen Bereich mit Kachel-Links zu deinen beliebtesten Kategorien erstellen.
Info: Das Grid basiert auf dem 12-spaltigen Bootstrap-Grid. Wenn ein Element 50% der Breite einnehmen soll, stellst du den Wert bei Raster auf 6.
Bild
Mit diesem Element kannst du Bilder an beliebigen Stellen im Shop platzieren. Bilder lassen sich verlinken und optional mit einer Bildunterschrift versehen.
Akkordeon
Mit diesem Element baust du Akkordeons für deinen Shop. Ähnlich wie beim Grid erstellst du zuerst den Container und fügst anschließend Unterelemente hinzu (z. B. HTML/SMARTY, Inhalt, Produktslider, Bild, Video).
Pro Unterelement definierst du eine Überschrift – diese ist der Titel, auf den Besucher klicken, um den Inhalt aufzuklappen.
Inhalts-Einstellungen
Schauen wir uns nun die Einstellungen an, die dir beim Anlegen von Inhaltselementen zur Verfügung stehen. Je nach Inhaltstyp werden unterschiedliche Optionen angezeigt.
Interner Name
Benenne dein Element so, dass du es später in der Inhaltsverwaltung schnell wiederfindest.
Verfügbar für: Alle Inhaltselemente
Zone / Einfügestelle
Hier legst du fest, wo dein Inhalt im Shop ausgegeben werden soll. Über das Fadenkreuz startest du den Zonen-Picker. Dieser lädt deinen Shop und du kannst direkt auf die gewünschte Zone klicken.
Du kannst im Zonen-Picker auch per URL-Feld auf eine andere Seite springen, z. B. auf eine Artikelseite.
Alternative: Im Bereich Entwickler kannst du dir die Zonen/Einfügestellen im Frontend anzeigen lassen. Dann siehst du alle verfügbaren Zonen direkt im Shop. Diese Zonen sind nur sichtbar, wenn du gleichzeitig im Shop-Backend angemeldet bist – reguläre Besucher sehen diese Hinweise nicht.
Verfügbar für: Alle Elemente, außer Kind-Elemente von Grid oder Akkordeon
Kategorie
Ordne dein Element einer Inhaltskategorie zu, die du auf der Übersichtsseite anlegen kannst. Das sorgt für Ordnung und erleichtert dir die Verwaltung.
Verfügbar für: Alle Elemente, außer Kind-Elemente von Grid oder Akkordeon
Unterelement von
Bei Kind-Elementen zeigt dir dieses Feld, zu welchem übergeordneten Element (Grid oder Akkordeon) der Inhalt gehört.
Verfügbar für: Nur Kind-Elemente von Grid oder Akkordeon
Raster (XS–LG)
Diese Optionen stehen dir bei Kind-Elementen eines Grids zur Verfügung. Damit bestimmst du, wie viel Platz ein Element innerhalb der Zeile einnimmt.
Das Grid arbeitet auf Basis von 12 Spalten pro Zeile. Wenn ein Element die Hälfte der Breite einnehmen soll, wählst du beim jeweiligen Raster 6.
Du kannst die Breite je Bildschirmgröße anpassen. Beispiel: Soll ein Element auf Mobilgeräten über die volle Breite laufen, wähle bei Raster XS den Wert 12. Über Hidden kannst du ein Element auf bestimmten Auflösungen auch komplett ausblenden.
Verfügbar für: Nur Kind-Elemente vom Typ Grid
Name Überschrift
Diese Option steht dir bei Kind-Elementen eines Akkordeons zur Verfügung. Hier legst du den Titel fest, auf den Besucher klicken, um den Bereich zu öffnen.
Verfügbar für: Nur Kind-Elemente vom Typ Akkordeon
Video-Typ
Lege fest, ob du ein eigenes Video hochladen möchtest oder ein YouTube-Video einbettest.
Bei Video-Datei kannst du über den Lupen-Button die Medienverwaltung öffnen, das Video hochladen und anschließend auswählen – oder einen bekannten Pfad direkt eintragen.
Zusätzlich kannst du ein Video-Vorschaubild hinterlegen. Dieses Bild wird angezeigt, solange der Besucher nicht auf „Play" klickt. Ohne Vorschaubild zeigen manche Browser das erste Frame, andere dagegen nur eine schwarze Fläche.
Tipp: Wenn du ein Video in der Artikelgalerie verwendest und kein eigenes Vorschaubild angibst, wird automatisch das Artikelbild als Vorschau genutzt.
Verfügbar für: Nur Inhaltselement Video
Inhalt: HTML (mit Smarty)
Hier fügst du deinen HTML/SMARTY-Code ein (inkl. optionalem JS und CSS), um deinen Shop flexibel zu erweitern.
Tipp: Wenn du in diesem Element CSS oder JavaScript einfügst, solltest du den Code in SMARTY mit {literal} und {/literal} umschließen. Grund: CSS und JS verwenden geschweifte Klammern, die sonst von SMARTY als Template-Syntax interpretiert werden könnten.
Verfügbar für: Nur Inhaltselement HTML/SMARTY
Textinhalt
Über den Texteditor kannst du frei formatierte Inhalte einfügen. Du kannst auch in die Quellcode-Ansicht wechseln und direkt HTML schreiben – für umfangreichere HTML-/Smarty-Anpassungen empfehlen wir jedoch das Element HTML/SMARTY.
Verfügbar für: Nur Inhaltselement Inhalt
Produktslider Titel
Gib deinem Slider einen griffigen Namen, z. B. Unsere Lieblinge der Woche.
Verfügbar für: Nur Inhaltselement Produktslider
Produkte im Slider
Lege fest, welche Produkte im Slider ausgegeben werden sollen. Klicke dazu rechts auf das Stift-Symbol, suche in der Auswahlmaske nach den gewünschten Artikeln und bestätige deine Auswahl.
Verfügbar für: Nur Inhaltselement Produktslider
Bildpfad
Beim Element Bild kannst du über den Lupen-Button die Medienverwaltung öffnen, dein Bild hochladen und auswählen – oder einen bekannten Pfad direkt eintragen.
Tipp: Wenn du im gleichen Pfad zusätzlich eine .webp-Datei hinterlegst, erkennt Snackys das automatisch und liefert modernen Browsern zusätzlich das WebP-Format aus.
Verfügbar für: Nur Inhaltselement Bild
Verlinkung zu (URL)
Hier bestimmst du, ob dein Bild auf eine URL verlinken soll. Wenn du das Feld leer lässt, wird keine Verlinkung gesetzt.
Verfügbar für: Nur Inhaltselement Bild
Bildunterschrift
Optional kannst du eine Bildunterschrift (Caption) hinterlegen. Das eignet sich z. B. gut für Kategorie-Teaser – dann kannst du hier den Kategorienamen eintragen.
Info: Wenn du keinen eigenen Alt-Text angibst, wird die Bildunterschrift als Alt-Text verwendet.
Verfügbar für: Nur Inhaltselement Bild
Alt-Tag
Hier definierst du den Alt-Text deines Bildes für Screenreader. Der Alt-Text sollte das Bild beschreiben. Bei einem Kategorie-Bild solltest du also nicht nur den Kategorienamen eintragen, sondern das, was tatsächlich auf dem Bild zu sehen ist.
Verfügbar für: Nur Inhaltselement Bild
Breite & Höhe
Diese beiden Felder stehen dir beim Bild-Element zur Verfügung. Trage die Werte möglichst immer ein. Snackys reserviert den Platz für nachgeladene Bilder vorab, damit die Seite nicht „springt".
Wichtig: Breite und Höhe dienen hier vor allem als Angabe des Seitenverhältnisses. Beispiel: Für ein 16:9-Bild trägst du 16 und 9 ein. So wird der Container korrekt im passenden Verhältnis aufgebaut.
Verfügbar für: Nur Inhaltselement Bild
Lazyloading
Hier legst du beim Bild-Element fest, ob das Bild erst geladen werden soll, wenn es sichtbar wird, oder ob es direkt geladen wird.
Regel: Bilder, die beim Aufruf der Seite sofort sichtbar sind (ohne Scrollen), sollten nicht nachgeladen werden. Deaktiviere dafür Lazyloading. Für alle anderen Bilder empfiehlt es sich, Lazyloading aktiviert zu lassen.
Verfügbar für: Nur Inhaltselement Bild
CSS Klasse
Hier kannst du deinem Element beliebige CSS-Klassen geben. Diese kannst du später im Bereich CSS & HTML für eigenes Styling nutzen oder bestehende Utility-Klassen verwenden (z. B. mb-lg für Abstände).
Verfügbar für: Alle Inhaltselemente
Sortierung
Über die Sortierung bestimmst du die Reihenfolge der Elemente innerhalb derselben Einfügezone. Bei Kind-Elementen gilt die Sortierung für die Reihenfolge innerhalb des jeweiligen Parent-Elements (Grid/Akkordeon).
Die Sortierung ist aufsteigend: 0 steht sehr weit vorne, 999 sehr weit hinten.
Verfügbar für: Alle Inhaltselemente
Filtern nach Gerät
Lege fest, auf welchen Gerätetypen dein Inhalt angezeigt werden soll: Alle Geräte, nur Desktop oder nur Mobil.
Verfügbar für: Alle Inhaltselemente
Nach URL filtern
Mit dieser Option kannst du ein Element auf eine feste URL oder auf URLs mit bestimmten Parametern einschränken.
Hinweis: Wenn sich eine URL (z. B. von Artikeln) ändert, wird der Inhalt nicht mehr angezeigt. In vielen Fällen ist daher die Filterung über Seitentyp (und ggf. Kategorie/Artikel) die robustere Lösung.
Verfügbar für: Alle Inhaltselemente
Filtern nach Seitentyp
Hierüber kannst du Inhalte gezielt für bestimmte Seitentypen ausgeben, z. B. Startseite, Warenkorb, Artikellisten oder Artikeldetailseiten.
Je nach Seitentyp stehen dir zusätzliche Filter zur Verfügung: Bei Artikelliste kannst du danach eine konkrete Kategorie auswählen. Bei Artikel kannst du anschließend einen bestimmten Artikel festlegen. Ohne zusätzliche Auswahl wird das Element auf allen Seiten dieses Typs angezeigt.
Verfügbar für: Alle Inhaltselemente
Filtern nach Sprache
Lege fest, für welche Sprache ein Inhalt ausgegeben werden soll. Beispiel: Dein Shop ist auf Deutsch und Englisch verfügbar – dann kannst du für den Seitentyp Startseite je Sprache einen passenden Inhalt pflegen.
Verfügbar für: Alle Inhaltselemente
PHP Bedingung
Wenn du Inhalte nach sehr spezifischen Bedingungen filtern möchtest (z. B. „Funktionsattribut XYZ ist gesetzt"), kannst du hier eigene Bedingungen als PHP-Abfrage hinterlegen.
Achtung: Nur für PHP-Erfahrene
Bitte nur verwenden, wenn du dich mit PHP sicher auskennst. Rückgabe:
-
return true;→ Inhalt wird angezeigt -
return false;→ Inhalt wird nicht angezeigt
Verfügbar für: Alle Inhaltselemente
Caching deaktivieren
Hier legst du fest, ob das Caching für dieses Element deaktiviert werden soll. Für die beste Performance empfehlen wir, das Caching in der Regel aktiv zu lassen.
Wann das Deaktivieren sinnvoll sein kann: Du nutzt eigenen SMARTY-Code, der z. B. ein Datum oder einen Countdown dynamisch berechnet. Wenn Caching aktiv ist, bleibt der Wert ggf. auf dem Stand der letzten Speicherung. Ohne Caching wird der Wert bei jedem Aufruf neu berechnet.
Verfügbar für: Alle Inhaltselemente
Status
Über den Status steuerst du schnell, ob ein Element im Shop angezeigt wird: Aktiv bedeutet sichtbar, Nicht aktiv bedeutet ausgeblendet.
Verfügbar für: Alle Inhaltselemente
Tipp: Zusätzliche Filter für Kind-Elemente
Bei Kind-Elementen von Akkordeon und Grid kannst du zusätzliche Filter setzen. Kind-Elemente übernehmen zwar die Filter des Parent-Elements, du kannst diese jedoch weiter verfeinern. So kannst du z. B. ein Grid mit Text links und Bild rechts erstellen und den Text je Sprache unterschiedlich ausgeben, ohne das gesamte Grid doppelt anlegen zu müssen.