Benutzer-Werkzeuge


Navigation

05 Rund um das Shopdesign

Sie haben bei Rakuten die Möglichkeit, Ihren Shopbereich anzupassen. Dazu bietet Rakuten drei verschiedene Designs.

In diesem Artikel zeigen wir Ihnen, welche Elemente Sie anpassen können.

Darum geht es

Mit den drei Templates, die Rakuten Ihnen zur Verfügung stellt, können Sie Ihren Shop individualisieren.

Innerhalb weniger Millisekunden hat der Kunde festgestellt, ob der Shop vertrauenswürdig und professionell ist.

Ebenso ist die Entscheidung gefallen, ob dies der richtige Shop für die Lösung des Kundenproblems ist.

Denn genau deswegen hat der Kunde Ihren Shop aufgerufen: er hat ein Problem, das Sie lösen sollen. Das Problem ist, dass er etwas kaufen will oder muss und jemand er bei einem zuverlässigen Händler diesen Kauf abschließen möchte.

Dabei spielen folgende Punkte eine wichtige Rolle:

  • Vertrauenswürdigkeit
  • Kompetenz
  • Zuverlässigkeit
  • Sicherheit

Diese Punkte kann der Händler über ein gut konzipiertes Design vermitteln, der Kunde fühlt sich an der richtigen Stelle.

Aber nicht nur ein gutes Design ist wichtig. Es schürt Erwartungen, die Sie im Bereich der Inhalte einhalten müssen. Nur mit guten Inhalten, Texten und Bildern, können Sie in vielen Fällen einen Kauf für sich entscheiden.

Fehlt eine Information, die dem Kunden gerade wichtig erscheint, wird der Kunde den Artikel nicht kaufen. Oder auf Verdacht kaufen und die Rücksendung des Artikels mit einplanen.

Grundlagen für Ihr Shop-Design

Als das World Wide Web die ersten Schritte machte, waren die Seiten in Abschnitte unterteilt, es gab horizontale Linien, Bilder kamen hinzu, die später animiert wurden. Tabellen wurden für das Design verwendet, später kamen sogenannte Container und CSS zur Anwendung. Content-Management-Systeme (CMS) wurden entwickelt, die heutzutage von vielen Usern benutzt werden.

Auch das Rakuten-Shop-System ist mit einem CMS ausgestattet, mit dem Sie arbeiten können. Hierüber bearbeiten Sie nicht nur die Inhalte, sondern können auch über den Look&Feel-Editor sowie dem HTML-Editor am Design des Shops Änderungen vornehmen.

Mit dem Look&Feel-Editor bieten wir Ihnen eine Möglichkeit, ohne HTML Änderungen an verschiedenen Einstellungen vorzunehmen.

Kompletten Zugriff auf die HTML-Dateien des Shopbereichs haben Sie über den Experten-Modus, den HTML-Editor.

Vorbereitungen

Bevor man eine Website (Internetpräsenz) veröffentlicht, sollte man sich Gedanken über die Gestaltung machen.

Dazu gehört:

  • Shoplogo
  • Farbgestaltung
  • Anordnung der Elemente
  • Welche Inhalte werden verwendet
  • Benutzerführung (Navigation)

Im Rakuten-Shop-System stehen Ihnen drei Grund-Designs (Templates) zur Verfügung, die unterschiedliche Möglichkeiten und Strukturen besitzen.

Das Standard-Template ist bereits vorinstalliert und hat wenige Anpassungsoptionen.

Das Template Pangea besitzt wesentlich mehr Konfigurationsmöglichkeiten im Look&Feel-Editor als das Template Aurelio.

Alle Templates sind in diesem Hilfe-Center genauer beschrieben. Wir haben die Einstellungsmöglichkeiten auch in Form eines Videos online gestellt.

Haben Sie sich diese Grundlagen überlegt, können Sie die Gestaltung vornehmen.

Achten Sie aber bitte immer auf ein professionelles Auftreten und holen Sie den Rat anderer im Bereich der Farbgebung ein.

Anmerkungen


Überall dort, wo Sie „Farbe“ lesen, können Sie in das Einfabefeld einen Hexadezimalcode eingeben oder über das Farbquadrat vor dem Eingabefeld eine Farbe wählen (klicken Sie auf das Farbquadrat).


Überall, wo Sie dies sehen, können Sie ein Bild auswählen, das Sie unter Shop → Eigene Dateien hochgeladen haben.


Bei Textboxen können Sie einen HTML-formatierten Text einfügen. Um HTML zu schreiben, können Sie einen Editor (z.B. unter Shop → Blog) verwenden und den Quellcode einbinden.

