E-Commerce-App

Ihren Shop strukturieren

Drei Werkzeuge geben Ihrem Katalog Struktur, und sie arbeiten auf unterschiedlichen Ebenen. Kollektionen sind die Gänge Ihres Shops. Kollektionslisten räumen diese Gänge auf, damit Ihr Menü nicht überläuft. Tags arbeiten im Hintergrund, wie unsichtbare zweite Kollektionen.

Kapitel 1Kollektionen

Was sie sind

Kollektionen geben Ihrer Shopping App Struktur und ordnen Ihre Produkte. Wäre Ihre App ein Ladengeschäft, wären die Kollektionen seine Gänge.

Sie entscheiden auch darüber, was Ihr Kunde erreichen kann. Ein Produkt, das an keiner Kollektion hängt, existiert zwar in Ihrem Shop und verkauft sich auch, aber es wird über seine direkte Adresse erreicht: über einen Link, den Sie verschicken, über eine Suche, über ein Widget auf dem Startscreen. Jedes Produkt an mindestens eine Kollektion zu hängen ist deshalb der erste Reflex, noch bevor Sie über Ihre Ordnung nachdenken.

Sie sind in zweierlei Hinsicht beweglich. Zuerst in der Zeit: Eine Kollektion wird mit einem Klick hinzugefügt, gelöscht, gezeigt oder verborgen, was zeitlich begrenzte Kollektionen möglich macht. Dann in der Ordnung: Sie überschneiden sich, und dasselbe Produkt gehört mehreren Kollektionen gleichzeitig an.

Diese Überschneidung verdient Ihre Aufmerksamkeit, wenn Sie Kollektionen anlegen. Nehmen wir unseren Shop für Wohndeko. Ein Kunde, der ein Dekorationsstück sucht, kann in drei verschiedenen Richtungen denken: der betreffende Raum, die Art des Objekts, der Trend des Augenblicks. Also haben wir neun Kollektionen angelegt, verteilt auf diese drei Richtungen:

Nach Raum: Schlafzimmer, Badezimmer, Küche

Nach Art des Objekts: Bilderrahmen, Vasen, Kissen

Nach Trend: Big in Japan, Keep it Slow, Words matter

Jedes Produkt gehört also mehreren Kollektionen an. Es hat mehr Chancen, gesehen zu werden, und der Kunde hat mehr Chancen, es auf dem Weg zu finden, der ihm natürlich einfällt.

Dazu kommt eine Kollektion Sale, die die reduzierten Produkte versammelt. Sie verändert sich mit der Zeit und wird außerhalb der Sale-Saison verborgen.

Wie Sie sie anlegen

Gehen Sie zu Products Collections. Klicken Sie auf Create a collection.

Dann tragen Sie den Titel ein, ein Bild zur Illustration und die Anzeigereihenfolge der Produkte. Der Titel ist auf 32 Zeichen begrenzt, und das ist eine nützliche Einschränkung: Der Name eines Gangs wird in einem Menü gelesen, auf dem Bildschirm eines Telefons, und dort gewinnen kurze Namen immer.

Für die Anzeigereihenfolge gilt immer dieselbe Regel: Fragen Sie sich, wonach Ihr Kunde sucht.

Sechs automatische Reihenfolgen stehen bereit, jeweils paarweise: Erstellungsdatum, neueste zuerst oder umgekehrt, Preis, niedrigster zuerst oder umgekehrt, und Titel, A bis Z oder Z bis A. Der siebte Modus ist manuell.

  • Das Datum stellt Neuzugänge nach vorn. Das ist die richtige Wahl für ein Bekleidungsgeschäft, das regelmäßig nachlegt, oder für eine Buchhandlung, deren Kunden nach neuem Lesestoff wiederkommen.
  • Aufsteigender Preis passt zu einem Lebensmittelladen, wo der Kunde sein Budget im Griff behalten will. Absteigender Preis dient eher einer hochwertigen Kollektion, in der der erste Artikel das Niveau setzt.
  • Die alphabetische Reihenfolge ist für Kataloge gedacht, die man durchsieht, wenn man den Namen des Gesuchten schon kennt: Ersatzteile, technische Referenzen, Weine.
  • Der manuelle Modus erlaubt Ihnen, nach oben zu holen, was Sie zuerst verkaufen wollen, und gibt Ihnen die volle Kontrolle über das Aussehen Ihrer Liste.

