Jetzt neu: Deine Shop-Performance als Bundle ×

Styling

Schriftart

Hier hast du die Möglichkeit, deine eigene Schriftart global für den Shop einzustellen. Schriftnamen mit Leerzeichen müssen in Anführungszeichen gesetzt werden. Vergiss auch nicht, bei serifenlosen Schriften sans-serif oder bei Serifen-Schriften serif hinten als Fallback anzuhängen.

Laden von externen Schriften

Wenn du externe Schriften z.B. von Adobe Fonts oder Google Fonts einsetzten möchtest, kannst du im Tab CSS/HTML unter Zusätzliche HTML Head Tags das Script von diesen Schriften einfügen. Achte darauf, dass du "display: swap" bei diesen Schriften aktiviert hast, damit diese nicht die Ladezeit deiner Webseite blockieren

Verschiedene Schriftarten verwenden

Wenn du z.B. für Überschriften eine eigene Schriftart hinzufügen möchtest, kannst du das im Tab CSS/HTML unter Eigenes CSS vornehmen. Um z.B. allen Überschriften eine eigene Schriftart zu geben muss der Code so aussehen:

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5{
  font-family: 'Comic Sans MS', comic;
} 

Rahmen um Produktbilder

Wenn deine Produktbilder aus freigestellten Artikeln auf weißem Hintergrund bestehen, möchtest du evtl. die Produktbilder vom weißen Seitenhintergrund abgrenzen. Durch aktivieren dieser Option, werdend eine Produktbilder mit einem Rahmen vom Seitenhintergrund abgegrenz.

Links: Anzeige Produktbilder ohne Rahmen | Rechts: Anzeige Produktbilder mit Rahmen


Anzeige Warenkorbicon

Das Warenkorb-Symbol ist in der Standard-Einstellung eine Einkaufstasche. Hier hast du die Möglichkeit, von der EInkaufstasche zu einem Einkaufswagen-Symbol zu wechseln.

Anzeige Warenkorb-Icon

Links: Einkaufstasche-Icon | Rechts: Einkaufswagen-Icon


Produktbilder abrunden

Das Snackys-Template zeigt die Bilder im Shop für ein harmonischeres Erscheinungsbild mit abgerundeten Ecken ein. Wenn dadurch wichtige Inhalte auf deinen Bilder abgeschnitten werden oder du generell lieber ein kantiges Design bevorzugst, kannst du dies hier abstellen.

Einstellung

Links: Abgerundete Produktbilder | Rechts: Produktbilder ohne Abrundung


Buttons abrunden

Wie bei den Produktbildern hast du auch hier die Möglichkeit, vom abgerundeten Design zu einem kantigen Design bei allen Buttons im Shop zu wechseln.

Links: Abgerundete Buttons | Rechts: Buttons ohne Abrundung


Maximale Seitenbreite

Das Snackys-template ist nicht nur für große Darstellungen optimiert, sondern sieht auch im Kompakten Modus super aus. Bestimme hier selbst, wie breit dein Shop maximal angezeigt werden soll. Wir empehlen eine Mindestbreite von 1200px

Snackys Template mit maximaler Seitenbreite von 2000px

Snackys Template mit maximaler Seitenbreite von 1200px


Maximale Tab-Breite (Detailseite)

Lege hier fest, wie breit die Tabs auf der Artikeldetailseite maximal angezeigt werden sollen

Info zur Lesbarkeit von Texten

Stelle die Breite der Tabs so ein, dass sich deine Artikelbeschreibungen gut lesen lassen. Die Anzahl an Wörtern pro Zeile sollte 12 nicht übersteigen. Ansonsten lassen sich deine Artikeltexte von deinen Besucher nur schwer lesen.


Maximale Blogdetail-Breite

Stelle hier die Maximale Breite deiner Blogbeiträge ein. Denn auch bei bei deinen Blogbeiträgen solltest du auf die Lesbarkeit deiner Texte achten. Auch hier gilt, die maximale ANzahl an Wörtern pro Zeile sollte 12 nicht überschreiten.


Wartungsmodus: Hintergrundbild

Wenn du den Wartungsmdous deines Shops aktivierst, wird deinen Besuchern ein entsprechender Hinweis angezeigt. Hier hast du die Möglichkeit, ein eigenes Hintergrundbild hinter diesem Hinweis zu platzieren.

Wartungsmodus mit eigenem Hintergrundbild


404 Error: Hintergrundbild

Wenn deine Besucher versuchen eine Seite im Shop aufzurufen, die nicht oder nicht mehr existiert, wird diesen eine 404-Seite angezeigt. Hier hast du die Möglichkeit, das Hintergrundbild bei dieser Meldung auszutauschen.

So sieht die 404-Seite im Snackys-Template aus

Loading ...