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 700 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 clés.
4. Configurez le panier.

Créer un site

1. Ouvrez votre projet dans le Compte éditeur.
2. Dans le menu latéral, cliquez sur Site Builder.
3. Cliquez sur Create site.
4. Sélectionnez le modèle Web Shop.
5. Ajoutez un lien vers le jeu sur Google Play ou App Store pour préconfigurer l'interface du magasin (logo, image d'arrière-plan, couleurs, texte dans le pied de page). Si vous ne souhaitez pas utiliser les données du jeu, réglez la bascule Use game info from Google Play or App Store sur Off.

6. Cliquez sur Create.
7. Choisissez :
   • le thème global du site ;
   • les couleurs des éléments d'e-mail ;
   • la rondeur des boutons ;
   • les polices d'en-têtes et du corps du texte.
8. Dans la partie principale du constructeur :
   • Téléchargez des images et des vidéos vers les blocs ;
   • Modifiez les textes qui seront visibles aux utilisateurs.

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.Pour personnaliser le bloc :

1. Réglez les bascules correspondantes sur On :
   • Login Button. Le bouton d’authentification utilisateur sera affiché dans l’en-tête du site ;
   • Fixed position. Cette fonctionnalité permet à l’en-tête de rester visible lors du défilement de la page ;
   • Custom Background. Le fond de l’en-tête changera pour un fond personnalisé.
2. Configurez les boutons dans le bloc.

Bloc principal

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

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

Si nécessaire, personnalisez le bloc :

1. Ajoutez une image de fond.
2. Configurez les cartes avec les informations du site en réglant les bascules suivantes sur On :
   • Description cards ;
   • Card icons ;
   • Card titles ;
   • Card descriptions.

Connexion rapide

Le bloc Fast Login permet aux utilisateurs de s’authentifier sur le site. Vous pouvez utiliser ce bloc en plus ou à la place du bouton de connexion dans l’en-tête. L’apparence et les fonctionnalités du bloc dépendent de la méthode d’authentification sélectionnée.Si vous utilisez l’authentification par ID utilisateur, nous recommandons d’ajouter des instructions pour trouver l’ID dans le jeu. Pour ce faire :

1. Réglez la bascule Instructions sur On.
2. Cliquez sur la ligne qui apparaît en bas du bloc.
3. Remplacez le texte des instructions à afficher aux utilisateurs.

Si nécessaire, personnalisez le bloc :

1. Ajustez l’affichage de l’en-tête et la description du bloc.
2. Remplacez les textes par défaut par les vôtres.

Pour configurer le bloc lors de l’utilisation de l’authentification par ID utilisateur :

1. Ajustez l’affichage de l’en-tête et de la description du bloc. Vous pouvez également remplacer le texte par défaut par le vôtre.
2. Pour afficher des instructions sur la façon de trouver l’ID utilisateur dans le jeu, réglez la bascule Instructions sur On. Cliquez sur la ligne qui apparaît en bas du bloc et remplacez le texte à afficher aux utilisateurs.

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 de produits ;
   • 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 de bien que vous souhaitez vendre sur le site et son groupe dans la liste déroulante.

3. Dans la section Store, choisissez Item card layout :
   • Featured. Cette disposition de carte vous permet d'attirer l'attention de l'utilisateur sur des biens ou des offres spéciales. Nous vous recommandons d'utiliser cette disposition pour les promotions par bonus et par réduction, ainsi que pour les promotions, les biens et les lots avec des limites de durée ou de quantité.
     Dans les paramètres de disposition de la carte, vous pouvez :
     • masquer ou afficher l'image et la description d'un bien ;
     • ajuster ou maximiser l'image d'un bien ;
     • changer la couleur du texte ;
     • utiliser un arrière-plan personnalisé pour le carrousel.

• Horizontal. Cette disposition de carte vous permet de placer le nom, la description et le prix du bien à droite de l'image.
  Dans les paramètres de disposition de la carte, vous pouvez :
  • masquer ou afficher la description d'un bien ;
  • ajuster ou maximiser l'image d'un bien ;
  • activer ou désactiver le défilement horizontal sur les appareils mobiles ;
  • utiliser un arrière-plan personnalisé pour la section.

• Vertical. Cette disposition de carte vous permet de placer le nom, la description et le prix du bien au bas de l'image.
  Dans les paramètres de disposition de la carte, vous pouvez :
  • masquer ou afficher la description d'un bien ;
  • ajuster ou maximiser l'image d'un bien ;
  • activer ou désactiver le défilement horizontal sur les appareils mobiles ;
  • utiliser un arrière-plan personnalisé pour la section.

• Large. Nous vous recommandons d'utiliser cette disposition de carte pour les lots et les bonus. Cette disposition affiche la composition de la carte sur la page de destination sans cliquer sur la carte.
  Dans les paramètres de disposition de la carte, vous pouvez :
  • masquer ou afficher la description d'un bien ;
  • ajuster ou maximiser l'image d'un bien ;
  • 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 réglant les bascules correspondantes sur On dans les paramètres de disposition de la carte.

5. Vous pouvez masquer la section si elle est vide en réglant la bascule correspondante sur On.

Configurer le bloc de pied de page

Pour personnaliser ce bloc :

1. Sélectionnez le style de disposition.
2. Personnalisez l’arrière-plan.
3. Ajoutez des boutons Share options, configurez les icônes de 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. Réglez la bascule Use shopping cart sur On.
3. Configurez les fonctions supplémentaires du panier (facultatif). Pour ce faire, réglez les bascules correspondantes sur On :
   • Show promo code field — permet à l'utilisateur d'utiliser un code promo ou un coupon dans l'interface du panier ;
   • Login before shopping cart — affiche la fenêtre d'authentification lors de la navigation vers le panier si l'utilisateur n'est pas connecté.

Liens utiles

• Guide d'intégration de Web Shop
• Tous les blocs de Site Builder
Cet article vous a été utile ?
Oui
Non
Merci !
Que pouvons-nous améliorer ? Message Envoyer
Nous sommes désolés de l'apprendre
Dites-nous pourquoi vous n'avez pas trouvé cet article utile. Message Envoyer
Merci pour votre commentaire !
Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.
Dernière mise à jour: 14 Août 2024

Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.