Achten Sie bitte immer darauf, dass Sie hochwertige Bilder und Grafiken verwenden. Sie möchten als professioneller und vertrauenswürdiger Händler wahrgenommen werden, daher ist auch das Auftreten, das Erscheinungsbild des Shops wichtig.

Das Shoplogo ist das Firmenschild, mit dem Sie den Kunden begrüßen. Heutzutage sind auch mit einfachen Grafikprogrammen gute Bilder möglich. Lassen Sie sich eventuell, wenn noch nicht geschehen, ein Firmenlogo von einem professionellen Grafiker erstellen.

Beachten Sie bitte, dass die Maße des Logos nicht zu klein, aber auch nicht zu groß sein sollten. Eine pauschale Angabe wollen wir hier nicht treffen, da dies von verschiedenen Faktoren abhängt und wird u.a. von der Form des Logos bedingt.

:!: Verwenden Sie keine Logos, in denen eine URL enthalten ist.

Laden Sie bitte das Logo für Ihren Shop unter Shop → Eigene Dateien hoch. Dort haben Sie 50 MB Speicherplatz.

Binden Sie dann das Shoplogo unter Shop → Layout im Look&Feel – Editor unter Header-Bereich (Pangea) bzw. Oberer Bereich (Aurelio) als Logo ein. Zusätzlich können Sie für den Header-Bereich eine Hintergrundgrafik einbinden, die ebenfalls unter Eigene Dateien zu finden sein muss.

Passen Sie bitte auch die Höhe des oberen Bereichs an. Er sollte mindestens die Höhe des Logos betragen.

Farben in Ihrem Shop

Passen Sie die Farben in Ihrem Shop an. Achten Sie dabei auf ein harmonisches und professionelles Erscheinungsbild Ihres Shops.

Nutzen Sie die Möglichkeiten, die Ihnen der Look&Feel-Editor bietet.

Tipp: Eine Datenbank an harmonisierenden Farben finden Sie unter http://www.colorcombos.com/combolibrary.html
Ein informatives Filmchen zum Thema Farben finden Sie unter http://www.mariaclaudiacortes.com/colors/Colors.html

Achten Sie aber darauf, dass die Farben zu Ihrem Shop, Ihrem Sortiment, Ihrer Klientel und dem Preissegment passen müssen.

Sie können folgende Farben über den Look&Feel-Editor anpassen:

Template Pangea

  • Hintergrundfarbe der gesamten Webseite. Alternativ können Sie ein Hintergrundbild einfügen.
  • 2 Basisfarben. Basisfarbe 1 wird u.a. für die horizontale Navigation und Links verwendet, die Basisfarbe 2 für Buttons, Mouseover-Effekte und aktive Links.
  • Hintergrundfarbe des Shop-(Content)Bereichs

Weitere Farbanpassungen können Sie über das Feld individuelle CSS-Anpassungen vornehmen. Hierzu sind allerdings Kenntnisse in CSS nötig.

Template Aurelio

  • Navigation und Fußbereich – Hintergrund- und Schriftfarbe
  • Kategorie-Titel Hintergrund- und Schriftfarbe
  • Überschriften – Hintergrund- und Schriftfarbe
  • Farbe für Hervorhebungen (Links, Button, etc.)
  • Hintergrundfarbe Hauptinhaltsbereich
  • Warenkorb-Button – Farbe und Mouseover

Beim Warenkorb achten Sie bitte darauf, dass die Farbe nicht zum Corporate Design passen sollte. Ideal als Signalfarbe ist rot, doch wenn diese Farbe öfter im Design verwendet wird, fällt diese eventuell nicht mehr auf.

Hintergrundgrafik

Sie haben auch die Möglichkeit, für die gesamte Webseite eine Hintergrundgrafik zu verwenden, die Wandtapete sozusagen.

Dabei gibt es vorgefertigte Muster, die Sie nutzen können, aber auch eigene Bilder sind möglich. Diese laden Sie unter Shop → Eigene Dateien in das Bilder-Verzeichnis und nutzen diese Hintergrundgrafik über den Look&Feel-Editor.

Achten Sie darauf, dass die Hintergrundgrafik eine nicht zu große Datenmenge umfasst, um die Ladezeit der Webseite nicht zu hoch werden zu lassen.

Sie haben hierbei die Möglichkeit, den Hintergrund mit der Seite mitscrollen zu lassen oder das Bild als feststehende, unbewegliche Grafik zu hinterlegen. Ebenso können Sie bestimmen, ob das Bild/die Grafik nur einmal von links nach rechts wiederholt angezeigt werden soll oder nur einmal von oben nach unten und der Rest der Seite die vordefinierte Hintergrundfarbe anzeigen soll.

