Diseña y publica tus sitios rápidamente

Crea tu propia tienda en línea con la app de Mini Shop

La app de Mini Shop es una de las apps más asombrosas e interesantes que hemos lanzado útlimamente.

Es muy similar a la app de Projects, con la diferencia de que con la de Shop puedes hacer compras.

Toma en cuenta que este sistema de compras es muy ligero (mini tienda). Si tienes un gran volumen de productos para vender, te recomendamos usar un sistema más avanzado. Hecha un vistazo a nuestro tutorial sobre Shopify, por ejemplo.

Instalación

Abre la App Store y busca la opción de Mini Shop.

Mini Shop en la App Store

Desplázate hasta donde veas la app de Mini Shop en la App Store

Arrastra el botón de “Install New” a tu layout para instalarla.

La app de Mini Shop en su forma predeterminada

La app de Mini Shop en su forma predeterminada

Edita tu producto

Para empezar, puedes editar los elementos predeterminados que aparecen en la app de Mini Shop. Para editar uno, haz doble clic en la imagen o nombre del producto.

Panel CMS para la app de Mini Shop

En el panel CMS puedes editar los detalles del producto

El panel CMS se abrirá en “Edit Product”. Ahí podrás editar:

  • Product name (nombre del producto)
  • Price (precio)
  • Subtitle (subtítulo)
  • Product picture (imagen del producto)
  • Product details (detalles del producto)
  • Category (categoría)
  • Out of stock – Availability (disponibilidad)

Una vez que termines, haz clic en “Save” para guardar los cambios.

Agrega productos

En caso de que quieras agregar más elementos (productos), necesitarás abrir el panel CMS. Puedes entrar al hacer clic en “Edit Content” de la barra de herramientas de la app.

"Edit Content" en la barra de herramientas de la app

Para abrir el panel CMS, haz clic en el botón con el ícono del lápiz en la barra de herramientas de la app

Cuando se abra el panel, haz clic en la pestaña de “New Product” que está a la izquierda.

Botón de "New Product" en el panel CMS de la app de Mini Shop

El panel de CMS tiene un botón para insertar elementos o productos a la app de Mini Shop

Ahí puedes introducir todos los detales y la imagen del producto. Cuando termines, haz clic en “Save”.

Administra las categorías

Puedes organizar tus productos en categorías. Encontrarás esta opción cuando estés editando o creando un producto en el panel CMS.

Categorías en el panel CMS

Agrupa tus productos en categorías

Para editar una categoría, haz clic en “Manage Categories” en el lado izquierdo del panel CMS.

Manage the Mini Shop app categories

Click on the “Manage Categories” tab to edit them

Ahí puedes seleccionar una de tus categorías con el botón de “Edit”. Podrás editar el título de cada una.

Si quieres crear una categoría nueva, hazlo con la pestaña de “New Category”.

"New Category" en el panel CMS

Agrega categorías para tus productos al hacer clic en esta pestaña

Configuración

La app de Mini Shop tiene una larga lista de opciones para configurarla. Para verla, haz clic en el ícono de la herramienta llamado “Edit Settings”.

Botón "Edit Settings" en la barra de herramientas de la app

Para acceder las opciones de la app de Mini Shop, haz clic en el ícono de la herramienta

Aquí hay una lista de las opciones (o grupos de opciones) disponibles para esta app:

  • URL Name (nombre del URL)
  • General
  • List View Settings (configuración de la lista)
  • Display Details on List View (detalles de la vista)
  • Image Rollover Effects (efectos de la imagen)
  • Display Details on Entry View (detalles del visor de artículos)
  • Product Page (página del producto)
  • Checkout Panel (módulo de pago)
  • Payment Options (opciones de pago)
  • Paypal Information (información de Paypal)
  • Amazon Information (información de Amazon)
  • Google Information (información de Google)
  • Currency (moneda)
  • Shipping Configuration (configuración de envío)
  • Tax (impuesto)
  • Propagate Style  to All Pages (propagación de estilo)
  • Propagate Geometry to All Pages (propagación geométrica)

Nombre del URL

Este será el URL de un solo producto

Este será el URL de un solo producto

El nombre que uses en este espacio se verá en la barra de direcciones del navegador cuando un visitante haga click en un solo producto. Este es un ejemplo de cómo se puede ver:

tusitio.breezi.com/página/tienda/categoría-1/nombre-del-producto-1

General

Actualmente, la única opción en la sección General de la app de Mini Shop es una casilla para mostrar o esconder las categorías. Dice:

Show Categories Above List View (mostrar categorías sobre la lista)

Si la habilitas, todas tus categorías se mostrarán en la parte superior de la app de Mini Shop.

La sección general en la configuración de la app de Mini Shop

Muestra o esconde las categorías sobre tu lista de productos

List View Settings (configuración de la lista)

