Kompatibilität

WebSite X5 Pro

Ein Onlineshop zu erstellen, vor allem wenn eine große Anzahl von Produkten verwaltet werden muss, kann eine anspruchsvolle Aufgabe sein. Um Zeit zu sparen und gleichzeitig optimierte Verkaufsseiten zu erhalten, erstellt WebSite X5 automatisch sowohl Präsentationsboxen für Produkte als auch vollständige Produktseiten, die alle erforderlichen Informationen enthalten.


In dieser Anleitung konzentrieren wir uns auf die Boxen: Wir schauen, wann sie verwendet werden, wie sie erstellt werden und wie man deren Komposition und Grafikstil anpassen kann.


Was sind Produktboxen

Eine Box ist nichts anderes als ein Bereich, in dem einige grundlegende Informationen zu einem Produkt zusammengefasst sind und das in den meisten Fällen eine Schaltfläche für den Kauf enthält. Sie sind das Äquivalent einer Visitenkarte, und eine Webseite kann viele davon enthalten.



Sie dienen dazu, die Produkte den Kunden synthetisch vorzustellen, sodass sie sich auf diese Weise ein Bild davon machen können, was für sie von Interesse sein könnte, und dann entscheiden, auf welche Vorschläge sie ihre Aufmerksamkeit richten möchten.

Wann werden sie erstellt

Wie bereits erwähnt, werden die Produktkarten automatisch vom Software erstellt, wenn Folgendes verwendet wird:

  • Das Objekt Produktkatalog, um eine Auswahlt der Prdodukte Ihres Katalogs auf einer Seite zu präsentieren;
  • Die Suchseite der Produkte, mit der die Kunden Ihren Produktkatalog mit Kategorien und Filtern durchsuchen können;
  • Die Seite Wuschliste, mit der die Kunden die gewünschten Projekte in einer persönliche Wünschliste speichern und in einem späteren Zeipunkt kaufen können

In allen diesen Fällen werden die Produkte mit entsprechenden Boxen angezeigt.


Wie sehen sie aus

Die boxen bestehen aus den folgenden Elementen: 

  • Hintergrund: Ein farbiger oder transparenter Hintergrund, zu dem ein Rahmen gezeichnet werden kann.
  • Titelbild: Das Bild des Produkts
  • Inhalt: Der Textbereich der Box. Beinhaltet alle folgenden Elemente:
    • Titel
    • Beschreibung
    • Details
    • Preis
    • Schalfläche "Zum Warenkorb"
    • Schalfläche "Zur Wunschliste"


Selbstverständlich können Sie die Zusammensetzung der Boxen ändern und festlegen, dass ein oder mehrere dieser Elemente nicht in den Boxen enthalten sind:

  • Öffnen Sie das Einstellungsfenster (dazu können Sie das eingefügte Objekt Produktkatalog, die Suchseite oder die Seite Wunschliste auswählen und in allen Fällen auf die Schaltfläche Bearbeiten klicken) und gehen Sie in den Abschnitt Einstellungen.
  • Verwenden Sie das Dropdown-Menü unter Box-Stil, um das Element auszuwählen, auf das Sie einwirken möchten.
  • Klicken Sie, um das Häkchen neben der Option Sichtbar zu setzen oder zu entfernen, um festzulegen, ob das betreffende Element in den Boxen enthalten sein soll oder nicht.
  • Im spezifischen Fall der Details können Sie genau festlegen, welche Informationen in den Boxen angezeigt werden sollen.


#Tipp - Auch wenn die Boxen für den E-Commerce gedacht sind, können Sie festlegen, dass sie keine Preisangabe oder die Schaltfläche Kaufen enthalten. So können Sie die Boxen verwenden, um Ihre Produkte nur anzuzeigen, ohne sie zum Verkauf anzubieten.


Welche Informationen zeigen sie

