Créer un Web Shop pour les jeux mobiles

Web Shop est une solution qui vous permet de vendre sur votre site Web des biens virtuels, de la monnaie virtuelle et des lots en utilisant l’interface de paiement Xsolla et une interface de magasin. Les utilisateurs ont accès à plus de 1 000 modes de paiement.

La page ci-dessous décrit comment créer un site Web à l’aide du modèle Web Shop. Pour en savoir plus sur la solution et découvrir toutes ses fonctionnalités, consultez la documentation.

Pour créer un Web Shop :

1. Créez un projet dans le Compte éditeur.
2. Créez un site web.
3. Configurez les blocs principaux.
4. Configurez le panier.
5. Testez le site
6. Publiez le site.

Créer un site

1. Ouvrez le projet dans le Compte éditeur et accédez à la section Storefronts > Websites.
2. Appuyez sur Create site.
3. Sélectionnez le modèle Web Shop.
4. Ajoutez l’URL d’une plateforme externe où votre jeu est disponible. Cette URL vous permet de créer rapidement une page à l’effigie de votre jeu : les images, le titre du jeu, les informations sur le développeur et le schéma de couleurs sont ajoutés automatiquement. Si vous ne souhaitez pas utiliser les données du jeu, désactivez la bascule Copy game info via App Store or Google Play URL.

5. Appuyez sur Create Web Shop.

• Personnaliser le thème du site :
  • couleurs des éléments clés ;
  • rayon des bordures des éléments ;
  • polices pour les titres et le corps du texte.
• Modifier le contenu :
  • télécharger des images et des vidéos dans les blocs ;
  • modifier les textes visibles aux utilisateurs.

Vous pouvez également créer et configurer des pages supplémentaires pour le site web, par exemple pour publier des actualités, proposer différents lots d’objets dans un magasin ou tenir un blog.

Configurer les blocs clés

Chaque bloc est préconfiguré avec des paramètres par défaut. Vous pouvez activer ou désactiver des fonctions spécifiques d’un bloc et les personnaliser selon vos besoins.

Configurer le bloc d'en-tête

Le bloc Header situé dans l’en-tête du site affiche des informations sur l’utilisateur et contient des éléments de navigation. Fixez le bloc afin qu’il reste visible à l’écran lors du défilement du site.

1. Activez les bascules suivantes :

1. • Login button : affiche le bouton d'authentification utilisateur dans l'en-tête du site.

1. • Fixed position : maintient l'en-tête visible lorsque l'utilisateur fait défiler la page.

1. • Custom background : remplace l'arrière-plan par défaut de l'en-tête par un arrière-plan personnalisé.

2. Configurez les boutons dans le bloc.

Configuration du bloc Lead

Bloc contenant les informations de base du Web Shop : le jeu pour lequel le site a été créé ainsi que le nom du développeur. Si vous n’avez pas ajouté de lien Google Play ou App Store lors de la création du site, configurez les éléments suivants du bloc Lead dans la section principale du constructeur :

1. Ajoutez l’icône du jeu.
2. Indiquez le nom du jeu.
3. Indiquez le développeur du jeu.

1. Ajoutez une image d’arrière-plan.
2. Pour afficher les informations du site sur les Info cards, activez les bascules suivantes :
   • Card icons
   • Card headings
   • Card descriptions

Configuration du bloc de Fast Login

Le bloc Fast Login permet de mettre en avant l’étape d’autorisation et de simplifier le parcours d’achat de l’utilisateur.

Pour utiliser le bloc Fast Login, sélectionnez d’abord une méthode d’autorisation dans la section Login Settings. L’apparence et le comportement du bloc dépendent de la méthode d’authentification choisie.

Si vous utilisez l’authentification par ID utilisateur, nous vous recommandons d’ajouter des instructions pour trouver l’ID dans le jeu. Pour ce faire :

1. Dans la barre latérale du constructeur, accédez à la section Login settings.
2. Sélectionnez l’option ID utilisateur.
3. Activez la bascule Instructions.

Si nécessaire, personnalisez la fenêtre modale d’instructions en :