Diese Reihenfolge gehört zur Kollektion, nicht zum Shop. Ihre Neuzugänge können also nach Datum sortiert sein, während Ihre Auswahl des Monats von Hand geordnet bleibt. Das macht den manuellen Modus auf Dauer tragfähig: Automatische Reihenfolgen greifen von selbst auf Produkte, die Sie später hinzufügen, der manuelle Modus verlangt, dass Sie zurückkommen. Heben Sie ihn sich also für die Kollektionen auf, die ihn verdienen.

Vergessen Sie SEO nicht. Ihre Kollektionen sind genauso indexierbar wie Ihre Produktseiten. Füllen Sie die Felder Title und Meta description aus und passen Sie die URLs mit Ihren Schlüsselwörtern an.

Die Kollektionsliste des Shops. Oben ein Suchfeld und, eingekreist, die grüne Schaltfläche, die eine Kollektion anlegt. Darunter belegt jede Kollektion eine Zeile: ihr Vorschaubild mit dem eingesetzten Titel, ihre Anzahl an Produkten und ein Chip, der sagt, ob sie im Menü der App erscheint.
Das Detail einer Kollektion. Links ihre Produkte in der Anzeigereihenfolge, jedes mit seinem Vorschaubild, seinem Preis, seinem Bestandsstatus, einem Griff zum Verschieben und einem Kreuz zum Entfernen. Rechts, eingekreist, der Block für die Suche: Titel und Beschreibung für Suchmaschinen, Adresse der Seite und eine Vorschau des Ergebnisses, wie es erscheinen wird. Unten rechts die Schaltfläche, die die Einstellungen wieder öffnet.

Kapitel 2Kollektionslisten

Wozu sie dienen

Eine Kollektion erreicht das Menü Ihrer App auf zwei Wegen, und dort entscheidet sich das Aussehen Ihrer Navigation.

Für sich allein. Jede Kollektion trägt ihren Block für die Sichtbarkeit im Menü, wo Sie die Option ankreuzen, die die Kollektion im Menü aufführt, und ihren Platz wählen. Sie wird ein Eintrag für sich, gleichrangig mit einem Bereich. Ein Shop mit drei Gängen zeigt sie so, und sein Kunde erfasst den ganzen Katalog auf einen Blick.

Gruppiert. Der Bereich Collection list versammelt mehrere davon unter einem einzigen Eintrag. Der nützliche Anhaltspunkt: Ab fünf Gängen gewinnt das Menü, wenn es gruppiert wird.

Im Vokabular des E-Commerce ist dieser zweite Weg die Unterscheidung zwischen Kategorie und Unterkategorie, wobei die Liste die Kategorie hält und die Kollektionen die Unterkategorien. Wenn Sie von einer anderen Plattform kommen, ist das der Handgriff, den Sie unter einem anderen Namen kennen.

Kommen wir zurück zum Dekoshop und seinen zehn Kollektionen. Ohne Gruppierung wäre das Menü der App überfüllt.

Wir haben also drei Listen angelegt, die die drei Suchrichtungen aufnehmen, mit je drei Kollektionen:

  • Räume: Schlafzimmer, Badezimmer, Küche
  • Objekte: Bilderrahmen, Vasen, Kissen
  • Trends: Big in Japan, Keep it Slow, Words matter

Die Kollektion Sale bleibt außerhalb jeder Liste: Wir wollen, dass sie so unmittelbar erreichbar ist wie möglich. Das ist eine Entscheidung, die man sich merken sollte: Aufräumen darf nie begraben, was an der Oberfläche bleiben muss.

Das Menü eines Shops, in dem jede Kollektion für sich steht: Zwölf Einträge folgen aufeinander, von der Startseite bis zum Sale, einer je Produktfamilie. Am Fuß des Panels zwei soziale Netzwerke und die Einstellungen.
Dasselbe Menü mit gruppierten Kollektionen: Fünf Einträge genügen, und jeder öffnet die Liste seiner Kollektionen.

