Flex, Fashion, Cloud Dokumentation

Lesezeit 22 min

Vorbereitung der Installation

Logge dich auf unserer Hauptseite ein, in dem du oben auf <Login> klickst. Nach dem Einloggen gelangst du in dein Kunden-Account und gehst links im Menü auf <Dowloads & Lizenzen>.

In der Übersicht werden alle lizenzierten Domains von dir aufgelistet, samt Anzahl der jew. Produkte. Klicke nun auf deine Domain und beim jew. Produkt auf <Download>.

In der Auflistung findest du alle verfügbaren Produktversionen für unterschiedliche Shop-Versionen mit einem kleinen Kommentar und der Lizenz.

Bitte beachte die Hinweise beim jeweiligen Download.

Inhalt der Produkt-Zip-Datei

Die heruntergeladene ZIP-Datei enthält mehrere Verzeichnisse:

  • Flex
  • FlexChild
  • Installationsdateien

Flex

Das ist das original Template, welches du brauchst um deinen Shop zu betreiben. Dieses beinhaltet alle Vorlagen, CSS-und JS-Dateien, Schriften und Grafiken.

FlexChild

Dieses Template ist ein sogenanntes Kind-Template und ist dafür da, eigene Anpassungen vorzunehmen, die im Original-Template sichtbar werden. Diese werden im Child-Template vorgenommen, damit das original Template stets updatefähig bleibt. In Child-Template kannst du alle Bereiche ändern, deine eigene Ideen einbringen oder auch Template-Farben anpassen.

Installationsdateien

Dieser Ordner beinhaltet Zusatzdateien, wie Plugins, Ressourcen (Beispiel-Bilder für Slider, Kategorien, News) oder auch Gimmicks.

Template-Installation

Lade mit deinem FTP-Programm die Ordner <Flex> und <FlexChild> in dein Haupverzeichnis des Shops nach /templates hoch.

Template aktivieren

Gehe nun in das Shop-Backend, indem du in der Adresszeile des Browsers hinter deiner Domain  www.domain.de/admin schreibst. Logge dich ein und klicke oben in der Navigation auf <Template>. In der Auflistung kannst du direkt erkennen, dass das Standard-Evo-Template bereits aktiviert ist.

Klicke in der Auflistung in der Zeile mit <FlexChild> auf den Button <Aktivieren>. Es öffnet sich eine neue Seite mit allen Template-Einstellungen, die du später in aller Ruhe durchgehen, vorerst aber ignorieren kannst.

Scrolle bis nach unten und bestätige, indem du auf <Speichern> klickst. Das Template ist nun in deinem Shop aktiv und kann im Shopfrontend begutachtet werden.

Das Template ist nicht zu sehen?

Wenn du das aktivierte Template noch nicht siehst, liegt es evtl. an der aktivierten Cache-Funktion des Shops. Wir empfehlen während der Einrichtungsphase die Cache-Funktion komplett abzustellen.
Gehe wieder in das Shopbackend: <System> <Wartung> <Cache>.
Wähle im Reiter <Einstellungen> bei Option <Objekt-Cache aktivieren?> „Nein“ aus und bestätige mit <Speichern>.

Themeart-Installer hochladen

Das Template beinhaltet den sogenannten Themeart Installer, der dir mit einem Klick wichtige Zusatzfunktionen automatisch installiert. Du findest ihn im Ordner /Installationsdateien/Plugins/.

Gehe im Shop-Backend auf <Plugins> <Pluginverwaltung> und klicke den Reiter <Upload> an.

Klicke auf den Button <Auswählen> und wähle das Plugin <themeart_installer.zip> aus dem Ordner /Installationsdateien/Plugins/ aus.

Plugin installieren

Nachdem das Plugin hochgeladen wurde, musst du es noch installieren. Klicken den Reiter <Verfügbar> an und setze bei dem Plugin rechts das Häckchen. Bestätige anschließend mit einem Klick auf den Button <Installieren>.

Nach der Installation findest du das Plugin unter dem Reiter <Aktiviert>.

Inhalte mit dem Themeart Installer einpflegen

Um die Inhalte einzupflegen, gehe nun in das Shopf-Fontend. Es wird dir das Fenster mit dem Installer angezeigt.

Den Installer siehst nur du, als Administrator.

Klicke auf den Button <Installieren>. Nach der Installation wird dein Shop neu geladen und der Installer deaktiviert sich automatisch.

Folgende Inhalte werden vom Installer istalliert:

  • Kategorien auf der Startseite
  • FAQs auf der Kontaktseite
  • Parallax-Inhalte auf der Startseite

Sprachbausteine importieren

Das Template beinhaltet einige zusätzliche Sprachbausteine die im Standard-Template nicht vorkommen. Aus dem Grund muss du sie in den Shop über das Shopbackend <Sprachverwaltung> importieren.

Gehe in das Shopbackend: <System> <Globale Einstellungen> <Sprachverwaltung>.

Du gelangst nun auf die Seite Sprachverwaltung. Klicke unten auf den Button <Importiere Einträge> und wähle die Sprachdatei <ger_xxx.slf> aus. Es wird ein neues Fenster angezeigt mit der Frage „Wie soll importiert werden?„.

Wichtig:

Wähle hier den Eintrag „Vorhandene Einträge beibehalten und neue importieren“ aus, bestätige anschließend mit <Importiere Einträge>.

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. 

Zudem beinhaltet der Kopfbereich zwei Siegel: Trusted Shops und SSL.

Informationen hinterlegen

Wechsel in den Backend-Bereich des Shops, nach Flex-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. Möchtest du dagegen die Icons austauschen, muss dies direkt in der Template-Vorlage gemacht werden. Dazu bitte unter Template das Flex-Child-Template aktivieren.

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:

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>

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.  

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:

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:

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, epfehlen 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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.