Color Swatches App (Deutsche)

    

Nach der Installation und Einrichtung ermöglicht die Color Swatches App den Benutzern Ihrer Website, die Farbe eines Produkts anhand repräsentativer Musterbilder, die Sie hochgeladen haben, auszuwählen. Wenn Sie also ein Produkt mit Farboptionen wie Rot, Blau oder Leopardendruck haben, können Sie Bilder hochladen (oder eine Vollfarbe einstellen), die dem Kunden ein Muster dieser Farbe / dieses Musters auf der Detailseite des Produkts anzeigen. Wenn Sie auf ein Muster klicken, wird die Farboption aktualisiert und eCom führt die Standardfunktionen aus, die normalerweise bei der Farbauswahl auftreten (z.B. Preisgestaltung, Lagerbestand, Aktualisierung der Informationen zur Produktbildgalerie).

Folgen Sie den Anweisungen in Lightspeed eCom, um die Color Swatches App über den App Marketplace zu kaufen. Während der Installation werden Sie zu unserer App-Management-Site weitergeleitet, um sich entweder bei einem bestehenden Konto anzumelden (wenn Sie bereits eine Lightspeed eCom-Anwendung von uns gekauft haben) oder ein neues Konto bei uns zu erstellen, um diese und alle zukünftigen Anwendungen zu installieren und zu verwalten, die Sie von uns für Lightspeed eCom erwerben können.

Sobald Sie ein Konto erstellt oder sich in Ihr bestehendes Konto eingeloggt haben, wird die App automatisch installiert. Danach werden Sie zur Shop-Liste weitergeleitet, die eine Liste der mit Ihrem Konto registrierten Lightspeed eCom-Shops und alle mit diesen Shops installierten Anwendungen anzeigt.

Damit die Color Swatches App funktionieren kann, wird gleichzeitig die Catalog Clone App installiert. Die Catalog Clone App wird benötigt, um Ihren eCom-Katalog in unser App-Framework zu klonen und damit zu synchronisieren (damit Ihr Katalog für die Color Swatch App im App-Admin verfügbar ist). Bevor Sie mit der Arbeit in der Color Swatches App beginnen, sollten Sie die erste Synchronisierung in der Catalog Clone App durchführen, um Ihren aktuellen Produktkatalog in Ihr AdVision App-Konto zu ziehen. Klicken Sie dazu auf den App-Link "Catalog Clone" und dann auf die Schaltfläche "Importieren/gesamten Katalog synchronisieren". Achten Sie darauf, dass Ihr Browserfenster geöffnet und Ihr Computer eingeschaltet ist, während der Katalog importiert wird.

Nachdem Sie Ihren Katalog in Ihr AdVision App-Konto importiert haben, können Sie nun mit der Arbeit in der Color Swatch App beginnen.

Schauen Sie sich unser Video-Tutorial an!

Um diese App zu verwalten, klicken Sie auf den Namen "Color Swatches" unter dem entsprechenden Shop. Dies führt Sie zur Ansicht der Produktliste mit allen Produkten, die die Catalog Clone App aus eCom importiert hat.

Jedes Produkt in Ihrem Katalog wird in dieser Ansicht angezeigt, und mit jedem Produkt können Sie die folgenden Informationen einsehen: 

  1. ID - im AdVision App-System
  2. eCom ID – die Produkt-ID in eCom
  3. Titel
  4. URL – Pfad zum Produkt in Ihrem eCom Webstore
  5. Sichtbarkeit - ob das Produkt in Ihrem eCom-Webshop angezeigt wird oder nicht.
  6. Muster - zeigt an, ob Sie bereits Muster für das Produkt in der App hochgeladen haben

Jetzt können wir mit der Erstellen von Mustern beginnen. Finden Sie zuerst ein Produkt, von dem Sie wissen, dass es eine Farboption in Ihrem Katalog hat. Sie können dies tun, indem Sie entweder durch die Liste der Produkte blättern oder die Schlüsselwort-Suche oben verwenden.  Sobald Sie das Produkt gefunden haben, mit dem Sie arbeiten möchten, klicken Sie auf den Titel, um seine Muster zu verwalten.  

Wenn für das von Ihnen ausgewählte Produkt in eCom Varianten (z.B. Farbe, Größe) eingerichtet sind, werden diese auf der Seite, die geladen wird, aufgelistet. Bei jeder Variante sehen Sie ihren Titel (z.B. Farbe), unter dem alle Optionen innerhalb dieser Variante aufgelistet sind. Varianten für Farbe können zum Beispiel Rot, Blau und Grün sein; für jede Variantenoption wird ein Miniaturbild angezeigt, das Folgendes anzeigt:

  1. Ein Feld, das das Bild oder die Farbmuster der Option anzeigt, sobald Sie es eingestellt haben
  2. Den Titel der Option (z.B. Blau)
  3. Ein Standardbeschriftungsfeld, bei dem Sie einstellen können, welcher Wert für die ALT und TITEL Attribute des Bilds der Option verwendet werden. Wenn Sie dieses Feld leer lassen, wird der Titel der Option (z.B. Blau) für ALT und TITLE verwendet. Nicht vertraut mit ALT und TITLE? Bitte besuchen Sie https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/
  4. Unter dem Standardbeschriftungsfeld befinden sich zwei Symbole, das Bildsymbol und das Farbpalettensymbol. Das Bildsymbol (links) wird verwendet, um ein Bild für das Muster der Option hochzuladen. Das Farbpalettensymbol (rechts) wird verwendet, wenn Sie eine Vollfarbe für das Muster der Option festlegen, anstatt ein Bild zu verwenden.