Wie Sie sie anlegen

Eine Kollektionsliste ist ein Bereich Ihrer Shopping App. Sie wird wie jeder Bereich hinzugefügt, über My App Structure. Klicken Sie auf Add a section und wählen Sie dann Collection list.

Geben Sie Ihrem Bereich einen Titel, hängen Sie ein Bild daran und bestätigen Sie.

Um Ihre Kollektionen hineinzulegen, zwei Methoden:

  • klicken Sie auf das Symbol „+“, um die Kollektionen auszuwählen, die Sie aufnehmen wollen
  • oder ziehen Sie die Kollektionen direkt unter den Bereich Collection list
Das Panel zum Hinzufügen eines Bereichs, geöffnet auf der Gruppe der Kollektionen. Eine erste Kachel, eingekreist, fügt eine Liste von Kollektionen hinzu; die folgenden fügen eine bestimmte Kollektion hinzu, wobei die bereits in der App vorhandene ein grünes Häkchen trägt; die letzte legt eine Kollektion an. Links folgt die Vorschau der App den Änderungen.
Der eben angelegte Bereich, noch leer. Im rechten Panel fügt der eingekreiste Link eine Kollektion zur Liste hinzu, und die Auswahl, die er öffnet, zeigt alle verfügbaren Kollektionen. Links lädt die Vorschau dazu ein, die erste hinzuzufügen.

Welches Layout Sie wählen

Drei Layouts, von denen eines von Ihrem Navigationsmodus abhängt.

Swipe Submenu legt Ihre Kollektionen in ein Untermenü unterhalb der Hauptnavigation der App. Es steht nur im Navigationsmodus „Swipe“ zur Verfügung, dem, in dem man durch waagerechtes Wischen von Bereich zu Bereich wechselt. Es ist das Standardlayout des Katalogs, aber es ist an die Navigation gebunden: Wählen Sie es nur, wenn Ihre App sich auf diesen Modus festlegt, nie als einfachen Ausweichweg.

Classic zeigt Ihre Gänge in Zeilen, mit einem kleinen Vorschaubild und dem Namen in Fett, mehrere pro Screen. Das ist die Haltung eines Verzeichnisses: Es passt zu Ihnen, wenn Sie viele Gänge haben, wenn der Name mehr zählt als das Bild und wenn es auch ohne starke Bilder funktionieren muss. Es ist außerdem der natürliche Ausweichweg für die beiden anderen.

Visual ist ein Schaufenster: große Karten über die volle Breite, das Bild des Gangs als Hintergrund und der Name darüber gelegt. Wählen Sie es, wenn Gänge mit dem Auge gewählt werden, in Mode, Deko oder Lebensmitteln.

Ein Vorbehalt zum letzten: Es verlangt gute Bilder bei allen Ihren Kollektionen. Wenn manche keine oder nur schwache haben, weichen Sie auf Classic aus.

Gewählt wird unter My App Structure, im Menü Ihres Bereichs, Edit the design. Classic und Visual gelten in jedem Navigationsmodus. Wenn Ihre App nicht im Swipe-Modus läuft, blendet das Backoffice Swipe Submenu aus und bietet Ihnen einen Link an, um Ihr Menü zu ändern.

Drei Entwürfe nebeneinander, einer je Layout: Swipe Submenu legt die Kollektionen in ein Untermenü einer seitlichen Navigation; Classic reiht sie in Zeilen, jede mit ihrem runden Vorschaubild und ihrem Titel; Visual stapelt große Bilder über die volle Breite.
Das Menü eines Bekleidungsgeschäfts: Unter dem Eintrag für Kleidung führen fünf Untereinträge die Kollektionen auf, während die übrigen Einträge auf der ersten Ebene bleiben.
Eine Kollektionsliste in Zeilen: drei Kollektionen, jede mit ihrem runden Vorschaubild und ihrem Titel.
Dieselbe Liste als Bilder: Jede Kollektion nimmt die volle Breite ein, ihr Titel sitzt mitten im Foto, und man scrollt, um die nächsten zu sehen.

