Üben Sie die Änderung der Schnittstelle mit Hilfe von KI (7)
In diesem Abschnitt verwenden wir KI, um ein einfaches Layout für die Homepage-Oberfläche zu erstellen. Wenn Sie diese grundlegenden Schritte beherrschen, können Sie spezielle Inhaltsblöcke wie Flash Sale, Spiel usw. vollständig mithilfe von KI erstellen.
Üben Sie die Änderung der Schnittstelle mit Hilfe von KI (7)
Benutzeroberflächenänderungen mit KI-Unterstützung üben
Sie müssen Folgendes überprüfen und vorbereiten:
- So richten Sie Sprache und Währung ein.
- So verwenden Sie Khang Scraper zum Sammeln von Produktdaten.
- Ein aktiviertes KI-Konto (ChatGPT, Gemini…).
Ich werde Amazon als Website zum Sammeln von Daten wählen, da es viele Sprachen zur Auswahl bietet. Daher müssen Sie die Amazon-Sprache an die Einstellungen Ihrer Website anpassen. Wenn Sie die gewünschte Sprache nicht finden, wählen Sie vorübergehend Englisch zum Üben. Wir werden mit der Kategorie Damenmode üben.
Tipp: Seien Sie geduldig und folgen Sie dem Prozess bis zum Ende, auch wenn dies nicht die gewünschte Produktkategorie ist.
Vorbereitung
1. Erstellen Sie 3 Kategorien wie: Coats, Sweaters, Pants
So gehen Sie vor:
- Greifen Sie auf Folgendes zu: /admin/catalog/categories/create.
- Füllen Sie auf der Seite Add New Category alle erforderlichen Informationen (mit * gekennzeichnet) aus.
- Hinweis: Überprüfen Sie Parent Category - Root (die erstellte Kategorie wird eine übergeordnete Kategorie sein).
2. Produkte scrapen und in die richtige Kategorie importieren
- Wählen Sie eine Vorlage, um Produkte bei Amazon zu scrapen und Rohdaten zu erhalten.
- Überprüfen Sie den Artikel: Grundlegende Khang Scraper Benutzeranleitung.
- Und halten Sie bei Schritt 3 dieses Artikels an: Ich werde Sie weiter anleiten, wie Sie Produkte in die gewünschte Kategorie importieren können.
- Greifen Sie auf /admin/scraper/import-setting zu, um:
- Die zu importierende Produktkategorie auszuwählen;
- Meta-Tags gemäß einer gemeinsamen Struktur für jedes Produkt einzurichten.
- Greifen Sie auf die Rohdatenseite zu: admin/scraper.
- Wählen Sie Produkte aus derselben Kategorie aus und importieren Sie sie.
3. Banner-Bilder
- Bereiten Sie 3 Banner-Bilder im Voraus vor, Größe 1920px x 700px (.jpeg, .webp), die für die Produktkategorie geeignet sind.
4. Logo und Favicon erstellen
- Greifen Sie auf /admin/settings/channels/edit/1 zu, um das Logo (192px x 50px) und das Favicon (16px x 16px) hochzuladen.
Arbeiten mit Theme-Einstellungen
Schritt 1: Wir werden ein neues Theme erstellen, also blenden wir vorübergehend alle aktuellen Inhaltsblöcke aus
- Klicken Sie auf alles überprüfen und wählen Sie dann „Select Action > Change status > Inactive“.
- Nun wählen Sie Filter/ Status/Active -> Apply Filters : um nur aktive Blöcke anzuzeigen.
- Klicken Sie anschließend auf Admin/ Clear Cache, um alte Daten zu löschen.
Schritt 2: Ein Homepage-Layout erstellen:
Wenn Sie möchten, dass die KI Ihnen beim Entwurf hilft, füllen Sie diese Eingabeaufforderung aus:
Mit einer solchen Eingabeaufforderung ist hier das Ergebnis von Gemini AI (2.5 flash):
Hier ist das deutsche Homepage-Layout für die Kategorie "Damenmode" auf Bagisto Themes, das das weiß-pinke Farbschema und die angegebenen Einschränkungen beibehält.
| Sort Order | Name (Blockname) | Type (einen aus der Liste auswählen) | Anzeigeinhalt (kein Code verwenden, es sei denn Type = static_content) | Effekt (NUR für static_content) | Status |
|---|---|---|---|---|---|
| 1 | NEUE KOLLEKTION | image_carousel | Slide 1: Titel "Neue Kollektion - Mühelose Eleganz", Bild eines Models in einem pastellrosa Kleid. Slide 2: Titel "20 % Rabatt auf Neuheiten", Bild von Accessoires wie Handtaschen und High Heels. Slide 3: Titel "Finden Sie Ihren einzigartigen Stil", Bild eines fröhlichen, selbstbewussten Models. Auto-Play: Ja |
Active | |
| 2 | WILLKOMMEN IN UNSERER WELT | static_content |
|
Einblenden-Effekt für den gesamten Block. | Active |
| 3 | NEUESTE PRODUKTE | product_carousel | Zeigt Produkte aus der Kollektion "Neuheiten". | Active | |
| 4 | BELIEBTE KATEGORIEN | category_carousel | Kleider; Blusen; Röcke; Culottes; Jacken | Active | |
| 5 | SONDERANGEBOT | static_content |
|
Subtiler Zoom-beim-Schweben-Effekt. | Active |
| 6 | BESTSELLER | product_carousel | Zeigt "Bestseller"-Produkte an. | Active | |
| 7 | ZITAT DES TAGES | static_content |
|
Active | |
| 8 | UNSERE VERPFLICHTUNGEN | services_content | Expressversand; 7-Tage-kostenlose Rücksendungen; 24/7 Online-Support; Flexible Zahlungsoptionen | Active | |
| 9 | INFORMATION & UNTERSTÜTZUNG | footer_links | Über uns; Rückgabebedingungen; So bestellen Sie; Kontaktieren Sie uns | Active | |
| 10 | FOLGEN SIE UNS | static_content |
|
Subtiler Farbwechsel beim Schweben für soziale Symbole. | Active |
| 11 | FUSSZEILE RECHTLICHES | footer_links | Nutzungsbedingungen; Datenschutzrichtlinie; Urheberrechte | Active | |
| 12 | KONTAKT-INFO | services_content | Adresse: 123 Fashion St., Ho Chi Minh Stadt; Hotline: 0123.456.789; E-Mail: contact@fashionista.vn | Active |
Schritt 3: Neue Datenblöcke erstellen:
Wie im vorherigen Teil erwähnt, haben wir in den Einstellungen/Themen 6 verschiedene Typen. Ich werde Sie also anleiten, die entsprechenden 6 Inhaltsblöcke in diese 6 Typen einzugeben. Sie können dasselbe für die restlichen Blöcke tun.
Schritte zum Erstellen von Inhaltsblöcken
Block 1 - NEUE KOLLEKTION
Type: Image Carousel
Ziel: Einen Bilder-Slider für Produkte und Werbeaktionen anzeigen.
Klicken Sie auf Create Theme, füllen Sie die Informationen aus und drücken Sie Save.
Das System wechselt zu Edit Theme. Geben Sie nacheinander Inhalte für die 3 Bilder ein und wählen Sie Status als Active.
Nachdem Sie alle Inhaltsblöcke hinzugefügt haben, denken Sie daran, den "Cache zu leeren" (Clear Cache), wie oben beschrieben. Und dann sehen Sie sich die Ergebnisse an.
Hinweis: Falls es einen Layoutfehler gibt – unvollständige Inhaltsblöcke werden angezeigt – ändern Sie bitte die Position des Typs: Footer Links an die letzte Position.
Hinterlasse einen Kommentar