Esta sección del panel te permitirá personalizar cómo se verá tu lista de productos. Esta vista estará en la página donde hayas instalado la app de Mini Shop.

  • Number of Entries to Show per Page: Si tienes muchos productos, se crearán varias páginas para la lista de tus elementos. Esta opción te permitirá establecer cuántos productos se deben mostrar en cada página.
  • Columns: Puedes seleccionar que tu lista se muestre en 1 a 4 columnas.
  • Show Product Info: Con esta opción puedes elegir una posición para que aparezca la información de cada producto. Puede ser arriba, abajo, a la izquierda, derecha o sobre la imagen.
  • Show Product Info on: Puedes mostrar la información del producto en su estado inicial (“Initial state”) o cuando pasas el cursor sobre él (“Rollover state”). Si seleccionas la segunda opción, la imagen del producto solamente se verá cuando el visitante pase su cursor sobre él. De la otra manera, siempre estará visible.
La opción de "List View Settings"

Configura la apariencia de tu producto en la lista

Display Details on List View (detalles de la lista)

Aquí puedes seleccionar qué opciones quieres mostrar o esconder en la lista para cada producto.

  • Show Thumbnail (mostrar imagen en miniatura)
  • Show Name (mostrar nombre)
  • Show Subtitle (mostrar subtítulo)
  • Show Price (mostrar precio)
  • Show Category (mostrar categoría)
"Display details on list view"

En este panel puedes seleccionar qué información (detalles) mostrar en la lista general de tus productos

Image Rollover Effects (efectos de la imagen) 

Puedes seleccionar un efecto de color para cuando un visitante pase su cursor sobre las imágenes de tus productos.

"Image rollover effects"

You can set a color effect to be applied when someone hovers over a product image

Hay dos tipos de efectos: colorear (“Colorize”) y combinar (“Blend”). También puedes establecer que no quieres ningún efecto (none). Hay 4 niveles de intensidad (“Intensity”) que van de lo más sutil a lo más obvio. Después hay una herramienta con la que puedes elegir el color para el efecto.

Efecto de "Blend"

Esta imagen muestra cómo funciona el efecto de “Blend”

Display Details on Entry View (detalles para el visor de artículos)

El visor de artículos se abre cuando un visitante hace clic en un solo producto. Esta sección del panel solamente muestra una opción, por lo pronto: “Show Category on Single Entry View” (mostrar categoría en el visor de artículos). Si la habilitas, la categoría de ese producto aparecerá cuando un cliente haga clic en el producto para ver sus detalles.

Casilla para mostrar la categoría en el visor de artículos

Casilla para mostrar la categoría en el visor de artículos

Product Page (página del producto)

En esta sección es donde puedes posicionar el botón de “Add to Cart” (agregar al carrito). Puede estar sobre la descripción (above description), debajo de la descripción (below description) o en ambos lugares (both).

Posicionamiento de "Add to Cart"

Selecciona la posición del botón de “Add to Cart”

Checkout panel (módulo para pagar)

Un botón de “Checkout” aparece en la parte superior de la página de la “tienda” (donde hayas instalado la app de Mini Shop). Con estas opciones puedes personalizarlo.

  • Checkout Style:  Esto afecta el formato del botón. Las opciones son: “Button with number of items” (el botón con el número de elementos), “Items + Button” (elementos + botón), “Text with number of items” (texto con el número de elementos) and “Items + Text” (elementos + botón).
  • Font Color: Selecciona un color para el texto del botón
  • Font Size: El tamaño del texto que aparece en el botón: small (chico), medium (mediano) o large (grande).
  • Checkout Button Color: Aquí puedes seleccionar el color de fondo para el botón.
  • Checkout Panel Background Color: Cambia el fondo del área donde aparece el botón.
  • Checkout Panel Alignment: La posición del botón. Siempre está en la parte superior, pero puedes alinearlo a la izquierda, centro o derecha.

Payment Options (opciones de pago)

Aquí puedes seleccionar cómo quieres que tus clientes paguen por los productos de tu tienda.

Puedes usar PayPal, Amazon Payments y Google Checkout como la forma de pagar o “Checkout Method”.

"Checkout Method"

Aquí debes seleccionar la forma de pago para que tus clientes puedan comprar tus productos

Las opciones a continuación te permiten configurar la información para cualquiera de estas cuentas.

PayPal Information (información de PayPal)

Si seleccionaste PayPaly en la opción anterior (Checkout Method), aquí es donde deberás introducir la información de cuenta:

  • Si es una cuenta de Paypal Sandbox (para pruebas)
  • Email de Paypall (el que está asociado con tu cuenta de PayPal)
  • URL de éxito de PayPal (la página a donde se redirige al usuario si su compra fue exitosa)
  • URL de cancelación de PayPal (la página a donde se redirige al usuario si su compra fue cancelada)

Amazon Payments Information (información de Amazon Payments)

Información sobre tu cuenta de Amazon Payments (si lo seleccionaste como tu “checkout method”).

  • Si es una cuenta de Amazon Payments Sandbox (para pruebas)
  • Amazon Merchant Signature (firma de comerciante)
  • Amazon Merchant ID (identificación de comerciante)
  • Amazon AWS Key (Clave AWS)

Google Checkout Information (información de Google Checkout)

Aquí deberás introducir tu identificación de comerciante de Google si decidiste usar este método para pagar.

