Fashion-Template, Installation und Einrichtung

Geschrieben von Sergej Stroh

Eine solide Grundlage für Ihren Shop, setzen Sie auf Fashion-Bootstrap-Template. http://www.themeart.de/Fashion-JTL-Shop-Template

Screenshot

Übersicht

Nachdem Sie das ZIP-Archiv mit dem Template entpackt haben, finden Sie im Verzeichnis folgende Ordnerstruktur:

  • Installationsdateien .......... Zusätzliche Dateien für das Template
    • Sprachdateien ............ Neue Sprachdateien für Template
  • Fashion .......................... JTL4 Template
  • FashionChild ...................... Das Child-Template für eigene Anpassungen

Installation

Laden Sie den Ordner Fashion und FashionChild auf Ihren Webserver in das Verzeichnis /templates/ hoch.

Screenshot

  1. Gehen Sie in das Backend des Shops /admin und loggen Sie sich ein.
  2. Wechseln Sie nach Template.

Screenshot

  1. In der Template-Auflistung, in der Zeile mit dem Template, klicken Sie auf den Button Aktivieren.
  2. Im Bereich Template-Lizenzierung in der Zeile Lizenz tragen Sie Ihre Template-Lizenz ein.

⋅⋅⋅Screenshot

  1. Anschliessend scrollen Sie nach unten und speichern alle Einstellungen ab. Die wichtigsten Einstellungen des Templates sind bereits vorausgewählt.

Die Lizenz finden Sie (Anmeldung vorausgesetzt) unter dem Link Meine Downloads.

Sprachvariablen

Das Template beinhaltet einige neuen Sprachvariablen, die über Sprachverwaltung des Shops zu importieren sind.

Screenshot

In der Sprachverwaltung wählt man im Auswahlmenü die deutsche Sprache und klickt den Reiter Import an.

Screenshot

Mit einem Klick auf Durchsuchen, wählt man die zu importierende Datei aus dem Installations-Ordner Installationsdateien/Sprache/ aus und klickt auf den Button Importieren.

Wichtig ist hier bei Typ die Option Vorhandene beibehalten, neue importieren zu wählen.

Kopfbereich

Der Kopfbereich beinhaltet einige Besonderheiten die sich je nach Template variieren können. Das Fashion Template beinhaltet im oberen Bereich eine Hotline-Nummer die sich bei Klick über Smartphone automatisch anwählen lässt. Ferner beinhaltet der Kopfbereich zwei Siegel, Trusted Shops und SSL.

Informationen hinterlegen

