Web Shop für Handyspiele erstellen

Web Shop ist eine Lösung, mit der Sie virtuelle Güter, virtuelle Währungen und Bundles über das Xsolla-Zahlungsportal und den Shop auf Ihrer eigenen Website verkaufen können. Den Nutzern stehen hierbei mehr als 700 Zahlungsmethoden zur Verfügung.

Auf der folgenden Seite wird beschrieben, wie man eine Website mit der “Web Shop”-Vorlage erstellt. Mehr Informationen über die Lösung und alle ihre Funktionen finden Sie in der Dokumentation.

So erstellen Sie einen Web Shop:

  1. Erstellen Sie ein Projekt im Kundenportal.
  2. Erstellen Sie eine Website.
  3. Konfigurieren Sie die wichtigsten Blöcke.

Website erstellen

  1. Öffnen Sie Ihr Projekt im Kundenportal.
  2. Klicken Sie in der Seitenleiste auf Site Builder.
  3. Klicken Sie auf Seite erstellen.
  4. Wählen sie die Web Shop-Vorlage aus.
  5. Geben Sie einen Link zu dem Spiel in Google Play oder im App Store an, damit die Shopoberfläche vorab konfiguriert wird (Logo, Hintergrundbild, Farben, Footer-Text). Wenn Sie keine Daten aus dem Spiel verwenden möchten, stellen Sie den Umschalter Spielinfos aus Google Play oder dem App Store verwenden auf Aus.
  1. Klicken Sie auf Erstellen.
  2. Wählen Sie:
    • das globale Theme der Website,
    • die Farbe der Hauptelemente,
    • die Eckenrundung der Schaltflächen,
    • Schriftarten für Überschriften und Hauptteil.
  3. Gehen Sie im Hauptteil des Baukastens wie folgt vor:
    • Laden Sie Bilder und Videos in die Blöcke hoch.
    • Bearbeiten Sie die für die Benutzer bestimmten Texte.

Wichtige Blöcke konfigurieren

Alle Blöcke enthalten Standardeinstellungen. Sie können bestimmte Blockfunktionen aktivieren oder deaktivieren und nach Belieben anpassen.

Header-Block einrichten

Der Block im Header der Website. Im Header werden Benutzerinformationen angezeigt, außerdem enthält er Elemente für Navigation auf der Website. Sie können den Block fixieren, so dass er jederzeit auf dem Bildschirm sichtbar bleibt, wenn man durch die Website scrollt.
Hinweis
Wenn Sie bei der Erstellung der Website einen Link zu Google Play oder dem App Store angegeben haben, wird der Header-Block automatisch konfiguriert.
So können Sie den Block bei Bedarf anpassen:
  1. Stellen Sie die entsprechenden Schalter auf Ein:
    • Anmeldeschaltfläche. Die Schaltfläche für die Benutzerauthentifizierung wird im Header der Website angezeigt.
    • Fixieren. Diese Funktion ermöglicht es, dass der Header beim Scrollen sichtbar bleibt.
    • Benutzerdefinierter Hintergrund. Der Header-Hintergrund ändert sich in einen benutzerdefinierten Hintergrund.
  2. Konfigurieren Sie die Schaltflächen in dem Block.

Aufmacher-Block

Block mit grundlegenden Informationen über Ihren Web Shop, das Spiel, für das die Website erstellt wurde, und den Entwickler. Wenn Sie bei der Erstellung der Website keinen Link zu Google Play oder dem App Store angegeben haben, sollten Sie die folgenden Elemente des Aufmacher-Blocks im Hauptteil des Editors konfigurieren:
  1. Fügen Sie das Spiel-Icon hinzu.
  2. Geben Sie den Spielnamen an.
  3. Geben Sie den Spieleentwickler an.
Passen Sie den Block bei Bedarf an:
  1. Fügen Sie ein Hintergrundbild hinzu.
  2. Ergänzen Sie die Karten um Informationen, indem Sie die folgenden Schalter auf Ein stellen:
    • Infokarten
    • Karten-Icons
    • Kartenüberschriften
    • Kartenbeschreibungen

Fast Login

Der Fast Login-Block bietet Nutzern eine Möglichkeit, sich auf der Website zu authentifizieren. Sie können den Block zusätzlich zur Anmeldeschaltfläche im Header oder anstelle davon verwenden. Das Erscheinungsbild und die Möglichkeiten des Blocks hängen von der gewählten Authentifizierungsmethode ab.
Hinweis
Wechseln Sie im Baukasten zu Login-Einstellungen, um eine Authentifizierungsmethode auszuwählen.
Wenn Sie die Option “Benutzer-ID” als Authentifizierungsmethode ausgewählt haben, empfehlen wir Ihnen, Anweisungen hinzuzufügen, wo man die ID im Spiel finden kann. Gehen Sie dazu wie folgt vor:
  1. Stellen Sie den Schalter Anleitung auf Ein.
  2. Klicken Sie auf die Zeile, die am unteren Ende des Blocks erscheint.
  3. Ersetzen Sie den Text durch Ihre Anweisungen.

Passen Sie bei Bedarf den Block an, indem Sie:

  1. die Überschrift und die Beschreibung des Blocks anpassen,
  2. den Standardtext durch Ihren eigenen ersetzen.

So konfigurieren Sie den Block, wenn die Option “Benutzer-ID” als Authentifizierungsmethode ausgewählt ist:

  1. Passen Sie die Überschrift und die Beschreibung des Blocks an. Sie können außerdem den Standardtext durch Ihren eigenen ersetzen.
  2. Wenn Sie den Schalter Anleitung auf Ein stellen, werden Anweisungen angezeigt, wie man die die Benutzer-ID im Spiel findet.

