Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual.
Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de Ecommerce o Retail:
- El 35% de los usuarios realizan las compras desde sus teléfonos móviles.
- En 2021 el 72,9% del total de las ventas de comercio electrónico a nivel global se realizaron desde dispositivos móviles.
- Y lo que es más importante, las Aplicaciones Móviles tienen una tasa de conversión 157% mayor que las Páginas Web móviles o responsivas.
En esta guía paso a paso vamos a crear de forma muy sencilla una App con funciones tan avanzadas como las de las grandes empresas de Retail:
- Tienda con carrito e historial de pedidos
- Registro de usuarios
- Sección de novedades
- Mensajes Push para ofertas y promociones
- Sistema de fidelización con códigos de descuento
- Y una función para compartir la App y fomentar la viralización del negocio
Si sigues este artículo paso a paso, aunque la tienda que quieras crear sea muy distinta a la de nuestro ejemplo, dominarás el constructor de Scoreapps y sabrás como personalizar tu App e incluir otras muchas funciones para disparar la rentabilidad de tu negocio. Comencemos.
Si lo deseas, puedes previsualizar la App en la que nos hemos basado para esta guía escaneando el código QR con tu teléfono.
Primeros Pasos
Una vez en la pantalla de inicio de Scoreapps, en el menú lateral izquierdo encontrarás el icono con forma de 'a' del constructor de apps. Ahí podrás crear una nueva aplicación y darle nombre.
Una vez estés en la pantalla de administración de Apps, haz clic en 'Nueva App':
Una vez hayas creado y puesto nombre a tu app, te aparecerá una pantalla en la que podrás elegir entre varias plantillas.
Son diseños predefinidos para que no partas de cero pero en realidad, después podrás modificar absolutamente todo. De hecho, podrás cambiar la plantilla que escojas ahora. Y si no te encaja ninguna, haz clic en 'Blank Template' para empezar de cero a diseñar tu App.
Para este ejemplo escogeremos la plantilla Awory
El proceso de creación de Aplicaciones con Scoreapps es muy sencillo. Sólo tienes que ir siguiendo los pasos del constructor.
Estos pasos están representados en la barra de progreso que tendrás siempre a tu disposición en la parte superior del constructor y que te permitirá fácilmente navegar entre las distintas páginas, con sólo clicar encima del icono.
Primer paso. Diseño de la App
En la pestaña de diseño, encontrarás todas las opciones relacionadas con la información del menú y de la pantalla inicial de tu App.
Menú de elección del Layout
La sección Opciones de Pantalla de Inicio muestra las opciones disponibles según el estilo de navegación (Layout) escogido.
Añadir un slider o carrusel animado de imágenes en tu App es muy sencillo y puede configurarse en menos de 10 segundos.
Ten en cuenta que no todos los estilos de navegación (Layouts) admiten el uso de Sliders.
Si haces un poco de scroll encontrarás una nueva sección llamada 'Opciones del Slider de Inicio':
- Indica si deseas que las imágenes se muevan en bucle.
- Especifica la duración de tu Slider.
- Ajusta la opacidad de las imágenes.
- Escoge la altura de las imágenes.
- Indica si deseas que las imágenes se muevan en bucle.
- Especifica la duración de tu Slider.
- Ajusta la opacidad de las imágenes.
- Escoge la altura de las imágenes.
Si deseas que las imágenes del Slider ocupen toda la pantalla, asegúrate de marcar el 100% en el selector de Altura de las Imágenes. Te recomendamos que éstas tengan un tamaño de 1432X2732 píxeles.
Por último haz clic en 'AÑADIR IMÁGENES'
Las imágenes no deben superar los 3000 píxeles y se recomienda que no pesen más de 500kb (cuanto más optimizadas estén más rápida será tu app).
Esta sección, que vas a ver a continuación, te ayuda a elegir una imagen que se vea bien en todos los dispositivos y ratios de pantalla. Usa la herramienta overlay (sombreado) para comprobar si la información importante de tu diseño queda dentro de las zonas seguras recomendadas en función de la orientación de pantalla para la que está diseñada tu App.
Para saber cómo diseñar bien las imágenes puedes descargar la plantilla con las medidas, disponible tanto en formato .png como en .psd.
Ahora veamos un vídeo de 5 minutos para aprender a diseñar la Pantalla de Inicio de la Aplicación:
Escoge el idioma en función de tu país y la moneda de tu aplicación. Se utilizará para diferentes aspectos, como la zona horaria y el símbolo de la moneda.
Para cambiar la fuente de tu app puedes seleccionar una de las que aparecen en el menú del constructor, o importar una desde Google Fonts. Para hacerlo es tan sencillo como escribir el nombre de la fuente.
Segundo paso. Colores
Elige los colores principales de la aplicación.
- General: aplica al fondo (si no hay una imagen específica) y al texto general.
- Inicio: aplica al menú de navegación y a sus elementos.
- Cabecera: aplica a la cabecera de navegación de la app.
- Tarjeta: aplica a los elementos mostrados en formato tarjeta.
- Lista: aplica a los elementos mostrados en formato lista.
- Inicio: aplica al menú de navegación y a sus elementos.
- Cabecera: aplica a la cabecera de navegación de la app.
- Tarjeta: aplica a los elementos mostrados en formato tarjeta.
- Lista: aplica a los elementos mostrados en formato lista.
Además, si tuvieses conocimientos de programación Web, en la parte inferior del panel encontrarás un espacio para poder introducir código CSS y así, personalizar al 100% los elementos de tu App.
Tercer paso. Funciones
Una vez diseñada la pantalla inicial y escogidos los colores principales de la Aplicación, vamos con la parte funcional.
Las plantillas incorporan de forma predeterminada algunas funciones que consideramos interesantes para cada sector. Puedes verlas en el carrusel de funciones. Pero si quieres eliminar alguna, sólo tendrás que darle a la “X”.
Para que veas lo sencillo que es incorporar nuevas funciones a tu App, vamos a eliminar y a volver a añadir la función de Página Personalizada a la que hemos llamado NEW IN (para mostrar novedades de la tienda).
Página Personalizada
Para esta App, queríamos crear una sección que nos permita presentar a los clientes las novedades de la tienda, hablar de nuevas tendenciás, etc. a través de imágenes, texto, video etc. Para esto, hemos incluído la función de Página Personalizada y la hemos llamado New in.
Esta funcionalidad te ofrece múltiples opciones para crear una pagina informativa.
Puedes escribir un artículo con una imagen, puedes publicar una galería de fotos, puedes publicar un video directamente en esta página y puedes agregar botones de llamada o un enlace a cualquier sitio web externo.
Descuento (Promos)
Esta función permitirá a tus clientes estar al día de las promociones de tu tienda. Podrás mostrar todas tu ofertas en una única sección y mantenerlas actualizadas para conseguir una mayor fidelización. Pero debes saber que esta función no está conectada con la función de Tienda que configuraremos a continuación. Se trata de una sección informativa o pensada para ofrecer Descuentos que se canjean posteriormente en una tienda física.
Si quieres generar descuentos para tu tienda online, deberás hacerlo en la función de Tienda/Delivery que te mostraremos a continuación.
Si configuras la oferta como "usar sólo una vez", aparecerá un botón como el de la imagen con el texto "Use this coupon". Una vez se clique en él, la oferta dejará de aparecer en la pantalla. Para que la oferta se haga efectiva, se deberá introducir el código descuento, que se habrá configurado en la función "tienda".
Tienda/Delivery (Shop)
Esta función te permite crear una o varias tiendas, poner a la venta todos tus productos por categorías, mostrando los precios, las tallas, etc. y personalizar las opciones de venta, entrega o envío. Asimismo, podrás configurar varias opciones de pago y descuentos.
En este vídeo te mostramos cómo configurar en la tienda el descuento que te hemos mostrado en la función anterior.
Compartir (share app)
Esta función permitirá a tus clientes compartir la aplicación con sólo pulsar un botón. Se trata de una función clave a la hora de generar viralidad para el negocio.
Jobs (ofertas de trabajo)
Esta función te permitirá publicar ofertas de trabajo y recibir las candidaturas a éstas.
Clica en este enlace y podrás ver un artículo paso a paso sobre la función “Ofertas de Trabajo”.
Enlaces (RRSS)
Esta función te permitirá crear un acceso directo a todas tus redes sociales a través de la aplicación. Esto te permite realizar estrategias cross-channel, es decir... llevar seguidores de unas redes a otras.
Tus clientes, sólo tendrán que clicar un botón.
En nuestro ejemplo hemos configurado Instagram y Facebook.
Clica en este enlace y podrás ver un artículo explicando paso a paso la función “Enlaces”.
Mensajes Push
Los mensajes o notificaciones Push son el sistema de marketing más eficiente que existe en la actualidad. Mientras que de cada 10 emails enviados 8 caen en las bandejas de SPAM, con los Mensajes Push ocurre lo contrario... el 99% son leídos.
Añadir esta potente herramienta a tu App es muy sencillo:
1- Debes incluir en la Aplicación la función "Push V2"
2- Para poder hacer uso de las Notificaciones Push, es necesario que la Aplicación en cuestión se encuentre publicada para las versiones nativas Android y/o iOS.
Una vez que la aplicación haya sido publicada en App Store y/o Google Play, podrás enviar notificaciones directamente desde la propia función "Push V2".
Otras funciones sugeridas
En esta guía hemos incluído algunas funciones que consideramos útiles para una Tienda, pero hay muchas más que también podrían aportar valor a tus usuarios:
Paso 4. Icono y ajustes de la Aplicación
Desde aquí puedes elegir el icono que se mostrará en la pantalla del dispositivo del usuario, así como el diseño del botón “volver”.
Si quieres enviar notificaciones push, aquí es donde puedes personalizar algunos aspectos, como el icono o el color de fondo.
Esta herramienta te ayudará a elegir una imagen de inicio que será compatible con todos los tamaños de pantalla de los diferentes dispositivos. Ésta se verá cuando se inicie la aplicación mientras se está cargando.
Paso 5. Avanzado
Si lo deseas, puedes monetizar tu aplicación agregando anuncios publicitarios o anuncios intersticiales que se mostrarán a los usuarios de tu aplicación. Para ello deberás configurar el sistema de publicidad Admob.
Publicación de tu App
En función de Plan (Starter, Business, Growth o Reseller) dispondrás de distintos tipos de Publicación:
- Versión Nativa Android.
- Versión Nativa iOS.
- Web app HTML5.
- Modo PWA (Progressive Web App).
Para publicar la versión nativa de tu App en Appstore o en Google Play, necesitas una suscripción con Scoreapps, no obstante, durante el Trial gratuito de 14 días podrás ver el resultado final de la App que construyas en las versiones Web App y PWA.
Promoción y lanzamiento de tu App
Si has seguido la guía hasta aquí ya deberías tener lista una primera versión de tu Aplicación. Recuerda que si tienes cualquier duda puedes consultar nuestro Centro de Ayuda o escribir al equipo de Soporte (soporte@scoreapps.com)
Popular Articles
Guía de Negocio para Resellers y Partners
En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...Ver una Demo de Scoreapps para Resellers
En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:Proporciona acceso a tus Aplicaciones
Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
Related Articles
APPS: Tienda / Delivery
Esta función te permite crear una Tienda online completa para tu Shopping App o un Sistema de Pedidos de comida para restaurantes. Cómo añadir esta función Para añadir esta función a tu aplicación ve al paso "FUNCIONES" y haz clic en el icono "Tienda ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:Cómo Crear una App de Eventos
La adopción de las Aplicaciones Móviles se ha disparado durante la última década en todo el mundo. Habrá alrededor de 4.000 millones de usuarios de teléfonos móviles en todo el mundo para 2023, y se espera que se vendan 1.800 millones de teléfonos ...Cómo crear una App de Cursos
A la hora de construir una App para Infoproductos, en la que se establece una membresía, es muy importante incluir una sección de la App con una "función código" para poder embeber el inicio de sesión a estos cursos. Si ya se dispone de este ...Cómo crear una Aplicación para Fichar
¡Hacer una aplicación así es perfectamente posible! ¿Qué funciones hay que añadir en la App? - Registro - Formulario Será necesario añadir la API de Google Maps para que la App pueda geolocalizar al Usuario / Trabajador en el momento de fichar. - ...