Design-Presets
Hier findest du verschiedene vordefinierte Styles für deinen JTL-Shop. Mit einem Klick auf ein Preset stellt Snackys automatisch alle benötigten Einstellungen auf das gewählte Styling um.
Nach der Aktivierung kannst du das Preset weiterhin über die restlichen Snackys-Einstellungen individuell anpassen. Weitere Presets werden per Update ergänzt.
Ab Snackys 5.6.0 stehen dir aktuell vier Presets zur Verfügung:
Snackys
Das Standard-Design deines Snackys-Templates nach der Installation. Ideal, wenn du wieder auf den Ursprung zurückspringen möchtest.
Vorschau im DemostoreToasty
Ein abgerundetes Kachel-Design (Toast-Stil). Während im Standard Snackys Produktboxen und Inhalte stärker mit dem Hintergrund verschmelzen, setzt Toasty wichtige Elemente wie Produktboxen in klar abgegrenzte Boxen.
Vorschau im DemostoreDark Chocolate
Unser eleganter Darkmode-Look – perfekt für ein modernes, kontrastreiches Shop-Design.
Vorschau im DemostoreFashion
Ein modernes Preset, das deine Artikel besonders hochwertig in Szene setzt. Große Bilder und eine elegante Optik sorgen dafür, dass deine Produkte im Fokus stehen – ideal für bildstarke Sortimente.
Vorschau im DemostoreStyling
Bilder abrunden
Snackys verwendet standardmäßig ein modernes, abgerundetes Design. Dabei werden auch die Kanten deiner Bilder abgerundet. Wenn du lieber ein kantiges Design möchtest, kannst du diese Option deaktivieren.
Tipp: Die Stärke der Abrundung kannst du über die CSS-Variable var(--img-rnd) anpassen.
:root {
--img-rnd: 1rem;
}Buttons-Styling
Wie die Bilder werden auch Buttons im Standard-Design abgerundet dargestellt. Über das Dropdown kannst du das Button-Design von leicht abgerundet bis vollständig rund einstellen – oder zurück zu einem kantigen Button-Stil wechseln.
Tipp: Die Stärke der Abrundung kannst du über die CSS-Variable var(--btn-rnd) anpassen.
:root {
--btn-rnd: 1rem;
}Rahmen um Produktbilder
Im Standard Snackys-Design werden Produktbilder in Produktboxen oder auf der Produktdetailseite ohne klare Abgrenzung zum Seitenhintergrund dargestellt.
Wenn deine Produktbilder einen ähnlichen Hintergrund wie dein Shop-Layout haben und du dir mehr Kontrast wünschst, kannst du hier einen Rahmen um Produktbilder aktivieren.
Rahmenfarbe einstellen
Die Farbe für den Bilderrahmen stellst du im Snackys-Plugin im Tab Farben ein. Du findest die Einstellungen im Bereich Kategorien & Artikelslider im Akkordeon Produktbox über Bild - Rahmen und Bild - Rahmen - Hover.
Bilder
Bildformate
Hier legst du das allgemeine Format der Bilder fest, die aus der JTL-WaWi kommen, z. B. Produktbilder, Kategoriebilder, Variationsbilder usw. Standardmäßig werden diese als Quadrat dargestellt.
Wenn du stattdessen z. B. Hochformat-Bilder oder 4:3-Kategoriebilder verwenden möchtest, stelle diese Option auf Shop-Bildeinstellungen übernehmen. Dann wird automatisch das Bildformat genutzt, das du im Shop-Backend unter Darstellung > Einstellungen > Bilder in der Größen-Spalte Normal hinterlegt hast.
So kannst du deine individuellen Bildformate ohne zusätzlichen Aufwand sauber im Shop darstellen.
Kopierschutz für Bilder aktivieren
Wenn du verhindern möchtest, dass Bilder per Rechtsklick über „Speichern unter" heruntergeladen werden, kannst du diese Option aktivieren. So schützt du deine Inhalte, ohne Wasserzeichen verwenden zu müssen, die deine Produktbilder überdecken.
Bildgröße im Container
Snackys lädt Bilder aus deiner WaWi in vordefinierte Container. Das Bildformat wird über die Einstellung Bildformate (WaWi-Bilder) gesteuert.
Falls deine Bilder nicht immer im gleichen Format vorliegen, kannst du hier festlegen, wie Snackys damit umgehen soll:
- Container ausfüllen: Das Bild füllt den Container vollständig aus (ggf. werden oben/unten oder links/rechts Bereiche abgeschnitten), sorgt aber für ein ruhigeres Gesamtbild.
- In Container einpassen: Das komplette Bild bleibt sichtbar (ggf. entstehen kleine Leerflächen), damit keine Bilddetails verloren gehen.
Logos
SVG-Logo
Über diese Einstellung kannst du eine SVG-Datei deines Logos hochladen und als Shop-Logo verwenden. Der Vorteil von SVG-Grafiken (Vektor-Grafiken) ist, dass sie beliebig skaliert werden können und dabei gestochen scharf bleiben. Außerdem sind sie häufig kleiner als z. B. PNG-Dateien.
SVG nicht im Shop-Backend hochladen
Lade dein SVG-Logo nicht direkt in den Logo-Einstellungen im Shop-Backend hoch. Der Shop verwendet diese Datei auch für Shop-E-Mails, und einige Mail-Dienste haben weiterhin Probleme bei der Darstellung von SVG-Grafiken. Nutze im Shop-Backend daher z. B. ein PNG-Logo und hinterlege dein SVG zusätzlich im Snackys-Template.
Profi-Tipp
Komprimiere dein SVG vor dem Upload, um noch mehr Performance herauszuholen. Dabei kann dir z. B. dieses Tool helfen: https://svgomg.net
Mobiles Logo
Hier kannst du ein separates Logo für Mobilgeräte hinterlegen. Das eignet sich besonders, wenn dein Logo sehr komplex ist und auf kleinen Bildschirmen schlecht lesbar wäre. Mit dieser Option kannst du ein reduziertes, mobil optimiertes Logo verwenden.
Apple-Touch-Icon
Hier kannst du dein eigenes Apple-Touch-Icon hinterlegen. Dieses Icon wird zusätzlich zum Favicon verwendet (das Favicon wird weiterhin in den Template-Einstellungen gepflegt). Das Apple-Touch-Icon kommt häufig zum Einsatz, wenn Nutzer deinen Shop auf dem Homescreen speichern.
Social-Media-Kanäle
Hier kannst du Verlinkungen zu deinen Social-Media-Kanälen wie Instagram, YouTube, TikTok und weiteren Plattformen hinterlegen.
Im Tab Layout des Snackys-Plugins kannst du anschließend festlegen, ob diese Links im Header und/oder im Footer deines Shops angezeigt werden sollen.