Auswahl einer Farbe für das Muster

Wenn eine Vollfarbe für das Muster einer Option ausreichend ist, können Sie die den Farbwähler verwenden und eine einfache Vollfarbe einstellen, um die Option darzustellen. Bei Verwendung einer Vollfarbe kann das Muster für Ihre Kunden schneller geladen werden (Vollfarben laden schneller als Bilder); so können Sie es vermeiden, ein Bild vorbereiten zu müssen. Um den Farbwähler zu verwenden, klicken Sie auf das Farbpalettensymbol unter der Option, mit der Sie arbeiten möchten, verwenden Sie das Farbwähler-Tool, um Ihre Farbe zu finden, und klicken Sie dann auf die Schaltfläche "Auswählen". Dadurch wird die Farbe der Option festgelegt und die Farbe im Miniaturbild angezeigt.

Hochladen eines Bildes für das Muster

Wenn Sie etwas Detaillierteres als ein Vollfarbdisplay für das Muster benötigen, können Sie ein Bild vorbereiten und hochladen. Bevor Sie das Bild hochladen, müssen Sie es zunächst vorbereiten.

Oben auf der Seite finden Sie eine Anmerkung unter dem Titel "Denken Sie bitte daran, Ihre Bilder vor dem Hochladen zu optimieren." Darin sind die Anforderungen an ein Musterbild festgelegt. Jedes Musterbild, das Sie verwenden möchten, sollte Folgendes erfüllen:

  1. Maximale Breite von 150 Pixeln
  2. 72 DPI
  3. Optimiert für das Internet. Wenn Sie nicht damit vertraut sind, wie man Bilder für das Internet optimiert, besuchen Sie bitte https://www.abetterlemonadestand.com/optimizing-images-for-web/ Wenn Sie ein Bild vor dem Hochladen nicht optimieren, kann dies dazu führen, dass das Bild nicht in die App hochgeladen wird, sodass Ihre Kunden länger auf das Laden der Musterbilder warten müssen.
  4. Das Bild kann beliebig hoch sein, sollte jedoch für alle Musterbilder gleich sein.

Nachdem Sie Ihre Musterbilder wie benötigt vorbereitet haben, klicken Sie auf das Bildsymbol unter der Option, zu der Sie ein Bild hochladen möchten.  Dadurch wird das Dateiauswahl-Dialogfeld Ihres Betriebssystems geöffnet, damit Sie die Datei finden können, die Sie vorbereitet haben und verwenden möchten. Wenn Sie die Datei gefunden haben, wählen Sie sie aus (per Doppelklick oder durch Klicken auf das Symbol und Auswahl von "Öffnen" oder "Auswählen"). Das Bild wird sofort für das Muster hochgeladen und Sie sehen ein Miniaturbild der Bildanzeige. 

über dem Titel der Option. 

Wenn Sie alle Muster für ein Produkt eingestellt haben, besuchen Sie die Produktseite in Ihrem eCom-Webshop. Standardmäßig werden alle von Ihnen eingestellten Muster unterhalb des Auswahlmenüs der Variante angezeigt. Beachten Sie, dass, wenn Sie nicht alle Optionen innerhalb einer Variante mit einem Farb- oder Bildmuster versehen, alle vernachlässigten Optionen ihren Titel anstelle eines Farb- oder Bildmusters anzeigen. Um dies zu korrigieren, sollten Sie für jede Option in einer Variante ein Bild oder ein Farbmuster festlegen, für die Sie Muster verwenden werden.

Nachdem Sie nun gesehen haben, wie Sie Muster für ein Produkt einrichten, klicken Sie auf die Lasche "Einstellungen", um die Felder zu sehen, die Sie verändern können. Unter Einstellungen können Sie Folgendes festlegen:

  1. Musterbreite - Dies bestimmt, wie breit die Farb- und Bildmuster auf der Produktseite angezeigt werden. Sie können als Pixelwert (z.B. 50px - dies ist die empfohlene Methode), als Prozentsatz (z.B. 80%), als em-Wert (z.B. 3em) oder als pt Wert (z.B. 48pt) eingeben. Was muss man über diese Maßeinheiten wissen? Bitte besuchen Sie https://www.w3.org/Style/Examples/007/units.en.html. Die Standardbreite ist 30px.
  2. Bildmusterhöhe – Legt fest, wie hoch die Bildmuster auf den Produktseiten angezeigt werden. Die Standard-Bildmusterhöhe ist 30.
  3. Farbmusterhöhe - Legt fest, wie hoch die Farbmuster auf den Produktseiten angezeigt werden. Die Standard-Farbmusterhöhe ist 30.
  4. Split-on-Dash – Diese Funktion ist für fortgeschrittene Benutzer gedacht. AdVision wird die Verwendung dieser Funktion unter bestimmten Bedingungen empfehlen.

Wenn Sie Änderungen in einem dieser Felder vornehmen, sollten Sie auf "Speichern" klicken, um diese Änderungen zu speichern.

Go to Top