Im Template Pangea legen Sie dies unter Farbeinstellungen und Erscheinungsbild fest, im Template Aurelio geschieht dies über Allgemein - Hintergrundeinstellungen.

Achten Sie immer darauf, dass das Design stimmig und wertig wirkt. Lieber verwenden Sie einen einfarbigen Hintergrund als einen billig wirkenden oder störenden.

Slider bearbeiten

Abhängig vom gewählten Template, können Sie den Slider bearbeiten. Im folgenden zeigen wir Ihnen, wie das geht.

Beachten Sie bitte die unterschiedlichen Größenangaben:

Template Standard mind. 940*275 - max. 2000*275 Pixel
Template Aurelio genau 690*350 Pixel, wenn schmales Bild aktiviert ist
genau 971*350 Pixel, wenn schmales Bild nicht aktiviert ist
Template Pangeagenau 940*400 Pixel

Bei Aurelio und Pangea müssen die Maße genau eingehalten werden, damit die Grafiken richtig dargestellt werden.

Standardtemplate

Für die Startseite können Sie die Bildergalerie (Slider) konfigurieren. Dazu steht Ihnen die Möglichkeit zur Verfügung,

  • den Slider anzeigen zu lassen oder ihn zu deaktivieren
  • die Anzahl der Slides zu bestimmen (max. 3)
  • die Bilder zu hinterlegen
  • einen Alternativ-Text (alt-Tag/SEO-Text) anzugeben
  • die Verlinkung zu hinterlegen.
  • Zunächst entscheiden Sie, ob der Slider angezeigt werden soll oder nicht.
  • Anschließend wählen Sie die Anzahl der Slides aus: sie können max. 3 Bilder hinterlegen.

Ideal sind Grafiken im Format zwischen 940 und 2000 Pixel in der Breite.
Die Höhe der Grafiken betragen 275 Pixel. Andere Formate können angezeigt werden.
Kleinere Grafiken füllen nicht die gesamte Fläche aus, größere werden abgeschnitten.

  • Laden Sie Ihre Grafiken unter Eigene Dateien hoch, damit Sie diese dann hier unter Slide 1 - Bild (entsprechend für slide 2 und Slide 3) auswählen können.
  • Zu jedem Bild können Sie einen Alternativtext (SEO-Text) angeben
  • Vergessen Sie nicht, für jedes Bild eine Verlinkung zu setzen.

Wenn Sie zu einem Produkt verlinken möchten, suchen Sie bitte das entsprechende Produkt in Ihrem Shop (Live-Modus) aus und kopieren die URL aus der Adresszeile heraus und fügen diese dann in die Zeile Slide 1 - Link (URL) (entsprechend für Slide 2 und Slide 3).

Template Aurelio

Den Slider bearbeiten Sie im Template Aurelio unter Startseite - Bildergalerie (mit großem schmalen Bild)

8 Bilder können Sie in der Startseiten-Bildergalerie (Bilder-Slider) hinterlegen. Mit diesen Bildern können Sie beispielsweise auf Aktionen, Produkte, Newsletter-Anmeldung etc. verlinken.

Dabei gibt es zwei Breiten des Bilder-Sliders, die Sie verwenden können:
Wenn Sie rechts neben dem Bilder-Slider noch das schmale Bild anzeigen lassen, dann müssen die Bilder für die Bilder-Galerie 690 Pixel breit sein, soll das Bild nicht angezeigt werden, dann können die Grafiken 971 Pixel breit sein.

Die Bilder müssen unter Shop → Eigene Dateien hochgeladen worden sein.

Bildergalerie anzeigen

Zunächst haben Sie die Möglichkeit, die Bilder-Galerie auf der Startseite zu deaktivieren. Dann erscheint unter der oberen Navigation die Kategorien und der Startseiten-Content.

Bild 1 (Bildgröße 690 x 350 / 971 x 350 px)

Sie können aus Ihrem Verzeichnis Eigene Dateien ein Bild für die Galerie auswählen. Die Breite ist abhängig davon, ob Sie das Bild rechts anzeigen lassen oder nicht.

Hier können Sie einen Link zu einer entsprechenden Seite in Ihrem Shop hinterlegen.

Großes schmales Bild anzeigen

Wenn Sie rechts ein Bild in der Breite 281 Pixel anzeigen lassen wollen, belassen Sie die Einstellung auf Ja, wenn Sie die Bilder-Galerie über die ganze Breite nutzen möchten, dann setzen Sie die Einstellung bitte auf Nein.