Um die Boxen zu erstellen, verwendet WebSite X5 hauptsächlich die Informationen, die über das Fenster Produkteinstellungen eingegeben werden, auf das Sie zugreifen, wenn Sie ein neues Katalogprodukt hinzufügen oder ein bestehendes Produkt ändern (Schritt 1 - Einstellungen > Onlineshop > Produkte).


Genauer gesagt werden in der Box folgende Elemente übernommen:

  • als Coverbild das erste Bild, das im Bereich Bild eingefügt wird;
  • als Titel den Namen, den Sie dem Produkt im Bereich Allgemein geben;
  • als Beschreibung die kurze Beschreibung, die ebenfalls im Bereich Allgemein eingegeben wird;
  • für die Details: 
    • Die Kategorie ist die, in der das Produkt ggf. im Katalog eingeordnet ist; 
    • die Bewertung (als Sterne angezeigt) wird nur angezeigt, wenn die Sammlung von Kommentaren und Bewertungen über die Einstellungen der Spezialseite E-Commerce: Produktseite;
    • die Varianten werden aus dem Bereich Optionen übernommen; 
    • die Verfügbarkeit übernimmt die im Bereich Verfügbarkeit eingestellten Optionen;
  • als Preis denjenigen, der im Bereich Allgemein angegeben ist.


Natürlich, wenn eine Information nicht über das Fenster Produkteinstellungen angegeben wird, wird sie nicht in die Box eingefügt.


Wie passen Sie sie an

Wie bereits erwähnt, werden die Boxen von WebSite X5 automatisch erstellt, indem die Informationen verwendet werden, die für die Produkte eingegeben wurden. Standardmäßig wird das Aussehen der Boxen durch das für die Website gewählte Template bestimmt, aber Sie können es anpassen. 

  • Öffnen Sie das Einstellungsfenster (dazu können Sie das eingefügte Objekt Produktkatalog, die Suchseite oder die Seite Wunschliste auswählen und in allen Fällen auf die Schaltfläche Bearbeiten klicken) und gehen Sie in den Abschnitt Einstellungen.
  • Beginnen Sie damit, festzulegen, wie die Boxen auf der Seite angeordnet werden sollen. Verwenden Sie die Option Anordnung, um auszuwählen zwischen:
    • Feste Höhe: Die Boxen werden in einem Raster angeordnet. Da alle Boxen die gleiche Höhe haben, ist das Raster regelmäßig und kompakt.
    • Variable Höhe: Die Boxen werden weiterhin im Raster angeordnet, aber die Höhe jeder einzelnen Box variiert je nach den Proportionen des Bildes, das als Titelbild verwendet wird. Die Boxen füllen daher möglicherweise nicht vollständig die Zellen des Rasters, in dem sie sich befinden: Dadurch kann zwischen den Boxen Leerraum entstehen. Diese Anordnung ist besonders geeignet, wenn Sie eine einzelne Box pro Zeile anzeigen oder eine Ansicht in einer einzigen Zeile mit mehreren Spalten vorsehen möchten.
    • Masonry: Auch hier variiert die Höhe der Boxen je nach den Proportionen des Titelbildes. Der Unterschied zur vorherigen Anordnung besteht darin, dass die Boxen nicht in einem regulären Raster angeordnet sind, sondern in mehreren Reihen und Spalten ausgerichtet sind, ohne Lücken zu lassen, um die kleineren Abmessungen einiger Boxen auszugleichen.
    • SlideShow: (nur für das Objekt Produktkatalog verfügbar) Die Boxen haben die gleiche Höhe und werden in einer einzigen Zeile in einer Diashow mit Navigationstasten angezeigt.
  • Nun können Sie festlegen, wie die verschiedenen Elemente innerhalb der Boxen formatiert werden sollen. Verwenden Sie die Option Inhalte, um auszuwählen zwischen:
    • Coverbild links, Titel und Inhalte rechts
    • Titel und Inhalte links, Coverbild rechts
    • Coverbild oben, Titel und Inhalte unten
    • Titel und Inhalte oben, Coverbild und Inhalte unten
    • Coverbild als Hintergrund
  • Allgemein können Sie auch die Anzahl der Boxen pro Zeile und die maximale Anzahl der Zeilen pro Seite festlegen. Wenn die vorgesehene Anzahl an Produkten überschritten wird, wird eine Paginierung eingeführt.
  • Falls gewünscht, ändern Sie die Höhe der Boxen. Beachten Sie, dass in Abhängigkeit von diesem Parameter die Titelbilder der Produkte neu skaliert werden. Für die Texte hingegen wird, wenn sie zu lang sind, die Bildlaufleiste angezeigt.
  • Um das Erscheinungsbild der Seite zu verbessern, können Sie auch die Abstände zwischen den Boxen anpassen.
  • Schließlich können Sie die Elemente, aus denen die Boxen bestehen, bearbeiten: Verwenden Sie das Menü unter Box-Stil, um das Element auszuwählen, auf das Sie einwirken möchten. Abhängig vom ausgewählten Element können Sie verschiedene Optionen verwenden, wie Farbe, Schriftart, Abstände und Effekte.


