Startseitenoberfläche anpassen (6)
Bei der Implementierung sollten Sie das Erscheinungsbild Ihrer Homepage unbedingt an Ihre Marke, Ihre Produkte und Ihr Nutzererlebnis anpassen. In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Homepage individuell gestalten können.
Startseitenoberfläche anpassen (6)
Einführung
Bagisto ist eine Open-Source-E-Commerce-Plattform, die auf Laravel und Vue.js aufbaut. Eines der beliebtesten Standard-Themes ist Velocity – eine moderne, schlanke Benutzeroberfläche, die viele Funktionen für eine Verkaufsseite unterstützt.
Bei der praktischen Umsetzung werden Sie jedoch sicherlich das Homepage-Layout an Ihre Marke, Ihre Produkte und die Benutzererfahrung anpassen wollen. In diesem Artikel erfahren Sie, wie Sie die Velocity-Homepage auf Bagisto bearbeiten können.
1. Anordnen von Inhaltsblöcken in den Theme-Einstellungen
Greifen Sie auf https://[ihre_domain]/admin/settings/themes zu. Klicken Sie auf „Sort Order“, um die Reihenfolge von klein nach groß zu sortieren.
Die Benutzeroberfläche wird so aussehen:
Sie sehen insgesamt 12 Zeilen, was den Inhaltsblöcken auf Ihrer Homepage wie unten dargestellt entspricht.
Bemerken Sie etwas Ungewöhnliches in der obigen Bildschirmaufnahme? Ja, das werde ich erklären:
- Erstens - Die Blöcke 3, 4 und 7 fehlen: Das liegt daran, dass wir noch keine Produktkategorien erstellt und keine Produkte für die Homepage eingerichtet haben, weshalb keine Daten angezeigt werden.
- Zweitens - Block 12 ist vor Block 11 platziert: Das liegt daran, dass Block 11 den „type“ „footer_links“ hat. Dieser Typ wird immer an der letzten Stelle des Website-Layouts platziert.
2. Die Typen in den Theme-Einstellungen von Velocity
Wenn Sie das Theme unter /admin/settings/themes konfigurieren, hat jeder Block auf der Homepage einen eigenen Typ. Ein richtiges Verständnis der einzelnen Typen hilft Ihnen, den Inhalt sinnvoll anzuordnen und das Kundenerlebnis zu optimieren.
Hier sind 6 wichtige Typen:
🛍️ Produktkarussell
- Zweck: Anzeige einer Reihe von Produkten in einem horizontalen Schiebeformat (Karussell).
- Verwendung für: Homepage oder Landing Pages; Anzeige von Produkten nach Kriterien: Ausgewählte Produkte, Neuheiten, Rabatte, Bestseller usw.
- Konfiguration: Wählen Sie eine Kategorie aus oder geben Sie die Produkt-IDs manuell ein; geben Sie den Blocktitel ein; geben Sie die Anzahl der anzuzeigenden Produkte an.
- Beispiel: Ähnlich wie die Abschnitte „Vorschläge für heute“ oder „Ausgewählte Produkte“, die horizontal auf Shopee oder Lazada gleiten.
📂 Kategorie-Karussell
- Zweck: Anzeige einer Reihe von Produktkategorien in einem horizontalen Schiebeformat.
- Verwendung für: Schneller Zugriff der Kunden auf große Produktgruppen (z. B. Handys, Laptops, Mode, Kosmetik usw.).
- Konfiguration: Wählen Sie eine übergeordnete Kategorie aus; geben Sie die Anzahl der anzuzeigenden Unterkategorien an.
- Beispiel: Das horizontale Kategorie-Karussell auf der Homepage von Tiki, das Kunden hilft, schnell auf die Produktgruppen zu klicken, die sie interessieren.
📝 Statischer Inhalt
- Zweck: Einfügen von festem Inhalt (HTML, JavaScript oder Text).
- Verwendung für: Werbebanner; Ankündigungen; Vorstellung des Shops; Einbetten von Code von Dritten (YouTube-Videos, Google Maps usw.).
- Konfiguration: Geben Sie den Text oder HTML direkt ein.
- Beispiel: Ein Textblock „Kostenloser Versand im ganzen Land – Rückgabe innerhalb von 7 Tagen“ direkt auf der Homepage.
🖼️ Bildkarussell
- Zweck: Anzeige eines oder mehrerer Bilder in einem Schiebeformat mit automatischer Wiedergabe.
- Verwendung für: Große Werbebanner am oberen Rand der Seite; eine Sammlung von Bildern zur Präsentation von Produkten oder Dienstleistungen.
- Konfiguration: Laden Sie Bilder hoch (Standardgröße: 1920x600px); geben Sie die dazugehörigen Links ein (falls erforderlich); wählen Sie die Anzeigereihenfolge; wählen Sie, ob die automatische Wiedergabe aktiviert werden soll.
- Beispiel: Der Hauptbanner-Slider am oberen Rand der Homepage der meisten E-Commerce-Websites.
🔗 Footer-Links
- Zweck: Erstellen von Linkgruppen in der Fußzeile (Footer).
- Verwendung für: Schnelle Links zu statischen Seiten: Datenschutzbestimmungen, Nutzungsbedingungen, Kontakt, Über uns usw.
- Konfiguration: Geben Sie den Titel der Linkgruppe ein (z. B. „Über uns“); geben Sie die Liste der Unterlinks ein.
- Beispiel: Die Fußzeile von Shopee hat Abschnitte wie: „Kundensupport“, „Über uns“, „Verkaufsrichtlinien“ usw.
⚙️ Service-Inhalt
- Zweck: Anzeige von Dienstleistungen oder Verpflichtungen in der Fußzeile.
- Verwendung für: Darstellung der Verpflichtungen eines Shops: Schnelle Lieferung, 24/7-Support, sichere Bezahlung usw.
- Konfiguration: Geben Sie den Titel des Dienstes ein; eine kurze Beschreibung oder ein Symbol zur Veranschaulichung.
- Beispiel: Der Abschnitt „Unsere Dienstleistungen“ in der Fußzeile: kostenloser Versand, einfache Rückgabe, 24/7-Kundenbetreuung.
✅ So hilft Ihnen jeder Typ in den Theme-Einstellungen, einen anderen Inhaltsblock auf der Homepage zu verwalten.
- Wenn Sie Produkte anzeigen möchten → wählen Sie Produktkarussell
- Wenn Sie Kategorien anzeigen möchten → wählen Sie Kategorie-Karussell
- Wenn Sie Bildbanner anzeigen möchten → wählen Sie Bildkarussell
- Wenn Sie Text/HTML hinzufügen möchten → wählen Sie Statischer Inhalt
- Wenn Sie Links in der Fußzeile verwalten möchten → wählen Sie Footer-Links oder Service-Inhalt
3. Ändern des Logos und Favicons für die Website
Greifen Sie auf https://[ihre_website]/admin/settings/channels/edit/1 zu.
Suchen Sie den Block Design und laden Sie das Logo und das Favicon wie gewünscht hoch:
Damit haben wir gelernt, wie man die Homepage-Oberfläche anpasst. Im nächsten Teil werden wir mit den praktischen Übungen beginnen!
Hinterlasse einen Kommentar