Template Pangea

Den Slider im Template Pangea bearbeiten Sie unter dem Punkt Startseiten-Widget: Slider.

Das Startseiten-Widget: Slider bietet Ihnen die Möglichkeit, dass Bilder mit einem Text und Verlinkung von rechts nach links automatisch geschoben werden und damit verschiedene Botschaften an den Kunden zu sehen sind.

Slider bieten die Möglichkeit, Grafiken, Texte und Verlinkungen dem Kunden zu zeigen, ohne viel Patz auf der Website zu benötigen.

Standardmäßig sind im Startseiten-Slider folgende Grafiken hinterlegt:

Die Bilder, die Sie für den Startseitenslider verwenden möchten, müssen die Größe 940 x 400 Pixel besitzen. Andere Formate werden verzerrt dargestellt.

Die Bilder müssen unter Shop → Eigene Dateien im BackOffice hinterlegt sein.

Sie können vier Grafiken in den Slider einbinden.

Jedes Sliderbild können Sie aus den Eigenen Dateien auswählen, in dem Sie auf das Bild hinter Slide 1 - Bild etc. klicken. Klicken Sie das entsprechende Bild in der Liste an, um es für diesen Slide hinzuzufügen.

Schreiben Sie noch einen Text dazu, der eingeblendet wird. Dieser besteht aus einer Überschrift und einem Text.

Daneben können Sie einen Button-Text angeben wie z.B. „jetzt informieren“, „zum Angebot“ etc. Unter Slide 1 - Link (URL) geben Sie die Webadresse an, auf die Sie verlinken möchten.

Zum Schluss können Sie noch einen Hintergrund für den Text hinzufügen.

Die Templates

  • Standard-Template
  • Template: Aurelio
  • Template Pangea

Standard-Template

Das Standard-Template ist bereits vorinstalliert und bietet wenige Anpassungsmöglichkeiten.




Grundlagen zum Template

Dieses Template ist das Standard-Template, das bei neuen Rakuten-Shops installiert ist.


Die Idee hinter diesem Template ist, dass Sie ohne große Änderungen vornehmen zu müssen, ein an den Rakuten-Marktplatz angelehntes Shop-Design besitzen und verwenden können.

Daher sind die Einstellungsmöglichkeiten auf ein Minimum reduziert. Die Nutzung des Template-Editors ist bei diesem Template nicht möglich.

Im obigen Beispiel sehen Sie u.a. die Version des Designs, wenn noch keine Kategorien und Produkte im Shop vorhanden sind.

Einstellungsmöglichkeiten

Bei diesem Template steht Ihnen der Look&Feel-Editor zur Verfügung.

Dabei können Sie in folgenden Bereichen Anpassungen vornehmen:

  • Header-Bereich (Logo anzeigen lassen)
  • Navigation (Menüpunkte abwählen)
  • Startseite (Slider anzeigen, Produktlisten, Startseitentext)
  • Produktdetailseite (Cliplister-Videos deaktivieren)
  • Footer (Hotline nicht anzeigen)
  • Vorübergehender, allgemeiner Hinweis (Urlaugstext anzeigen)

Header-Bereich

Wenn Sie unter Verwaltung unter Shopeinstellungen im Bereich Ihr Logo ein Logo hinterlegt haben, dann wird dieses im Header-Bereich angezeigt.
Ansonsten erscheint der Shopname als Schriftzug.



Sie können ein Hintergrundbild für den Header-Bereich auswählen. Dieses Bild müssen Sie zunächst unter Eigene Dateien hochgeladen haben. Alternativ können Sie die Hintergrundfarbe ändern.

Unter Shop-Vorteile anzeigen können Sie wählen, ob die Icons auf der rechten Seite des Headers angezeigt werden sollen oder nicht.
Diese werden standardmäßig in einer dunklen Farbe angezeigt. Ist Ihr Hintergrund dunkel, setzen Sie die Icon-Farbe auf hell.