Überall dasselbe Layout?

Nein, und das ist ein Detail, das zählen kann. Wir empfehlen, die gestalterische Geschlossenheit in Ihrer ganzen App zu wahren, aber unterschiedliche Layouts erlauben Ihnen, eine Hierarchie zu markieren.

Nehmen Sie einen Lebensmittelladen, dessen Katalog so geordnet ist:

  • Lebensmittel
  • Frische: Obst, Gemüse
  • Lose Ware: Getreide, Reis & Nudeln
  • Gesundheit & Schönheit: Kosmetik, Ätherische Öle

Hier enthalten manche Kollektionslisten keine Kollektionen, sondern weitere Kollektionslisten. Es gibt also zwei Ebenen zu unterscheiden. Ebene 1 und Ebene 2 verschiedene Layouts zu geben verhindert, dass sich der Kunde im Baum verliert.

Zwei Screens desselben Lebensmittelladens: links eine Kollektionsliste in Zeilen; rechts die geöffnete Kollektion, ihre Unterkollektionen als große Bilder. Zwei Layouts für zwei Ebenen der Navigation.

Kapitel 3Tags

Was sie sind

Ein Tag ist ein Schlüsselwort, das an einem Produkt hängt, wie eine Markierung. Sie können mehrere an dasselbe Produkt hängen.

Sie dienen zuerst dazu, Ihre Produkte in Ihrem Backoffice wiederzufinden. Ihr eigentlicher Wert liegt aber woanders: Sie steuern, was auf Kundenseite angezeigt wird.

  • sie filtern die Produktlisten-Widgets auf Ihrem Startscreen
  • sie speisen, zusammen mit den Kollektionen, den Block mit ähnlichen Produkten auf Ihren Produktseiten
  • sie speisen die Ergebnisse des Suchbereichs Ihres Shops

Wie Sie sie wählen

Denken Sie an Tags als zweite Kollektionen, unsichtbar in der Navigation, aber wirksam in der Anzeige. Sie bauen in der Regel auf den Eigenschaften Ihrer Produkte auf: Farbe, Material, Form.

Ein Beispiel. In einem Bekleidungsgeschäft kommt ein brauner Rollkragenpullover aus Wolle in die Kollektionsliste „Kleidung“, Kollektion „Pullover“. Er bekommt die Tags „rollkragen“, „braun“, „wolle“.

Zwei Verwendungen ergeben sich sofort. Um alle Ihre Artikel aus Wolle auf dem Startscreen zu zeigen, filtern Sie einfach auf den Tag „wolle“. Und der Pullover kann als ergänzendes Produkt unter einer braunen Hose erscheinen.

Das ist der grundlegende Unterschied zu den Kollektionen: Die Kollektion ordnet, was der Kunde durchsieht, der Tag ordnet, was Sie ihm vorlegen.

Wie Sie sie anlegen

Sie werden beim Anlegen oder Bearbeiten eines Produkts hinzugefügt. Tragen Sie Ihre Tags im rechten Menü der Bearbeitungsseite des Produkts in das Feld Tags ein. Veröffentlichen Sie, um zu bestätigen.

Zwei Schreibregeln entscheiden über die Gesundheit Ihres Vokabulars auf Dauer. Ein Tag wird in einem Wort geschrieben, ohne Leerzeichen, deshalb heißt es im Beispiel oben „rollkragen“. Und Groß- und Kleinschreibung spielt keine Rolle, wolle und Wolle sind derselbe Tag, Sie müssen also nicht auf Ihre Großbuchstaben achten.

Der Rest ist Disziplin, und das Backoffice gibt Ihnen das Werkzeug dafür: Über dem Feld öffnet View all tags die Liste der Tags, die es in Ihrem Shop schon gibt, mit einer Suche und einer Sortierung nach Alphabet oder nach Häufigkeit der Verwendung. Gewöhnen Sie sich an, daraus zu wählen, statt neu zu tippen. Ein Vokabular, das in wolle, wollig und reinewolle abdriftet, filtert dreimal weniger Produkte, als es gibt, und diese Abdrift entdecken Sie nach zweihundert Produktseiten.