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 700 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 un sitio de Web Shop:
- Cree un proyecto en Cuenta del editor.
- Cree un sitio web.
- Configure los bloques clave.
- Establezca una cesta de la compra.
Crear sitio web
- Abra su proyecto en Cuenta del editor.
- Haga clic en Site Builder en el menú lateral.
- Haga clic en Create site.
- Seleccione la plantilla de Web Shop.
- Agregue un enlace a su juego en Google Play o App Store para reconfigurar la interfaz de tienda (logotipo, imagen de fondo, colores, texto de pie de página, enlaces a botones de compra). Si no desea utilizar los datos del juego, establezca la opción Use game info from Google Play or App Store en la posición On.
- Haga clic en Create.
- Elija:
- tema global del sitio web
- colores de los elementos principales
- redondez del botón
- fuentes del encabezado y textos del cuerpo
- En la parte principal del creador de sitios web (Site Builder):
- Suba imágenes y vídeos a los bloques
- Edite los textos que serán visibles para los usuarios
![](https://cdn.xsolla.net/developers/v-20240906-v01/images//solutions/web-shop/create-site/builder.png)
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.- Estableciendo los conmutadores correspondientes a la posición On:
- Botón de inicio de sesión. El botón de autenticación de usuario se mostrará en el encabezado del sitio web.
- Posición fija. Esta característica permite que el encabezado permanezca visible al desplazarse por la página.
- Fondo personalizado. El fondo del encabezado cambiará a un fondo personalizado.
- Configure los botones del bloque
![](https://cdn.xsolla.net/developers/v-20240906-v01/images//solutions/web-shop/web-shop-create-site-2.png)
Bloque principal
Bloque que contiene información básica sobre su tienda 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 a App Store al crear el sitio web, configure los siguientes elementos del Bloque principal en la parte principal del constructor:- Agregue el icono del juego.
- Especifique el nombre del juego.
- Especifique el desarrollador del juego.
- Agregando una imagen de fondo.
- Configure las fichas con información del sitio web cambiando los conmutadores a la posición On:
- Fichas de descripción
- Iconos de ficha
- Títulos de ficha
- Descripciones de ficha
![](https://cdn.xsolla.net/developers/v-20240906-v01/images//solutions/web-shop/lead_block.png)
Fast Login
El bloque de Fast Login ofrece a los usuarios la capacidad de autenticarse en el sitio web. Puede usar el bloque además del botón de inicio de sesión del encabezado o en lugar de este. La apariencia y las capacidades del bloque varían en función del método de autenticación seleccionado.- Cambie el conmutador Instructions a la posición On.
- Pulse en la línea que aparece en la parte inferior del bloque.
- Sustituya el texto de las instrucciones para los usuarios.
Si es necesario, personalice el bloque:
- Ajustando la visualización del encabezado y la descripción del bloque.
- Sustituyendo los textos predeterminados por sus propios textos.
Para configurar el bloque cuando se utiliza la autenticación por ID de usuario:
- Ajuste la visualización del encabezado y la descripción del bloque. También puede sustituir el texto predeterminado por el suyo propio.
- Para mostrar instrucciones sobre cómo encontrar el ID de usuario en el juego, cambie el conmutador Instruction a la posición On. Pulse en la línea que aparece en la parte inferior del bloque y sustituya el texto que verán los usuarios.
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.
- Si hace falta, personalice el bloque:
- Agregando un título
- Habilitando la visualización de los nombres de grupos de productos
- Habilitando pestañas para facilitar la navegación en la tienda
- Agregando un fondo personalizado
- Configurando el botón de llamada a la acción de inicio de sesión.
- En la sección de tienda, seleccione el tipo de artículo que quiere vender en el sitio web y su grupo correspondiente en la lista desplegable.
- En la sección de tienda, escoja Item card layout(Diseño de ficha del artículo):
- Featured (Destacado). Este diseño de ficha le permite captar la atención de los usuarios sobre productos u ofertas especiales. Le recomendamos que utilice este diseño para las promociones de bonificación y de descuentos, y promociones, artículos y lotes de duración y número limitados.
En la configuración del diseño de la ficha puede:- ocultar o mostrar la imagen y la descripción de un artículo,
- asegurar el ajuste o aumentar al máximo la imagen de un artículo
- cambiar el color del texto,
- utilizar un fondo personalizado para el carrusel.
- Featured (Destacado). Este diseño de ficha le permite captar la atención de los usuarios sobre productos u ofertas especiales. Le recomendamos que utilice este diseño para las promociones de bonificación y de descuentos, y promociones, artículos y lotes de duración y número limitados.
- Horizontal Esta disposición de ficha le permite colocar el nombre, la descripción y el precio del producto a la derecha de la imagen.
En la configuración del diseño de la ficha puede:- ocultar o mostrar la imagen y la descripción de un artículo
- asegurar el ajuste o aumentar al máximo la imagen de un artículo
- habilitar o deshabilitar el desplazamiento horizontal en dispositivos móviles
- utilizar un fondo personalizado para la sección
- Vertical Esta disposición de ficha le permite colocar el nombre, la descripción y el precio del producto en la parte inferior de la imagen.
En la configuración del diseño de la ficha puede:- ocultar o mostrar la imagen y la descripción de un artículo
- asegurar el ajuste o aumentar al máximo la imagen de un artículo
- habilitar o deshabilitar el desplazamiento horizontal en dispositivos móviles
- utilizar un fondo personalizado para la sección
![](https://cdn.xsolla.net/developers/v-20240906-v01/images//solutions/web-shop/create-site/vertical.png)
- Large (Grande). Recomendamos utilizar este diseño de ficha para lotes y bonificaciones. Este muestra la composición de la ficha en la página de destino sin tener que pulsar en la ficha.
En la configuración del diseño de la ficha puede:- ocultar o mostrar la imagen y la descripción de un artículo
- asegurar el ajuste o aumentar al máximo la imagen de un artículo
- habilitar o deshabilitar el desplazamiento horizontal en dispositivos móviles
- utilizar un fondo personalizado para la sección.
![](https://cdn.xsolla.net/developers/v-20240906-v01/images//solutions/web-shop/create-site/large.png)
- Si es necesario, personalice el diseño de la ficha estableciendo los conmutadores correspondientes en la posición On en la configuración del diseño de la ficha.
- Puede Ocultar sección si está vacía poniendo el conmutador pertinente en la posición On.
Establecer bloque de pie de página
- Select layout style (Seleccione el estilo de diseño).
- Personalice el fondo.
- Añada botones de Share options (Opciones para compartir), configure los iconos de redes sociales.
- Añada enlaces a las redes sociales.
- 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:- En la sección principal del constructor, vaya al bloque Cart Settings.
- Ponga el conmutador Use shopping cart en la posición On.
- Сonfigure funciones adicionales de la cesta de la compra (opcional). Para ello, coloque los conmutadores correspondientes en la posición On:
- Show promo code field: permite a los usuarios utilizar un código promocional o cupón en la interfaz de la cesta de la compra;
- Login before shopping cart: abre la ventana de autenticación cuando se navega a la cesta de la compra si el usuario no ha iniciado sesión previamente.
![](https://cdn.xsolla.net/developers/v-20240906-v01/images//solutions/web-shop/create-site/cart.png)
Enlaces útiles
- Guía de integración de Web Shop
- Todos los bloques de Site Builder (Creador de sitios web)
¿Te ha resultado útil este artículo?
Valore esta página
Prefiero no responder
¡Gracias por tu mensaje!
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.