Die Hintergrund-Farbe ändern Sie entweder über den Hexadezimal-Code (z.B. #ffffff) oder über das Farbquadrat vor dem Eingabefeld (einfach vor das Eingabefeld klicken, wo der Mauszeiger zur Hand wird)

Unter Navigation können Sie entscheiden, ob die Links Bestseller, Neu bei uns, Reduziert, Blog und Newsletter in der oberen Navigation angezeigt werden sollen.

Beachten Sie bitte: Diese Links erscheinen im Anschluss an Ihre Shop-Kategorien.

:!: Eigene Navigationen können Sie in diesem Template nicht verwenden.
:!: Die Navigation Hauptmenü wird nicht verwendet.
:!: Es wird im unteren Bereich die Menüleiste Rechtlicher Informationen verwendet.

Startseite

Slider

Für die Startseite können Sie die Bildergalerie (Slider) konfigurieren. Dazu steht Ihnen die Möglichkeit zur Verfügung,

  • den Slider anzeigen zu lassen oder ihn zu deaktivieren
  • die Anzahl der Slides zu bestimmen (max. 3)
  • die Bilder zu hinterlegen
  • einen Alternativ-Text (alt-Tag/SEO-Text) anzugeben
  • die Verlinkung zu hinterlegen.
  • Zunächst entscheiden Sie, ob der Slider angezeigt werden soll oder nicht.
  • Anschließend wählen Sie die Anzahl der Slides aus: sie können max. 3 Bilder hinterlegen.

Ideal sind Grafiken im Format zwischen 940 und 2000 Pixel in der Breite.
Die Höhe der Grafiken betragen 275 Pixel. Andere Formate können angezeigt werden.
Kleinere Grafiken füllen nicht die gesamte Fläche aus, größere werden abgeschnitten.

  • Laden Sie Ihre Grafiken unter Eigene Dateien hoch, damit Sie diese dann hier unter Slide 1 - Bild (entsprechend für slide 2 und Slide 3) auswählen können.
  • Zu jedem Bild können Sie einen Alternativtext (SEO-Text) angeben
  • Vergessen Sie nicht, für jedes Bild eine Verlinkung zu setzen.

Wenn Sie zu einem Produkt verlinken möchten, suchen Sie bitte das entsprechende Produkt in Ihrem Shop (Live-Modus) aus und kopieren die URL aus der Adresszeile heraus und fügen diese dann in die Zeile Slide 1 - Link (URL) (entsprechend für Slide 2 und Slide 3).

Produktbox

Unter Produktbox können Sie die drei Standard-Produktlisten nutzen. diese sind standardmäßig aktiviert. Haben Sie in den letzten 30 Tagen Verkäufe getätigt, wird die Produktliste Bestseller angezeigt. Verfügt Ihr Shop über reduzierte Artikel, befinden diese sich im zweiten Reiter. Haben Sie Produkte als NEU gekennzeichnet (über die Produktverwaltung im BackOffice in jedem Produkt aktivierbar), dann wird diese Liste an dritter Stelle zu finden sein.

Eigene Produktisten können Sie danach anzeigen lassen. Dazu wählen Sie bitte die Anzahl der Produktlisten (max. 3) aus, anschließend welche Listen Sie angezeigt haben wollen.

Eigene Produktlisten legen Sie unter Shop → Produktlisten an.

Freier HTML Container

Sie haben mit dem Freien HTML-Container die Möglichkeit, einen Startseiten-Text zu erstellen.

Dazu können Sie

  • wählen, ob der Container angezeigt werden soll,
  • die Überschrift festlegen
  • den Text einfügen. Dieser Text kann HTML enthalten.

Produktdetailseite

Hier haben Sie die Möglichkeit, die kostenfreie Einbindung von Produktvideos zu deaktivieren.

Blog

Wenn Sie die Blog-Funktion Ihres Rakuten-Shops nutzen,

  • können Sie die Kommentarfunktion sowie
  • die Social Bookmarks

deaktivieren.

Sie können entscheiden, ob Ihre Telefonnummer für den Kundenservice angezeigt werden soll oder nicht.

Vorübergehender, allgemeiner Hinweis

Sie haben die Möglichkeit, eine Information im Shop aktivieren.

diesen Hinweis können Sie aktivieren und mit einem eigenen Text befüllen, wenn Sie beispielsweise in Urlaub gehen.

Stellen Sie in diesem Fall unter Hinweis auf Anzeigen.

Nach Ihrem Urlaub stellen Sie wieder zurück auf Nicht anzeigen.

Achtung: Der Hinweis erscheint nur dann in der Live-Version Ihres Shops, also sichtbar für Ihre Kunden, wenn Sie das Design veröffentlichen.

Speichern und veröffentlichen

  • Speichern Sie in regelmäßigen Abständen Ihre Anpassungen ab.
  • Damit Ihre Kunden Ihre Änderungen sehen können, müssen Sie das Design veröffentlichen.
  • Möchten Sie wieder zurück auf Grundeinstellungen, dann klicken Sie auf den Button Alle Einstellungen verwerfen.

Template-Wechsel

Sie haben die Möglichkeit, eines der beiden anderen Templates zu wählen.

Zurück zur Template-Auswahl