Wie aktivieren Sie die Schleifen für die Boxen

Wenn Sie neue oder rabattierte Produkte haben, können Sie diese hervorheben, indem Sie ein Band auf deren Boxen platzieren.


Zunächst müssen Sie bereits festgelegt haben, welche Produkte neu oder rabattiert sind:

  • Beim Erstellen des Katalogs (im Schritt 1 - Einstellungen >Onlinshop > Produkte) erstellen Sie ein neues Produkt oder ändern ein bestehendes Produkt, um auf das Fenster Produkteinstellungen zuzugreifen.
  • Damit ein Produkt als "neu" gilt: Bleiben Sie im Bereich Allgemein und aktivieren Sie die Option Produkt als "Neuheit" hervorheben.
  • Damit ein Produkt als "reduziert" gilt: Gehen Sie in den Bereich Rabatt und wenden Sie einen festen oder prozentualen Rabatt an (So konfigurieren Sie einen Rabatt auf ein einzelnes Produkt).


Sobald die Produkte eingerichtet sind, können Sie zur Bearbeitung der Boxen zurückkehren:

  • Öffnen Sie das Einstellungsfenster (dazu können Sie das eingefügte Objekt Produktkatalog, die Suchseite oder die Seite Wunschliste auswählen und in allen Fällen auf die Schaltfläche Bearbeiten klicken) und gehen Sie in den Abschnitt Einstellungen.
  • Im Abschnitt Schleifen wählen Sie den Schleifen-Typ, den Sie anwenden möchten: Neues Produkt oder Rabattiertes Produkt.
  • Wählen Sie das Bild aus, das Ihnen am besten dagefällt: Sie können eines der vorgeschlagenen verwenden oder die gewünschte Bilddatei importieren.
  • Schließlich definieren Sie die Ausrichtung und Breite der Kokarde relativ zur Box.


So konfigurieren Sie die Kauf- und Wunschlisten-Buttons

Mit den Buttons auf den Produktkarten können Kunden ein Produkt in den Warenkorb legen oder auf ihrer Wunschliste speichern.


Wählen Sie im Bereich Einstellungen über das Menü Kartenstil den gewünschten Button aus:

  • In den Warenkorb: Legen Sie über Sichtbar fest, ob der Button angezeigt werden soll, und passen Sie sein Erscheinungsbild mit den verfügbaren Optionen an. Aktivieren Sie Hinzufügen, ohne den Warenkorb anzuzeigen, damit Kunden nach dem Hinzufügen eines Produkts weiter auf der Seite stöbern können.
  • Zur Wunschliste hinzufügen: Wählen Sie, ob der Button angezeigt werden soll, und legen Sie sein Erscheinungsbild fest. Aktivieren Sie Hinzufügen, ohne die Wunschliste anzuzeigen, damit Kunden einen Artikel speichern und gleichzeitig weiter auf der Seite stöbern können.