• Ajustant l’affichage de l’en-tête et de la description du bloc.
• Remplaçant les textes par défaut par vos propres textes.

Configurer le bloc Store

Bloc pour la vente d’objets virtuels, de lots et de packages de monnaie virtuelle. Ce bloc contient des sections générées automatiquement que vous pouvez supprimer et remplacer par de nouvelles.

1. Si nécessaire, personnalisez le bloc :
   • Ajoutez un titre ;
   • Activez l’affichage des noms de groupe d’objets ;
   • Activez les onglets pour faciliter la navigation dans le magasin ;
   • Ajoutez un fond personnalisé ;
   • Configurez le bouton call-to-action de connexion.
2. Dans la section Store, sélectionnez le type d’objet que vous souhaitez vendre sur le site ainsi que son groupe dans la liste déroulante.

3. Dans la section Store, choisissez Item card layout :

1. • Featured. Cette disposition de carte vous permet d'attirer l'attention des utilisateurs sur des objets ou des offres spéciales. Nous vous recommandons de l'utiliser pour les promotions par bonus et par réduction, ainsi que pour les promotions, objets et lots à durée ou quantité limitées.

1. 1. Dans les paramètres de disposition de carte, vous pouvez :
      • masquer ou afficher l'image et la description d'un objet ;
      • ajuster ou agrandir l'image d'un objet ;
      • modifier la couleur du texte ;
      • utiliser un arrière-plan personnalisé pour le carrousel.

1. • Horizontal. Cette disposition de carte vous permet de placer le nom, la description et le prix de l'objet à droite de l'image.

1. 1. Dans les paramètres de disposition de carte, vous pouvez :
      • masquer ou afficher la description d'un objet ;
      • ajuster ou agrandir l'image d'un objet ;
      • activer ou désactiver le défilement horizontal sur les appareils mobiles ;
      • utiliser un arrière-plan personnalisé pour la section.

1. • Vertical. Cette disposition de carte vous permet de placer le nom, la description et le prix de l'objet en bas de l'image.

1. 1. Dans les paramètres de disposition de carte, vous pouvez :
      • masquer ou afficher la description d'un objet ;
      • ajuster ou agrandir l'image d'un objet ;
      • activer ou désactiver le défilement horizontal sur les appareils mobiles ;
      • utiliser un arrière-plan personnalisé pour la section.

1. • Large. Nous recommandons d'utiliser cette disposition de carte pour les lots et les bonus. Elle permet de voir la composition de la carte sur la page d'accueil sans avoir à appuyer dessus.

1. 1. Dans les paramètres de disposition de carte, vous pouvez :
      • masquer ou afficher la description d'un objet ;
      • ajuster ou agrandir l'image d'un objet ;
      • activer ou désactiver le défilement horizontal sur les appareils mobiles ;
      • utiliser un arrière-plan personnalisé pour la section.

4. Si nécessaire, personnalisez la disposition en activant les bascules correspondantes dans les paramètres de disposition de la carte.
5. Pour masquer la section lorsqu’elle ne contient aucun contenu, activez la bascule Hide section if empty.

Configurer le bloc de pied de page

1. Sélectionnez le style de disposition.
2. Personnalisez l’arrière-plan.
3. Ajoutez les boutons Share options et configurez les icônes des réseaux sociaux.
4. Ajoutez des liens vers les réseaux sociaux.
5. Ajoutez des restrictions d’âge.

Configuration du panier

Pour utiliser le panier sur le site Web, procédez comme suit :

1. Dans la section principale du constructeur, accédez au bloc Cart settings.
2. Activez la bascule Use shopping cart.
3. Configurez les fonctions supplémentaires du panier (facultatif). Pour ce faire, activez les bascules correspondantes :

1. • Show promo code field : permet aux utilisateurs d'utiliser un code promo ou un coupon dans l'interface du panier ;

1. • Login before shopping cart : ouvre la fenêtre d'authentification lorsque l'utilisateur accède au panier s'il n'était pas connecté auparavant.

Liens utiles