Inhalte bearbeiten

Lesezeit 12 min

Welche Elemente auf der Startseite, wo platziert sind und wie kann man diese bearbeiten kann…

Navigation

Die Navigation setzt sich aus den Kategorien und Linkgruppen zusammen. Die Kategorien kommen direkt aus der JTL-Wawi und entsprechen exakt der Kategorienstruktur. Rechts daneben sind zwei Linkgruppen <Kopf> und <megamenu>. Die Links bzw. die Inhalte dieser Linkgruppen können im Shopbackend unter <Inhalte> <Eigene Seiten> bearbeitet werden.

Icons in der Navigation einfügen

Beim Trade-Template ist es möglich neben der Kategoriennamen kleine Icons darzustellen. Die Icons sind eine Schriftart, namens Font Awesome.

Ein neues Funktionsattribut anlegen

  1. Erstelle in JTL-Wawi ein neues Funktionsattribut für den Bereich <Kategorie>.
  2. Der Attributname sollte „icon“ heißen.
  3. Aktiviere das Attribut in deinem Shop.

Das Funktionsattribut einer Kategorie zuweisen

  1. Gehen in deine Wunsch-Kategorie auf den Reiter <Attribute> und klicke unten auf den Button <Anlegen>.
  2. Tippe dort „icon“ ein und wähle den Eintrag mit einem Doppeltklick aus.
  3. Trage als Wert die Klasse des Font Awesome Icons ein, z.B. „fal fa-headphones„.

Slider

Das Template nutzt die Slider-Funktion des Shops und diese können unter <Inhalte> <Slider> erstellt werden. Um den Slider ohne Schatten anzuzeigen bitte das Theme <light> nutzen.

Unter den Template-Einstellungen <Template> <TradeChild> kann festgelegt werden, ob der Slider über volle Seitenbreite geht oder lediglich im mittleren Bereich angezeigt wird.

Einstellung: Full-Width Slider?


USP

Der USP-Bereich findet man unter <Inhalte> <Eigene Seiten> Linkgruppe „USP“ und kann individuell durch eigene Texte oder Icons ersetzt werden. Als Schriftart für die Icons nutzen wir die Font Awesome Pro mit über 5000 Icons. Das Template beinhaltet bereits eine gültige Lizenz.

Bitte beachten

Bearbeite alle Inhalte im Shopbackend am Besten im Quellcode-Ansicht. Damit der WYSIWYG-Editor die Icons nicht entfernt. Klicke im Shopbackend auf die Suche und tippe „editor“ ein. In der Einstellung „CKEditor-Modus“ stelle den Wert auf „Quellcode“ um.


Artikelgruppen

Der Shop bietet standardmäßig die Möglichkeit an auf der Startseite bestimmte Artikelgruppen (Neue, – und Top-Artikel, Sonderangebote, Bestseller) anzuzeigen. Diese können im Shopbackend wie folgt eingestellt werden:

  1. Gehe in das Shopbackend auf <System> <Globale Einstellungen> <Startseite>.
  2. Stelle die Anzahl der Artikel ein welche du auf der Startseite sehen möchtest. ferner kannst du auch die Reihenfolge der Artikelgruppen beeinflussen.

Bitte beachten: Bestimmte Artikelgruppen wie „Top-, Neue,- und Sonderangebote“ sollten als solche zuerst in JTL-Wawi gekennzeichnet werden. Dazu bitte das Handbuch für JTL-Wawi zu Rate ziehen.

Die Darstellung der Artikelgruppen wird durch einen Content-Slider oder Kategorien aufgelockert, je nach Einstellung. um diese anzuzeigen, muss auf der Startseite min. eine Artikelgruppe sichtbar sein.


Kategorien

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

  1. Gehe in das Shopbackend auf <Inhalte> <Eigene Seiten> und klicke bei der Linkgruppe <Kategorien> auf das Plus-Icon.
  2. In der Auflistung findest du fünf Beispiel-Kategorien. Klicke eine der Kategorien an und bearbeite sie, in dem du den Namen, die Grafik und die Verlinkung austauschst.

Diese Punkte sollen ausgefüllt sein:

  • Name: Name der Kategorie
  • Seitentyp: ein relativer Link zu der Kategorie
  • Angezeigter Name: Dieser Name sehen deine Besucher im Frontend
  • Inhalt: Deine Grafik

Ferner gibt es auch die Möglichkeit über die Meta-Keywords, die an dieser Stelle nicht genutzt werden, das Grid-Layout einzustellen.

Hier sind die Einstellungen für das Grid-System:

Erste Kategorie (Kasked Justo): col-xs-12 col-sm-6 col-md-6

Weitere Kategorien: col-xs-6 col-sm-6 col-md-3

Bitte beachte auch die Größe der Bilder um alle Bereiche einheitlich darzustellen.

Großes Bild: 860 x 860 px
Kleine Bilder: 430 x 430 px


Content-Slider

Mit dem Content-Slider ist es möglich eigene Promotion-Grafiken oder Promotion-Inhalte anzuzeigen.

  1. Gehe in das Shopbackend auf <Inhalte> <Eigene Seiten> und klicke bei der Linkgruppe <Content-Slider> auf das Plus-Icon.
  2. In der Auflistung findest du zwei Beispiel-Inhalte mit den Grafiken. Klicke eine der Seiten an und bearbeite sie, in dem du den Namen, die Grafik und die Verlinkung austauschst.

Die Grafiken sollten möglichst mit anderen Grafiken bzw. Slidern harmonieren, achte darauf. Die Größe der Grafiken ist 1920 x 550 px.


News/Blog

In unserem Demo-Shop nutzen wir die News-Funktion des Shops. Ob du diese nutzen möchtest, bleibt dir überlassen. Du findest diese unter <Inhalte> <News> und kannst sie bearbeiten und auch die Bilder austauschen. Wir haben als Beispiel drei letzte News auf der Startseite eingestellt. Die Anzeahl der News kann man im Reiter <Einstellungen> vornehmen.


FAQ auf der Kontaktseite

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.

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

  1. Gehe in das Shopbackend auf <Inhalte> <Eigene Seiten> und klicke bei der Linkgruppe <FAQ> auf das Plus-Icon.
  2. In der Auflistung findest du einige Beispiele. Klicke eine der Beispiele an und bearbeite sie, in dem du den Namen und den Inhalt austauschst.

Jede Seite der FAQ-Linkgruppe stellt eine Frage-Antwort dar und kann jederzeit nachbearbeitet werden.

FAQ auf der Contentseite

Das Template beinhaltet eine Accordion-Funktion für FAQ. Diese sollten nach folgendem Schema formatiert werden:

<div class="accordion">

<strong>Hier steht die Frage</strong>
<p>Hier steht die Antwort...</p>

<strong>Hier steht die Frage 2</strong>
<p>Hier steht die Antwort 2...</p>

</div>

Ferner kann man auch linksbündig, wie im Demo-Shop, die Hauptbereiche anzeigen.

<div class="row">
    <div class="col-sm-5 col-md-4 col-xs-12">
        <h5 class="text-left">Fragen zur Bestellung</h5>
        <div class="news-body">Beschreibung...</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-offset-1">
        <div class="accordion">

... hier stehen Fragen ...

        </div>
    </div>
</div>

Google Map

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.

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“. Mehrere Adressen kannst du mit Semikolon „;“ trennen.