Smile Dokumentation

Lesezeit 15 min

Kopfbereich einrichten

Der Kopfbereich beinhaltet einige Besonderheiten die je nach Template variieren können. Das Smile Template z.B. beinhaltet im oberen Bereich eine Hotline-Nummer, die sich beim Anklicken über das Smartphone automatisch anwählen lässt. 

Informationen hinterlegen

Wechsel in den Backend-Bereich des Shops, nach Smile-Template. Im oberen Bereich findest du die Kopfbereich-Einstellungen. Hier hinterlegst bitte die Hotline-Nummer, den Link zur Trusted Shops Seite (solltest du Trusted Shops nicht brauchen, bitte die Raute # entfernen) und ob das SSL-Siegel angezeigt werden soll.

Schriftzug anpassen

Der Schriftzug weltweit ab 100 € Bestellwert kann jederzeit über die Sprachverwaltung bearbeitet werden. Diese erreichst du über System > Globale Einstellungen > Sprachverwaltung.

Logo

Das Logo kann über das Shop-Backend hochgeladen werden. Wichtig ist hier das Logo in der passenden Größe hochzuladen, nicht zu gross und nicht zu klein, damit es auf Retina-Geräten keine verpixelte Darstellung gibt. Richte dich bitte nach dem Smile-Logo (Höhe: 130px, Breite: 337px).

Megamenü

Das Megamenü kann neben den Kategorien und Herstellern auch eigene Links aufnehmen. Dafür ist die Linkgruppe megamenu unter Inhalte > Eigenen Seiten verantwortlich.

Ansicht Frontend:

Slider einstellen

Gehe in das Shopbackend auf <Inhalte> < Slider> und klicke auf den Button <Slider hinzufügen>. Folgende Einstelungen sind wichtig:

  • Interner Name: Deine interne Bezeichnung für Slider
  • Status: Aktiviert
  • Navigation: Anzeigen
  • Theme: light
  • Seitentyp: Startseite

Nachdem du den Slider angelegt hast, kannst einzelne Slidergrafiken definieren in dem du in der Auflistung auf das „image-Icon“ klickst.

Kategorien auf der Startseite einpflegen

Auf der Startseite ist die Anzeige der wichtigsten Kategorien integriert. Diese Kategorien können individuell mit eigenen Grafiken und Überschriften versehen werden.

Kategorien einrichten

 Wechsel in den Backend-Bereich des Shops nach Inhalte>Eigene Seiten und lege eine neue Linkgruppe Kategorien an, wie auf der Abbildung zu sehen:

Danach fügst du in dieser Linkgruppe eigene Seiten ein. Jede Seite stellt eine Kategorie dar, d.h. wenn du 3 Kategorien brauchst, musst du 3 Seiten anlegen.

Wichtig:

Diese sollen vom Seitentyp: „Link zu einer externen Adresse“ sein, wo du einen relativen (Bsp.: /Kueche) Link zu deiner Wunschkategorie einfügst.

Das Kategoriebild kann über den WYSIWYG-Editor eingefügt werden und sollte mit der CSS-Klasse img-responsive versehen werden (markierte Stelle), damit das Bild sich der Boxenbreite automatisch anpasst.

 Angezeigter Name -> Überschrift

 Überschrift -> Ihr Aktion-Text

HTML-Code:

<img alt="Kategorie-Name" class="img-responsive" src="/mediafiles/Bilder/IHR-BILD.jpg" />

Aktionsbereich mit Paralax einrichten

Der Aktionsbereich soll deine Besucher zu bestimmten Aktionen animieren. Das können z.B. Sonderangebote, Exklusive Artikel oder Services sein. Welchen Inhalt du platzierst, bleibt an dieser Stelle dir überlassen.

Einrichtung

Wechsel in den Backend-Bereich des Shops nach Inhalte>Eigene Seiten und lege eine neue Linkgruppe Parallax an, wie auf der Abbildung zu sehen: 

Danach erstellst du in dieser Linkgruppe eigene Seiten. Jede Seite stellt eine Aktions dar, d.h. wenn du 3 Aktionen brauchst, müssen 3 Seiten angelegt werden. Alle Aktionen werden im Slider abwechselnd angezeigt.

Wichtig:

Diese sollen vom Seitentyp: „Seite mit eigenem xHTML-Inhalt“ sein.

 Der Angezeigter Name kann beliebig benannt werden, wichtig ist nur der Inhalt. Bitte gestalte diesen wie auf der Abbildung zu sehen. Hier nochmal als HTML-Code: 

<h4>Dies ist Neu</h4>
<h5>Sparen bis zu 30%</h5> 
<div>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Ut non libero magna. Sed et quam lacus. Fusce  condimentum eleifend enim a feugiat. Pellentesque viverra vehicula sem  ut volutpat. Integer sed arcu massa.</div>
<a class="btn btn-primary" href="#">Jetzt anschauen</a>

Den Link bitte durch den eigenen austauschen. Auch die Button-Farbe kann, wie folgt, auf grau geändert werden:

<a class="btn btn-default" href="#">Jetzt anschauen</a>

Artikel auf der Startseite anzeigen

Der JTL-Shop beinhaltet eine Funktion auf der Startseite bestimmte Artikelgruppen anzuzeigen. Das sind:

  1. Neu im Sortiment
  2. Top-Angebote
  3. Sonderangebote
  4. Bestseller

Die Einstellung erreichst du über das Shop-Backend, System>Globale Einstellungen>Startseite.

Bitte beachte:

Je nach Template kann die Anzahl der angezeigten Artikel variieren. Bei der Darstellung in einem Slider kann die Anzahl wie folgt festgelegt werden:

Bei Anzahl 4 –> Kein Slider
Ab 4 Artikel –> Artikel im Slider

Optimale Artikel-Bildgröße einstellen

Damit man die Produktbilder im Shop optimal ins Szene setzen kann und diese auch über mobile Geräte möglichst scharf aussehen, empfehlen wir folgende Einstellungen zu setzen.

Info

Je nach Produktpalette können diese natürlich abweichen.

Welche Spalte ist jetzt für welche Darstellung verantwortlicht?

Mini: Produktbilder im Warenkorb, Variationen auf der Detailseite

Klein: Produktbilder in der Produktübersicht / Produktliste, Slider, Bestellbestätigung

Normal: Produktbilder auf der Detailseite

Groß: Produktbilder beim Klick auf Detailbild (Produktdetail-Seite)

Wichtig:

Bitte übertreibe nicht mit der Bildgröße, dies hat einen direkten Einfluss auf die Geschwindigkeit des Shops.

News aktivieren und pflegen

Die Anzahl der News bitte unter Inhalte>News, Reiter „Einstellungen“ bei „Option Anzahl News auf Startseite“ auf 3 einstellen. 

Je nach Template kann die Anzahl der News auf der Startseite variieren.

Info:

Solltest du keine anzeigen wollen, bitte den Wert auf 0 stellen.

Fußbereich einrichten

Der Fussbereich beinhaltet neben den wichtigen Links auch einen Firmen-Teaser, Hotline-Box, Newsletter-Formular und Socialmedia-Links:

Firmen-Teaser, Hotline-Box und Arbeitszeiten

 Der Teaser soll eine kleine Firmendarstellung sein, kurz, knapp und auf den Punkt gebracht. Der Text unter der Überschrift Haben Sie Fragen? ist eine Hotline-Box mit Arbeitszeiten und kann mit einem beliebigen Text gefüllt werden. Der Teaser und die Hotline-Box werden unter Template-Einstellungen, im Bereich Footer-Einstellungen eingepflegt:

Socialmedia

Das Template beinhaltet Verweise auf Social Media-Dienste, die bereits mit passenden Icons versehen sind. Die URLs können im Shop-Backend unter Template-Einstellungen, im Bereich Footer-Einstellungen eingetragen werden.

Info:

Hier ist der absolute Link einzutragen, also: mit http:// oder https://

Newsletter

Das Newsletter-Formular wird zusammen mit den Social Media-Icons in einer Spalte angezeigt. Um dieses Formular auszublenden gibt es unter Footer-Einstellungen folgende Option: Newsletter-Anmeldung im Footer.

Eigene Links im Footer

Das Template beinhaltet Platz für drei Linkgruppen: Informationen, Fuss und Service, die alle Ihre Links aufnehmen können. Diese Links werden über Eigene Seiten im Shop-Backend angelegt und danach über Inhalte>Boxenverwaltung, Box Linkgruppe definiert. Die Überschriften der Links können individuell benannt werden, wobei das Feld Angezeigter Name der Überschrift der jeweiligen Sprache entspricht.

Achtung:

Das Feld Templatename darf nicht geändert werden. Dies wird im Template angefragt und kann dann eine der Fehlerquellen sein.

Die Boxenverwaltung Footer nimmt deine Links auf und sollte manuell eingestellt werden. Unter Neue Box>Linkliste>Linkgruppe wählen und auf einfügen klicken:

Nun wird eine neue Box-Linkgruppe erstellt. Du klickst auf das „Bearbeiten-Icon“ und wählst die passende Linkgruppe (Informationen, Fuss) aus:

Logos / Inhalte

Neben den eigenen Links kann der Fussbereich noch viele andere Informationen aufnehmen. Dies können Texte, Logos oder Siegel von Partnerseiten sein.

Erstelle unter Inhalte>Eigene Seiten eine neue Linkgruppe Fusscontainer. Alle Inhalte der Seiten, die du in dieser Linkgruppe platzierst, werden automatisch in der zweiten Zeile angezeigt:

Dies kann z.B. wie folgt aussehen:

Google-Map/FAQ auf Kontaktseite aktivieren

Die Kontaktseite beinhaltet gleich zwei Funktionen: eine Google-Map und das FAQ-Widget.

GoogleMap

 Die Google-Map zeigt auf einer Karte die Adresse deines Ladenlokals oder Unternehmens an – und zwar die Adresse die du unter Template-Einstellungen > Kontaktdaten eingetragen hast.

Google Map Key

 Damit die Google-Map in deinem Shop angezeigt wird, muss unter https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de ein API-Key vom Typ: Browser erstellt werden.

Wichtig:

Bei „Anfragen von diesen HTTP-Referrern (Websites) annehmen“ bitte unbedingt die URL des Shops eintragen, damit dies nicht missbraucht werden kann.

Adresse für Google Map

Trage hier die Adresse(n) ein, die auf der Google-Map angezeigt wird. Bitte in Form von „Strasse, Haus-Nr., PLZ, Ort, Land“

FAQ-Widget

Die FAQ können wichtige Fragen zur Bestellung, zum Ablauf, der Sendungsverfolgung oder zur Hotline aufnehmen. Das Widget ist so umgesetzt, dass eine hierarchische Struktur unterstützt wird.

Wichtig:

Wird das Kontaktformular nicht angezeigt, richte erstmal einen Betreff mit einer Email-Adresse ein: Storefront >Kontaktformular.

Einrichten der FAQ

Wechsel in den Backend-Bereich des Shops nach Inhalte>Eigene Seiten und lege eine neue Linkgruppe FAQ an, wie auf der Abbildung zu sehen:

Danach fügst du in dieser Linkgruppe eigene Seiten ein. Jede Seite stellt zuerst einmal eine FAQ dar.

Wenn du aber deine FAQs Kategorien zuordnen möchtest, um es übersichtlicher zu gestalten, legst du erst einmal wie gehabt über Seite hinzufügen eine neue Seite an und benennst diese so, wie die entsprechende Überschrift der Kategorie heißen soll, in unserem Beispiel Fragen zur Bestellung. Damit diese nun als Kategorie mit Überschrift angezeigt wird, musst du eine weitere Seite anlegen und sie der Fragen zur Bestellung-Seite unterordnen (untergeordnete Seiten erkennst du an den Pfeilen)

Im Front-End sieht deine neue Kategorie mit untergeordneten FAQs dann so aus:

Wenn du alles genau nach Anweisung eingerichtet hast, sollte deine Kontaktseite in etwa so aussehen: