Crear Web Shop para juegos móviles

Una tienda Web Shop es una solución con la cual puede vender productos virtuales, moneda virtual y lotes usando la interfaz de pago de Xsolla y una interfaz de tienda en su sitio web. Los usuarios podrán acceder a más de 1000 métodos de pago.

La página de abajo describe la forma de crear un sitio web usando la plantilla de Web Shop. Para obtener más información sobre la solución y aprovechar todas sus funciones, consulte la documentación.

Para crear una tienda web:

1. Cree un proyecto en Cuenta del editor.
2. Cree un sitio web.
3. Configure los bloques principales.
4. Cree una cesta de la compra.
5. Pruebe el sitio web.
6. Publique el sitio web.

Crear sitio web

1. Abra su proyecto en Cuenta del editor y vaya a Storefronts > Websites.
2. Haga clic en Create site.
3. Seleccione la plantilla Web Shop.
4. Añada una URL a una plataforma externa donde esté disponible su juego. Esto le permite crear rápidamente una página con el estilo de su juego: las imágenes y el título del juego, los datos del desarrollador y una combinación de colores se añaden automáticamente a la página. Si no quiere utilizar esta información, desactive la opción Copy game info via App Store or Google Play URL.

5. Haga clic en Create Web Shop.

• Personalizar el tema del sitio:
  • colores de los elementos principales
  • redondeo de esquinas de los elementos
  • tipografías para encabezados y cuerpo de texto
• Editar el contenido:
  • subir imágenes y vídeos a los bloques
  • cambiar los textos que ven los usuarios

También puede crear y configurar páginas adicionales para el sitio web, por ejemplo, para publicar noticias, crear una tienda con diferentes lotes de artículos o gestionar un blog.

Configurar los bloques clave

Todos los bloques contienen ajustes predeterminados. Puede optar por habilitar o deshabilitar funciones específicas del bloque y personalizarlas como desee.

Establecer bloque de encabezado

El bloque del encabezado del sitio web. El Encabezado muestra información del usuario y contiene elementos de navegación del sitio web. Puede fijar el bloque para que se mantenga visible en la pantalla al desplazarse por el sitio.

1. Active las siguientes opciones:

1. • Login button: muestra el botón de autenticación de usuario en el encabezado del sitio.

1. • Fixed position: mantiene el encabezado visible cuando el usuario se desplaza por la página.

1. • Custom background: reemplaza el fondo predeterminado del encabezado con uno personalizado.

2. Configure los botones del bloque.

Establecer el bloque principal

Bloque que contiene información básica sobre su Web Shop: el juego para el que se creó el sitio web y la identidad del desarrollador. Si no añadió un enlace a Google Play o App Store al crear el sitio, configure los siguientes elementos de Lead block en la parte principal del creador:

1. Añada el icono del juego.
2. Especifique el nombre del juego.
3. Especifique el desarrollador del juego.

1. Añada una imagen de fondo.
2. Para mostrar la información del sitio en Info cards, active las siguientes opciones:
   • Card icons
   • Card headings
   • Card descriptions

Establecer el bloque de Fast Login

El bloque Fast Login le permite resaltar el paso de autorización y agilizar el proceso de compra del usuario.

Para utilizar este bloque Fast Login, primero debe seleccionar un método de autorización en la sección Login Settings. El aspecto y el comportamiento del bloque dependerán del método de autenticación elegido.

Si utiliza la autenticación de usuario mediante ID, recomendamos añadir instrucciones sobre cómo encontrar el ID en el juego. Para ello, haga lo siguiente:

1. En la barra lateral el creador de sitios web, vaya a la sección Login settings.
2. Seleccione la opción User ID.
3. Active la opción Instructions.

Si es necesario, personalice la ventana modal de instrucciones de la siguiente manera:

• Ajustar la visualización del encabezado y la descripción del bloque.
• Sustituir los textos predeterminados por los suyos propios.

Establecer bloque de Store (Tienda)

Bloque para vender artículos virtuales, lotes y paquetes de moneda virtual. Este bloque contiene secciones creadas automáticamente que puede eliminar y sustituir por otras nuevas.

1. Si hace falta, personalice el bloque:
   • Añada un título
   • Active la visualización de los nombres de grupos de artículos
   • Active las pestañas para facilitar la navegación en la tienda
   • Añada un fondo personalizado
   • Configure el botón de llamada a la acción de inicio de sesión.
2. En la sección de la tienda, seleccione el tipo de artículo que quiere vender en el sitio web y su grupo correspondiente en la lista desplegable.

3. En la sección de tienda, elija Item card layout:

1. • Featured. Este diseño de ficha le permite destacar artículos y ofertas especiales. Le recomendamos este diseño para promociones de bonificaciones y descuentos, así como para promociones, artículos y lotes de duración y número limitados.

1. 1. En la configuración del diseño de las fichas, puede:
      • ocultar o mostrar la imagen y la descripción de un artículo
      • ajustar la imagen de un artículo
      • cambiar el color del texto
      • usar un fondo personalizado para el carrusel

1. • Horizontal. Este diseño de ficha le permite colocar el nombre, la descripción y el precio del artículo a la derecha de la imagen.

1. 1. En la configuración del diseño de las fichas, puede:
      • ocultar o mostrar la descripción de un artículo
      • ajustar la imagen de un artículo
      • activar o desactivar la función de desplazamiento horizontal en dispositivos móviles
      • usar un fondo personalizado para la sección

1. • Vertical. Este diseño de ficha le permite colocar el nombre, la descripción y el precio del artículo en la parte inferior de la imagen.

1. 1. En la configuración del diseño de las fichas, puede:
      • ocultar o mostrar la descripción de un artículo
      • ajustar la imagen de un artículo
      • activar o desactivar la función de desplazamiento horizontal en dispositivos móviles
      • usar un fondo personalizado para la sección

1. • Large. Recomendamos utilizar este diseño de ficha para lotes y bonificaciones. Así se muestra la composición de la ficha en la página de destino sin tener que hacer clic en la ficha.

1. 1. En la configuración del diseño de las fichas, puede:
      • ocultar o mostrar la descripción de un artículo
      • ajustar la imagen de un artículo
      • activar o desactivar la función de desplazamiento horizontal en dispositivos móviles
      • usar un fondo personalizado para la sección

4. Puede personalizar el diseño de las fichas activando las opciones correspondientes en la configuración del diseño de las fichas.
5. Si quiere ocultar la sección cuando no tenga contenido, active la opción Hide section if empty.

Establecer bloque de pie de página

1. Seleccione el estilo de diseño.
2. Personalice el fondo.
3. Añada botones Share options y configure los iconos de redes sociales.
4. Añada enlaces a redes sociales.
5. Añada restricciones de edad.

Establecer una cesta de la compra

Puede usar la cesta de la compra del sitio web. Para ello, haga lo siguiente:

1. En la sección principal del constructor, vaya al bloque Cart settings.
2. Active el conmutador Use shopping cart.
3. Configure funciones adicionales de la cesta de la compra (opcional). Para ello, active las opciones correspondientes:

1. • Show promo code field: permite a los usuarios usar un código promocional o cupón en la interfaz de la cesta de la compra.

1. • Login before shopping cart: abre la ventana de autenticación al acceder a la cesta de la compra si el usuario no ha iniciado sesión.

Enlaces útiles