Wechseln Sie nun in das Backendbereich des Shops, nach Fashion-Template. Im oberen Bereich Kopfbereich-Einstellungen. Hier hinterlegen Sie bitte die Hotline-Nummer, den Link zum Trusted Shops Seite (Sollten Sie Trusted Shops nicht brauchen, bitte die Raute # entfernen) und ob das SSL-Siegel angezeigt werden soll.

Screenshot

Schriftzug anpassen

Der Schriftzug "weltweit ab 100 € Bestellwert" kann jederzeit über Sprachverwaltung bearbeitet werden. Möchten Sie dagegen die Icons austauschen, muss dies direkt in der Template-Vorlage gemacht werden. Dazu bitte das FashionChild-Template aktivieren.

Screenshot

Logo

Das Logo kann über das Shopbackend hochgeladen werden. Wichtig ist hier das Logo passend von der Grösse hochzuladen, nicht zu gross und nicht zu klein, damit es auf Retina-Geräten keine verpixelte Darstellung gibt. Richten Sie sich bitte am Fashion-Logo (Höhe: 130px, Breite: 337px).

Screenshot

Megamenü

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

Frontend-Ansicht

Screenshot

Backend-Ansicht

Screenshot

Startseite

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

Screenshot

Kategorien einrichten

Wechseln Sie in das Backendbereich des Shops nach Inhalte -> Eigene Seiten und legen Sie eine neue Linkgruppe Kategorien an, wie auf der Abbildung zu sehen.

Screenshot

Danach fügen Sie dieser Linkgruppe eigene Seiten ein. Jede Seite stellt eine Kategorie dar, d.h. wenn Sie 3 Kategorien brauchen, müssen 3 Seiten angelegt werden.

Wichtig: Diese sollen vom Seitentyp: "Link zu einer externen Adresse" sein, wo Sie darunter einen relativen (Bsp.: /Kueche) Link zu Ihrer Wunschkategorie einfügen.

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

Angezeigter Name -> Überschrift

Überschrift -> Ihr Aktion-Text

Screenshot

<img alt="Kategorie" class="img-responsive" src="/mediafiles/Bilder/kat-02.jpg" />

Es sind max. 3 Kategorien pro Zeile vorgesehen.

Aktionsbereich

Der Aktionsbereich soll Ihre Besucher zu bestimmten Aktionen animieren. Das können z.B. Sonderangebote, Exklusive Artikel oder Services sein. Welchen Inhalt Sie platzieren, bleibt an dieser Stelle Ihnen überlassen.

Screenshot

Einrichtung

Wechseln Sie in das Backendbereich des Shops nach Inhalte -> Eigene Seiten und legen Sie eine neue Linkgruppe Parallax an, wie auf der Abbildung zu sehen.

Screenshot

Danach fügen Sie dieser Linkgruppe eigene Seiten ein. Jede Seite stellt eine Aktions dar, d.h. wenn Sie 3 Aktionen brauchen, müssen 3 Seiten angelegt werden. Alle Aktionen werden in einem Slider abwechselnd angezeigt.

Wichtig: Diese sollen vom Seitentyp: "Seite mit eigenem xHTML-Inhalt" sein.

Screenshot

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

<h4>Dies ist Neu</h4>
<h5>Sparen bis zu 30%</h5>
<div class="body">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 eigenen austauschen. Auch die Button-Farbe kann auf grau wie folgt geändert werden:

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

News

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

Screenshot

Info: Sollten Sie keine anzeigen wollen, bitte den Wert auf 0 stellen.

Kontaktseite

Die Kontaktseite beinhaltet gleich zwei Funktionen, ein GoogleMap und das FAQ-Widget.

GoogleMap

Das GoogleMap zeigt auf einer Karte die Adresse Ihres Ladenlokals oder Unternehmens und zwar die Adresse die Sie unter Template-Einstellungen eingetragen haben.

Screenshot

Google Map Key

Damit GoogleMap in Ihrem 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.

Screenshot

Adresse für Google Map

Tragen Sie hier Adresse ein, die auf GoogleMap angezeigt wird. Bitte in Form "Strasse Haus-Nr., PLZ Ort, Land"

Screenshot

FAQ

Das Template beinhaltet ein FAQ-Widget welches auf der Kontaktseite angezeigt wird. Die FAQ können wichtige Fragen zur Bestellung, Ablauf, Sendungsverfolgung oder Hotline aufnehmen. Das Widget ist so umgesetzt dass es eine hierarchische Struktur unterstützt wird.

Screenshot

Einrichten

Wechseln Sie in das Backendbereich des Shops nach Inhalte -> Eigene Seiten und legen Sie eine neue Linkgruppe FAQ an, wie auf der Abbildung zu sehen.

Screenshot

Danach fügen Sie dieser Linkgruppe eigene Seiten ein. Jede Seite stellt eine FAQ dar.

Screenshot

Fussbereich

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

Screenshot

Firmen-Teaser, Hotline-Box und Arbeitszeiten

Der Teaser soll eine kleine Firmendarstellung sein, kurz, knapp und auf den Punkt gebracht. Der Text unter dem Überschrift Haben Sie Fragen? ist eine Hotline-Box mit Arbeitszeiten und kann beliebigen Text aufnehmen. Der Teaser und Hotline-Box wird unter Template-Einstellungen, Bereich Footer-Einstellungen eingepflegt.

Screenshot

Socialmedia

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

Screenshot

Info: ist hier absolute Links einzutragen, d.h. mit http:// oder https://

Newsletter

Das Newsletter-Formular wird zusammen mit 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 Shopbackend 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 jew. Sprache entspricht.

Screenshot

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

Die Boxenverwaltung, Footer nimmt Ihre Links auf und sollte manuell eingestellt werden. Darunter unter Neue Box -> Linkliste -> Linkgruppe wählen und auf einfügen klicken.

Screenshot

Nun wird eine neue Box Linkgruppe erstellt, Sie klicken auf das "Bearbeiten-Icon" und wählen passende Linkgruppe (Informationen, Fuss) aus.

Screenshot

Logos / Inhalte

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

Erstellen Sie unter Inhalte -> Eigene Seiten eine neue Linkgruppe Fusscontainer. Alle Inhalte der Seiten die Sie in dieser Linkgruppe platzieren, werden automatisch in der zweiten Zeile angezeigt.

Screenshot

Dies kann z.B. wie folgt aussehen:

Screenshot

Performance

Das Template erfüllt alle Vorgaben der JTL-Software und beinhaltet einen kompletten Funktionsumfang des JTL-Shops in Version 4.04x. Um den Shop performater zu machen enpfehlen wir unter Template-Einstellungen -> Performance folgende Optionen zu setzen.

Screenshot

Alle CSS- und JS-Dateien werden zusammengefasst, Ladezeit wird verringert.

Ferner empfehlen wir alle Bilder zu optimieren, die bei News oder auf den Shopseiten eingebunden werden. Durch Optimierung werden alle nicht benötigte Informationen aus den Bildern entfernt, Bildgröße wird verringert. Wir nutzen seit Jahren imageoptim für den Mac, https://imageoptim.com/mac

Eigene Anpassungen

Das Template beinhaltet ein Child-Template um eigene Anpassungen am Template vorzunehmen ohne das Original anzufassen. Dies hat den Vorteil, dass das Original-Template updatesicher bleibt und jederzeit auf eine neuere Version aktualisiert werden kann.

Sollten Sie das Template um eigene Funktionen erweitern wollen, so haben wir für Sie mehrere Beispiele im Child-Template definiert, auch zu functions.php, die das Ganze veranschaulichen. Gerne setzen wir Ihre Wunschfunktionen für Sie um, sprechen Sie uns an.

Mehr zu dazu finden Sie im Guide von JTL-Software, Child-Template >

Zurück