Wählen Sie das Verhalten passend zum gewünschten Kaufablauf. Beispielsweise kann das Hinzufügen ohne Öffnen des Warenkorbs hilfreich sein, wenn Kunden mehrere Artikel aus derselben Liste auswählen möchten.


So öffnen Sie die Bildergalerie über die Produktkarte

Das Titelbild zeigt das erste Bild des Produkts. Sie können Kunden die Möglichkeit geben, eine Galerie zu öffnen und weitere verfügbare Inhalte anzusehen.

  • Gehen Sie zu Schritt 1 - Einstellungen > Onlineshop > Produkte.
  • Öffnen Sie Produkteinstellungen > Bild und fügen Sie die gewünschten Bilder hinzu.
  • Kehren Sie zu den Einstellungen des Objekts oder der Spezialseite zurück, auf der die Produktkarten angezeigt werden.
  • Aktivieren Sie Bildanzeige in der ShowBox aktivieren.


Wenn Kunden den Mauszeiger über das Titelbild bewegen, erscheint ein Button mit einer Lupe. Ein Klick darauf öffnet die Galerie in der ShowBox.


#tip – EU-GARAN-Kennzeichnung. Bei Produkten, für die Sie eine gewerbliche Haltbarkeitsgarantie eingerichtet haben, enthält die über die Produktkarte geöffnete Galerie auch die vollständige EU-GARAN-Kennzeichnung, spätestens an dritter Position. Sie müssen diese nicht als individuelle Produktmarkierung hinzufügen. Informationen zu den Voraussetzungen und zum Einrichten der Angaben finden Sie in der Anleitung EU-GARAN-Kennzeichnung. Wie zeigen Sie die gewerbliche Haltbarkeitsgarantie in Ihrem Onlineshop an?


So verknüpfen Sie die Produktkarte mit der Produktseite

Wenn Sie ein Produkt ausführlicher präsentieren möchten, können Sie die Produktkarte mit der zugehörigen Produktseite verknüpfen.

  • Gehen Sie zu Schritt 1 - Einstellungen > Onlineshop > Produkte.
  • Wählen Sie den Artikel aus und öffnen Sie Produkteinstellungen > Details.
  • Aktivieren Sie die Erstellung der zugehörigen Produktseite.
  • Vervollständigen Sie die Seiteninhalte und bestätigen Sie die Einstellungen.


Wenn die Produktseite verfügbar ist, erscheint beim Bewegen des Mauszeigers über das Titelbild der Produktkarte ein Button zum Öffnen der Seite. Auch der Titel der Produktkarte führt zur Produktseite.


#tip – Wie Sie eigene Seiten für Ihre Produkte aktivieren, erfahren Sie unter Was ist die Produktseite und wie wird sie verwendet?


Praktische Tipps

Bevor Sie Ihren Onlineshop veröffentlichen:

  • Prüfen Sie die Produktkarten überall dort, wo Sie sie verwenden: in Produktkatalog-Objekten, der Produktsuche und der Wunschliste;
  • prüfen Sie, ob sich die Artikel anhand ihrer Namen und Beschreibungen leicht unterscheiden lassen;
  • wählen Sie Titelbilder mit einheitlichen Proportionen und vergleichbarer Qualität, insbesondere wenn Sie ein regelmäßiges Raster verwenden;
  • prüfen Sie, ob Texte und Preise gut lesbar sind und die Produktmarkierungen das Produkt nicht verdecken;
  • testen Sie die Kauf- und Wunschlisten-Buttons sowie die Links zu den Produktseiten;
  • öffnen Sie die Galerien und prüfen Sie die Reihenfolge der Inhalte;
  • prüfen Sie das Ergebnis bei verschiedenen Fensterbreiten und nach der Veröffentlichung auch auf einem Smartphone.