Shop bauen und mit dem Schaufenster beginnen
Du hast deine Kategorien und Produkte hinzugefügt, jetzt ist es an der Zeit, sie auf deiner Website anzuzeigen. Mit Weebly kannst du zum Glück dein eigenes Schaufenster entwerfen - es ist so einfach wie Drag&Drop, genau wie der Rest von Weebly. Und wenn es dir beim ersten Mal nicht gefällt, kannst du mit einer einfachen Änderung der Einstellungen ein komplett neues Aussehen erhalten, ohne dass du dich umherbewegen musst.
Für eine einfache Shopverwaltung werden deine Kategorien- und Produktseiten dynamisch für dich erstellt. Du musst nicht jedes Mal neue Seiten erstellen, wenn du Produkte hinzufügen oder weitere Kategorien hinzufügen möchtest. Aber wenn du willst, tust du alles von Grund auf neu und völlig benutzerdefiniert.
Die eine Shop-Seite, die du wahrscheinlich erstellen möchtest, ist deine Schaufenster-Seite.
Hinweis: Bevor du die Seiten deines Shops erstellen kannst, musst du deine Produkte und Kategorien erstellt haben.
Eine Schaufensterseite hilft dir, deine Kategorien und deine besten Produkte zu präsentieren, damit deine Kunden eine gute Idee von den Produkten bekommen, die du verkaufst. Du verwendest die Kategorien und Produkte-Elemente (zusammen mit anderen Elementen) auf einer Standard-Weebly-Seite, um einen atemberaubenden Zugang zu deinem Shop zu schaffen. Du kannst dies zur Startseite deiner Website machen oder eine separate Seite erstellen, die über das Navigationsmenü als Schaufenster dient. Das hängt alles von dir ab!
Wenn du eines unserer grossartigen eCommerce-Themen verwendet hast, dann musst du die Kategorien- und Produktelemente mit deinen eigenen Kategorien und Produkten ausfüllen.
Wenn du dein Schaufenster von Grund auf neu erstellen möchtest, kannst du das auch tun. Du kannst beliebige Weebly-Elemente verwenden, um deine Seite zu gestalten und diese dann mit den Kategorien- und Produktelementen zu präsentieren. Die besten Shop-Seiten haben eine gute Anordnung von Produkten, Kategorien, Bildern und Abschnitten, die alle per Drag & Drop aus der Sidebar im Editor eingefügt werden können.
Dynamisches Layout für die Produkte und Kategorien konfigurieren
Weebly erstellt für dich Seiten, auf denen deine Produkte und Kategorien angezeigt werden. Während des Setup-Vorgangs kannst du festlegen, wie Kategorien und Produkte auf diesen Seiten angezeigt werden sollen.
Auf den Seiten der Kategorie werden standardmässig alle Kategorienamen in der linken Seitenleiste und die Bilder der Unterkategorie in einem Gitter angezeigt. Die Produktabbildungen werden in einem Gitter unterhalb der Unterkategorien angezeigt.
Du kannst das Layout dieser Seite so ändern, dass nur die Sidebar-Liste oder nur die Kategorie-Bilder angezeigt werden). Du kannst auch die Anzahl der Spalten, die für die Anzeige der Bilder verwendet werden, und das Seitenverhältnis für diese Bilder wählen.
Du kannst auch die Anzahl der Spalten und das Seitenverhältnis für deine Produkte auf einer Kategorie-Seite konfigurieren und die Anzahl der Produkte pro Seite festlegen.
Tipp: Das Seitenverhältnis bestimmt die Grösse und Form deines Bildes. Ein 4:1-Verhältnis würde die Bildbreite um das Vierfache der Höhe erhöhen. Ein Verhältnis von 1:1 ergibt ein Quadrat. Die Standardeinstellung von Weebly ist 3:2, was bedeutet, dass die Breite etwas grösser ist als die Höhe. Fühle dich frei, um mit diesem Verhältnis herum zu spielen, bis du das richtige Aussehen für deinen Shop findest.
Tipp: Diese Layout-Konfiguration wirkt sich nur auf die von Weebly generierten Kategorieseiten aus. Du kannst auch die Elemente Kategorien und Produkte verwenden, um deine Waren zu präsentieren. Mit diesen Elementen kannst du auch Dinge wie das Seitenverhältnis und die Anzahl der anzuzeigenden Spalten festlegen.
Kategorien auf einer Seite anzeigen
Sobald du Kategorien erstellt hast, kannst du diese in deinem Schaufenster (oder auf jeder anderen Seite) anzeigen lassen. Achte darauf, dass du Bilder für deine Kategorien hast, damit sie auf der Seite gut dargestellt werden.
So zeigst du eine Kategorie an
Ziehe auf der Registerkarte Erstellen ein Kategorien Element per Drag & Drop auf die Seite.
In einem Dialogfeld werden alle aktuellen Kategorien angezeigt. Unterkategorien werden ebenfalls angezeigt.
Hinweis: Wenn du keine Kategorien erstellt hast, wirst du aufgefordert, zuerst eine Kategorie anzulegen.
Wähle die gewünschte(n) Seite(n) aus und klicke auf den Link Auswählen.
Jetzt, wo das Kategorien-Element auf der Seite ist, kannst du die Art und Weise ändern, wie deine Kategorien angezeigt werden, oder sogar die angezeigten Kategorien ändern.
Tipp: Du kannst mit den Kategorien und Produkten Elemente auf die gleiche Weise gestalten, wie mit allen anderen Weebly Elementen. Verwende die Elemente Titel und Text, um weitere Informationen hinzuzufügen. Verwende das Spacer-Element, um Leerzeichen hinzuzufügen. Andere Bilder hochladen.
Ändern des Kategorielayouts
Es gibt verschiedene Möglichkeiten, die Kategoriebilder und -infos zu gestalten. Standardmässig werden sie in einem Raster angezeigt. Wenn mehr Kategorien als auf einer Seite passen, wird die Seitennummerierung unten angezeigt.
Du kannst aus einer der folgenden Möglichkeiten wählen:
Raster: Die Bilder der Kategorie werden in einem Gitter aneinander gereiht, jedes Bild ist gleich gross.
Mauerwerk: Die Kategorien werden nach der Grösse des Bildes geordnet - meist im Wechsel immer kleiner und grösser. Seitenzahlenanzeigen am unteren Rand bei Bedarf.
Einzelne Reihe: Die Kategorien werden in einer Zeile angezeigt und der Benutzer kann nach links oder rechts blättern, ähnlich einer Diashow.
Um das Layout zu ändern, klicke im Dialogfeld Kategorien (geöffnet durch Klicken innerhalb des Elements auf der Seite) auf Layout ändern und wähle das gewünschte Layout aus. Entferne den Dialog, indem du ausserhalb des Elements klickst.
Anzeigeoptionen der Kategorie ändern
Sobald du dich für ein Layout entschieden hast, kannst du im Dialog Kategorien weitere Anzeigekonfigurationen ändern (geöffnet durch Klicken innerhalb des Elements auf der Seite).
Lese in den folgenden Abschnitten, was du ändern kannst.
Anzahl Spalten
Standardmässig zeigt das Kategorien-Element 3 Spalten an:
Hier ist das gleiche Kategorie-Element konfiguriert, um 2 Spalten anstelle von 3 zu verwenden.
Um die Zahlenspalten zu ändern, klicke innerhalb des Elements Kategorien und im Feld Spalten des Dialogs auf eine Zahl oder verwende die Symbole + oder -, um die Zahl zu ändern. Die Seite wird mit der neuen Konfiguration neu gezeichnet.
Seitennummerierung
Wenn du mehr Kategorien hast, als auf einer Seite angezeigt werden können, werden Seitenumbruchverknüpfungen angezeigt, so dass deine Kunden auf alle Kategorien zugreifen können. Du hast zwei Möglichkeiten der Seitennummerierung:
Ein Link Mehr anzeigen, der unten im Element Kategorien angezeigt wird:
Seitenzahl-Links mit Seitenvor- und Rückwärtslinks:
Zum Festlegen der Seitenumbruchsfunktion, klicke auf Seitenumbruch und wähle die zu verwendende Option aus. Du kannst auch die Anzahl der Kategorien einstellen, die pro Seite angezeigt werden sollen.
Bildanzeige
Standardmässig zeigt das Kategorien-Element die Bilder an, die du für sie hochgeladen hast. Du kannst diese deaktivieren oder das Seitenverhältnis ändern, in dem sie angezeigt werden.
Tipp: Das Seitenverhältnis bestimmt die Grösse und Form deines Bildes. Ein 4:1-Verhältnis würde die Bildbreite um das Vierfache der Höhe erhöhen. Ein Verhältnis von 1:1 ergibt ein Quadrat. Ein Verhältnis von 3:2 bedeutet, dass die Breite nur etwas grösser ist als die Höhe. Fühle dich frei, um mit diesem Verhältnis herum zu spielen, bis du das rechte Aussehen für deinen Shop findest.
Um die Bildanzeige zu ändern, klicke auf Anzeigeoptionen und dann auf Bildoptionen. Wenn du keine Bilder für Kategorien anzeigen möchtest, kannst du diese Option deaktivieren. Standardmässig werden Bilder im Verhältnis 1:1 angezeigt. Klicke dich durch die anderen Optionen und wähle die Grösse, die am besten zu deiner Seite passt.
Taste Display
Standardmässig zeigt jede Kategorie eine Schaltfläche an, die zu einer Seite navigiert, auf der dynamisch alle Produkte dieser Kategorie angezeigt werden. Du kannst die Schaltfläche deaktivieren oder den Text, die Grösse und die Farbe (basierend auf dem Design deiner Website) dieser Schaltflächen ändern.
Um die Anzeige der Schaltflächen zu ändern, klicke auf Anzeigeoptionen und dann auf Schaltflächenoptionen.
Anzeige des Kategorienamens
Standardmässig wird der Kategoriename unterhalb des Bildes angezeigt. Um den Kategorienamen auszublenden, klicke auf Anzeigeoptionen und deaktiviere die Option Name.
Textplatzierung
Standardmässig sind der Kategoriename und die Schaltfläche unterhalb des Bildes und linksbündig angeordnet. Du kannst das Bild stattdessen nach links, rechts oder unterhalb des Textes und der Schaltfläche haben. Oder du kannst das Bild hinter dem Text haben. Du kannst die Textanzeige auch nur anzeigen lassen, wenn dein Kunde über dem Bild schwebt. Die Ausrichtung kann links, rechts oder zentriert erfolgen.
Um die Textplatzierung zu ändern, klicke auf Anzeigeoptionen und dann auf Infoplatzierung.
Verwalten der angezeigten Kategorien
Sobald du das Kategorien-Element auf einer Seite abgelegt hast, kannst du die angezeigten Kategorien und die Reihenfolge, in der sie angezeigt werden, ändern.
Klicke innerhalb des Elements Kategorien auf einer Seite, um das Dialogfeld Kategorien zu öffnen.
Klicke auf Kategorien verwalten.
Die aktuell zur Anzeige ausgewählten Kategorien werden angezeigt.
Um die Kategorien zu ändern (hinzufügen oder löschen), klicke auf Kategorien auswählen und wähle die Kategorien aus, die angezeigt werden sollen.
Um die vorhandenen Kategorien neu zu ordnen, ziehe sie einfach per Drag&Drop.
Um eine Kategorie zu löschen, klicke auf das Minus-Symbol links neben dem Kategoriebild.
Klicke auf Fertig, wenn du fertig bist. Deine Änderungen werden auf der Seite wiedergegeben.
Produkte auf einer Seite anzeigen
Wie Kategorien kannst du auch Produkte, sobald du diese erstellt hast, in deinem Schaufenster (oder auf jeder anderen Seite) anzeigen. Achte darauf, dass du Bilder für deine Produkte hast, damit sie auf der Seite gut dargestellt werden.
Tipp: Wenn du mehrere Bilder für deine Produkte hast, kannst du wirklich ein interessanteres Layout erstellen!
Produkte anzeigen:
Ziehe aus dem eCommerce-Bereich der Registerkarte Erstellen ein Produktelement auf die Seite.
Ein Dialogfeld zeigt alle deine aktuellen Kategorien und alle nicht kategorisierten Produkte an. Erweitere eine Kategorie, um Produkte zu finden und wähle diese aus. Oder du kannst nach einem Produkt suchen.
Hinweis: Wenn du noch keine Produkte erstellt hast, wirst du zunächst aufgefordert, welche zu erstellen.
Wähle die Produkte aus, die auf der Seite angezeigt werden sollen, und klicke auf den Link Auswählen.
Jetzt, da das Element Produkte auf der Seite angezeigt wird, kannst du die Darstellung deiner Produkte ändern oder sogar die angezeigten Produkte ändern.
Tipp: Du kannst mit den Kategorien- und Produktelementen genauso gestalten, wie mit allen anderen Weebly-Elementen. Verwende die Elemente Titel und Text, um weitere Informationen hinzuzufügen. Verwende das Abstandshalter-Element. Andere Bilder hochladen. Oder besuche unser App Center, um ein 3rd Party Tool hinzuzufügen!
Produktlayout ändern
Es gibt verschiedene Möglichkeiten, die Produktbilder und -infos zu gestalten. Standardmässig werden sie in einem Raster angezeigt. Wenn mehr Produkte als auf einer Seite passen, erscheint die Seitennummerierung unten.
Du kannst dieses Layout in eines der folgenden Layouts ändern:
Raster: Produkte werden in Zeilen und Spalten angezeigt. Alle Bilder haben die gleiche Grösse.
Mauerwerk: Die Produkte werden nach der Grösse des Bildes angeordnet - meist im Wechsel von kleiner und grösser. Seitenzahlenanzeigen am Boden bei Bedarf.
Multi-Bild: Alle Bilder, die du für ein Produkt hochgeladen hast, werden angezeigt.
Einzelne Reihe: Die Produkte werden in einer Zeile angezeigt und der Benutzer kann nach links oder rechts blättern, ähnlich einer Diashow.
Um das Layout zu ändern, klicke im Dialogfeld Produkte (geöffnet durch Klicken innerhalb des Elements auf der Seite) auf Layout ändern und wähle das gewünschte Layout aus. Klicke auf Fertig, wenn du fertig bist.
Produktanzeigeoptionen ändern
Sobald du dich für ein Layout entschieden hast, kannst du im Produktdialog (geöffnet durch Klicken innerhalb des Elements auf der Seite) weitere Darstellungskonfigurationen ändern.
Lese in den folgenden Abschnitten, was du ändern kannst.
Anzahl Spalten
Standardmässig werden im Element Produkte 3 Spalten angezeigt:
Hier ist das gleiche Produktelement konfiguriert, um 2 Spalten anstelle von 3 zu verwenden.
Um die Zahlenspalten zu ändern, klicke innerhalb des Elements Produkte auf das Feld Spalten im Dialogfeld Spalten, gebe eine Zahl ein oder verwende die Symbole + oder -, um die Zahl zu ändern. Du kannst bis zu 6 Spalten haben. Die Seite wird mit der neuen Konfiguration neu gezeichnet.
Seitennummerierung
Wenn du mehr Produkte hast, als du auf einer Seite anzeigen kannst, werden Seitenumbruch-Links angezeigt, damit deine Kunden auf alle Produkte zugreifen können. Du hast zwei Möglichkeiten der Seitennummerierung:
Ein Link Mehr anzeigen, der unten im Element Produkte angezeigt wird:
Seitenzahl-Links mit Seitenvor- und Rückwärtslinks:
Klicke zum Festlegen der Seitenumbruchsfunktion auf Seitenumbruch, und wähle die zu verwendende Option aus. Du kannst auch die Anzahl der Produkte pro Seite einstellen.
Bildanzeige
Standardmässig werden die Bilder, die du für die Produkte hochgeladen hast, angezeigt. Wenn du mehr als ein Bild hochgeladen hast und ein einzelnes Bildlayout verwendest, wird das erste Bild, das du hochgeladen hast, als erstes angezeigt. Das Bild ändert sich, wenn der Kunde über dem Bild schwebt.
Du kannst Bilder ausschalten oder das Seitenverhältnis ändern, in dem sie angezeigt werden.
Tipp: Das Seitenverhältnis bestimmt die Grösse und Form deines Bildes. Ein 4:1-Verhältnis würde die Bildbreite um das Vierfache der Höhe erhöhen. Ein Verhältnis von 1:1 ergibt ein Quadrat. Ein Verhältnis von 3:2 bedeutet, dass die Breite nur etwas grösser ist als die Höhe. Fühle dich frei, um mit diesem Verhältnis herum zu spielen, bis du das rechte Aussehen für deinen Shop findest.
Um die Bildanzeige zu ändern, klicke auf Anzeigeoptionen und dann auf Bildoptionen. Wenn du keine Bilder für Produkte anzeigen möchtest, kannst du diese Option deaktivieren.
Standardmässig werden Bilder im Verhältnis 1:1 angezeigt. Klicke dich durch die anderen Optionen und wähle die Grösse, die für deine Seite am besten geeignet ist.
Schaltfläche Display
Standardmässig zeigt jedes Produkt eine Schaltfläche an, die zu der Produktdetailseite navigiert, auf der Informationen zu diesem Produkt dynamisch angezeigt werden. Du kannst die Schaltfläche deaktivieren oder den Text, die Grösse und die Farbe (basierend auf dem Design Ihrer Website) dieser Schaltflächen ändern.
Um die Anzeige der Schaltflächen zu ändern, klicke auf Anzeigeoptionen und dann auf Schaltflächenoptionen.
Produktname, Preis und Kurzbeschreibung Anzeige
Standardmässig werden Name, Preis, optionaler Verkaufspreis und Kurzbeschreibung unterhalb des Bildes angezeigt.
Um diese Produktinformationen auszublenden, klicke auf Anzeigeoptionen und deaktiviere die Optionen, die du nicht anzeigen möchtest.
Textplatzierung
Standardmässig sind Produktname, Preis, Beschreibung und Schaltfläche unterhalb des Bildes und linksbündig angeordnet. Du kannst das Bild stattdessen nach links, rechts oder unterhalb dieser Information haben. Oder du kannst das Bild hinter dem Text haben. Du kannst die Textanzeige auch einblenden lassen, wenn dein Kunde über dem Bild schwebt. Die Ausrichtung kann links, rechts oder zentriert erfolgen.
Um die Textplatzierung zu ändern, klicke auf Anzeigeoptionen und dann auf Infoplatzierung.
Angezeigte Produkte verwalten
Sobald du das Element Produkte auf einer Seite abgelegt hast, kannst du die anzuzeigenden Produkte und die Reihenfolge, in der sie angezeigt werden, ändern.
Klicke innerhalb des Elements Produkte, um das Dialogfeld Produkte zu öffnen.
Klicke auf Produkte verwalten.
Die angezeigten Produkte werden in der Reihenfolge angezeigt, in der sie auf der Seite erscheinen.
Um Produkte zu ändern (hinzufügen/löschen), klicke auf Produkte auswählen und wähle die gewünschten Produkte aus.
Um die vorhandenen Produkte nachzubestellen, ziehe sie einfach per Drag&Drop.
Um ein Produkt zu löschen, klicke auf das Minus-Symbol links neben dem Produktbild.
Klicke auf Fertig, wenn du fertig bist. Deine Änderungen werden auf der Seite wiedergegeben.
Eine lange Beschreibung oder andere Elemente zur Produktseite hinzufügen
Jedes Produkt wird auf einer generierten Produktseite angezeigt. Du kannst weitere Elemente auf dieser Seite hinzufügen, um eine lange Beschreibung für dein Produkt zu erstellen. Klicke dazu im Editor auf das Produkt, wie es auf einer Kategorie-Seite, in einem Produktelement oder auf der Seite Produkt bearbeiten angezeigt wird. Die Produktseite wird im Editor angezeigt und kann bei Bedarf geändert werden.
Unten auf der Produktseite siehst du einen Bereich für die lange Beschreibung, die leer ist, wenn du sie noch nicht bearbeitet hast. Du kannst Elemente aus der Registerkarte Erstellen wie auf jeder beliebigen Seite in diesen Bereich ziehen, und es ist eine gute Möglichkeit, zusätzliche Informationen zu einem Produkt einzufügen, ohne den Kurzbeschreibungsbereich zu überladen.
Die lange Beschreibung lässt sich auch kreativ in vielerlei Hinsicht verwenden. Du kannst beispielsweise ein Element Produkte auf die lange Beschreibung ziehen und ein Element vorschlagen, das dem angezeigten ähnelt. Probiere es in deinem Shop aus und schaue, was dir einfällt!