Currency (moneda)

Selecciona un tipo de moneda para los precios de tus productos.

"Currency"

En esta sección puedes seleccionar el tipo de monde para los precios de tus productos

Shipping Configuration (configuración de envío)

Estas son las opciones disponibles para esta sección:

  • Shipping Rates: tipo de tarifa de envío de los productos que se compraron. Puede ser flat, quantiy o percentage.
  • Flat Shipping Rate: introduce un valor aquí si tu tarifa es plana (la misma tarifa para cada orden, sin importar el número de productos o el costo total).
  • Quantity Shipping Rate: si cobrarás una tarifa por producto. La tarifa dependerá del número total de productos en la orden.
  • Percentage Shipping Rate: este porcentaje está basado ene el costo total de los productos.
"Shopping configuration"

Puedes seleccionar una tarifa plana, por cantidad o por porcentaje

Tax (impuesto)

El impuesto que establezcas aquí será aplicado al subtotal de la orden.

Propagation (propagación)

Aquí tienes dos opciones: “Propagate Style to All Pages” y “Propagate Geometry to All Pages” para propagar el estilo y la geometría respectivamente. La primera compartirá el estilo con otras versiones de esta app instaladas en otras páginas. La segunda compartirá el tamaño de las imágenes.

Proceso de compra

Te enseñaremos el proceso por el que pasaría un cliente que está comprando algo en tu tienda.

Viendo productos

Cuando un visitante entre a tu tienda, lo primero que verá será la lista de productos. Ahí podrá ver los productos que vendes.

Visor de la lista de productos en la app de Mini Shop

Esta lista muestra los productos a la venta. Para más información, tu cliente tendrá que hacer clic en uno de ellos

Visor de un solo artículo

Cuando un cliente haga clic en un producto, se abrirá el visor de un solo producto. Ahí podrá agregar los productos al “carrito de compras”. Cada vez que haga clic en el botón de “Add to cart”, el número total de artículos en el carrito se actualizará.

Visor de un artículo

En la página del producto solo, un cliente podrá leer la descripción del producto y agregarlo al carrito de compras

Agregar al carrito

Cuando un visitante hace clic en “Add to cart”, el botón de “Checkout” se actualiza. Este botón siempre está en la parte superior de las páginas de la tienda (visor de lista, de artículo y categorías).

Botones de "Checkout" y de "Add to cart"

El botón de “Checkout” se actualiza cada vez que el cliente da clic al de “Add to cart”

Para pagar

Cuando tu cliente haga clic en el botón de checkout, se abrirá una ventana donde tendrá que confirmar su orden. Ahí podrás revisar que los productos y las cantidades sean correctas.

El carrito de compras

Aquí es donde un cliente puede editar la cantidad de los productos que escogió y revisar su orden final

Una vez que el cliente esté satisfecho, podrá proceder y hacer clic en el botón de “I’m Ready to Pay” (estoy listo para pagar). Se abrirá otra página para continuar con el proceso de pago. Dependiendo del método de pago (PayPal, Amazon Payments o Google Checkout) que configuraste en las opciones, será el servicio que se abrirá.

La ventana de PayPal para procesar órdenes desde tu sitio

Un ejemplo de la ventana de PayPal para procesar órdenes desde tu sitio

Preguntas frecuentes

¿Breezi procesa los pagos?

No, Breezi no procesa los pagos ni administra el dinero de tus clientes de ninguna forma. Esto se hace a través de sistemas externos.

Los métodos disponibles para procesar pagos son: PayPal, Amazon Payments y Google Checkout.

¿Breezi se queda con algún porcentaje del pago hecho por mis clientes?

No, nosotros no tocamos tus ganancias. 100% del pago va a tu cuenta.

¿Necesita su propia página?

Sí, debes tener solamente una app de Mini Shop por página.

¿Puedo tener varias tiendas?

Sí, puedes tener varias apps de Mini Shop instaladas dentro del mismo sitio Breezi. Sin embargo, es mucho más fácil rastrear y administrar tus productos con una sola app.

¿Puedo rastrear el inventario de mis productos?

No, por lo pronto no podemos rastrear cuántos productos están disponibles pero puedes ponerlos como “Out of stock” (agotado). Para hacerlo, regresa a la sección de “edita tu producto”.

No pasa nada cuando un visitante hace clic en el botón de “I’m Ready to Pay”(estoy listo para pagar). ¿Hay algún problema?

Debes elegir un método de pago en las opciones de la app de Mini Shop. Debes llenar la información del método que hayas elegido antes de hacer pagos.

Si el problema persiste después de esto, es posible que el caché del navegador necesite una limpia.

Tengo muchos productos en mi tienda. ¿Recomiendan que use esta app?

Si tienes que administar una gran cantidad de productos, compras o necesitas rastrear el inventario, entre otros tipos de funciones avanzadas, es posible que esta app no sea para ti.

Está enfocada a negocios o tiendas más pequeñas. Puedes intentar con: Shopify

 

¿Te quedó alguna duda? Háznosla saber en la sección de comentarios.