Online-Shop-Block einrichten

Block für den Verkauf von virtuellen Gegenständen, Bundles und virtuellen Währungspaketen. Dieser Block enthält automatisch erstellte Abschnitte, die Sie löschen und durch neue Abschnitte ersetzen können.

  1. Passen Sie den Block bei Bedarf an:
    • Geben Sie eine Überschrift an.
    • Aktivieren Sie die Anzeige von Produktgruppennamen.
    • Aktivieren Sie Registerkarten für eine einfache Navigation im Shop.
    • Fügen Sie einen benutzerdefinierten Hintergrund hinzu.
    • Konfigurieren Sie die Call-to-Action-Schaltfläche für die Anmeldung.

  1. Wählen Sie im Online-Shop-Abschnitt in der Drop-down-Liste den auf der Website zu verkaufenden Artikeltyp und dessen Gruppe aus.

Achtung
Falls erstellte oder importierte Artikel und virtuelle Währungen nicht im Site Builder angezeigt werden, prüfen Sie, ob die erstellten Artikel-/Gegenstandsgruppen und Pakete aktiviert sind und ob die Artikel der erstellten Gruppen zugewiesen sind. Artikel, die im Kundenportal erstellt wurden, können Sie unter Online-Shop betrachten und einrichten.

  1. Entscheiden Sie sich im "Online-Shop"-Block für ein Artikelkarten-Layout:

    • Empfohlen: Mit diesem Kartenlayout können Sie die Aufmerksamkeit der Nutzer auf Produkte oder Sonderangebote lenken. Wir empfehlen, dieses Layout für Boni- und Rabattaktionen, für zeitlich und zahlenmäßig begrenzte Werbeaktionen und Artikel sowie für Bundles zu verwenden.
      Unter "Artikelkarten-Layout" können Sie folgende Einstellungen vornehmen:
      • Artikelbild und ‑beschreibung ein- oder ausblenden
      • Artikelbild als "Eingepasst" oder "Vollbild" darstellen
      • Textfarbe ändern
      • eigenen Hintergrund für das Karussell festlegen
  • Horizontal: Bei diesem Kartenlayout werden der Name, die Beschreibung und der Preis des Artikels rechts neben dem Bild platziert.
    Unter "Artikelkarten-Layout" können Sie folgende Einstellungen vornehmen:
    • Artikelbild und ‑beschreibung ein- oder ausblenden
    • Artikelbild und ‑beschreibung ein- oder ausblenden
    • horizontales Scrollen auf Mobilgeräten aktivieren oder deaktivieren
    • eigenen Hintergrund für den Abschnitt festlegen
  • Vertikal: Bei diesem Kartenlayout werden der Name, die Beschreibung und der Preis des Artikels unter dem Bild platziert.
    Unter "Artikelkarten-Layout" können Sie folgende Einstellungen vornehmen:
    • Artikelbild und ‑beschreibung ein- oder ausblenden
    • Artikelbild als "Eingepasst" oder "Vollbild" darstellen
    • horizontales Scrollen auf Mobilgeräten aktivieren oder deaktivieren
    • eigenen Hintergrund für den Abschnitt festlegen
  • Groß: Wir empfehlen, dieses Kartenlayout für Bundles und Boni zu verwenden. Hierbei werden alle relevanten Informationen der Karte angezeigt, ohne darauf klicken zu müssen.
    Unter "Artikelkarten-Layout" können Sie folgende Einstellungen vornehmen:
    • Artikelbild und ‑beschreibung ein- oder ausblenden
    • Artikelbild als "Eingepasst" oder "Vollbild" darstellen
    • horizontales Scrollen auf Mobilgeräten aktivieren oder deaktivieren
    • eigenen Hintergrund für den Abschnitt festlegen
Hinweis
Für Bundles stehen nur die Layouts Vertikal, Groß und Empfohlen zur Auswahl.
  1. Passen Sie das Kartenlayout bei Bedarf an, indem Sie in den Kartenlayout-Einstellungen die entsprechenden Schalter auf Ein stellen.

  1. Sie können leere Abschnitte ausblenden, indem Sie den entsprechenden Schalter auf Ein stellen.

Hinweis
Wenn Sie bei der Erstellung der Website einen Link zu Google Play oder dem App Store angegeben haben, wird der Footer-Block automatisch konfiguriert.
So passen Sie den Block bei Bedarf an:
  1. Wählen Sie den Layout-Stil aus.
  2. Passen Sie den Hintergrund an.
  3. Fügen Sie die Teilen-Schaltflächen hinzu, und konfigurieren Sie die Social-Media-Symbole.
  4. Fügen Sie die Links zu den sozialen Netzwerken hinzu.
  5. Legen Sie eine Altersbeschränkung fest.
  • Web Shop: Integrationsleitfaden
  • Alle Blöcke im Site Builder
    • War dieser Artikel hilfreich?
      Vielen Dank!
      Gibt es etwas, das wir verbessern können? Nachricht
      Das tut uns leid
      Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
      Vielen Dank für Ihr Feedback!
      Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
      Diese Seite bewerten
      Diese Seite bewerten
      Gibt es etwas, das wir verbessern können?

      Jetzt nicht

      Vielen Dank für Ihr Feedback!
      Letztmalig aktualisiert: 24. Mai 2024

      Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!