El módulo Tienda convierte tu sitio en un catálogo o una tienda con carrito de compras, sin salir de MGPanel. Los visitantes navegan productos, buscan, arman un carrito o solicitan una cotización, y pagan en línea si tienes una pasarela activa — todo con las páginas y el CSS del tema base, listos para usar.
1. ¿Qué es el módulo de Tienda?
La Tienda tiene dos modos, configurables en Configuración → Tienda:
- Catálogo: los visitantes navegan productos y solicitan una cotización. No se cobra nada en línea.
- Carrito: los visitantes agregan productos a un carrito y completan la compra en el checkout. Necesita al menos una forma de cobro: una pasarela de pago, o el método Pago offline (transferencia, enlace de pago externo o WhatsApp).
2. Páginas y URLs públicas
Cuando la tienda está habilitada, tu sitio ya expone estas páginas públicas, listas para usar sin crear nada ni insertar shortcodes:
/store— todos los productos publicados, con buscador. Es la forma más rápida de ver o probar tu catálogo completo, sin filtrar por categorías./store/category/<slug>— solo los productos de una categoría (usa el slug de la categoría, p. ej./store/category/ropa)./store/<slug-del-producto>— la ficha de un producto./cart— el carrito de compras (modo Carrito)./checkout— el pago en línea o la confirmación de cotización.
Estas páginas ya existen por defecto: no cambies su URL ni las recrees. Personalízalas con CSS global o secciones adicionales. Para incrustar productos dentro de otra página (un home o una landing), usa los shortcodes de la sección siguiente.
3. Puesta en marcha
En Tienda → Resumen verás una tarjeta Puesta en marcha mientras falte algún paso:
- Habilitar la tienda en Configuración → Tienda (interruptor “Tienda habilitada”).
- Publicar al menos un producto en Productos: debe tener precio y el interruptor “Tienda online” activo.
- Activar un método de pago en Integraciones — obligatorio en modo Carrito, opcional en modo Catálogo (solo se usa para “pagar ahora” si lo activas).
La tarjeta desaparece automáticamente cuando los tres pasos están completos (o cuando el pago no aplica en modo catálogo).
4. Configuración → Tienda
Toda la tienda se configura desde Configuración → Tienda. Estos son los ajustes disponibles:
| Ajuste | Opciones | Para qué sirve |
|---|---|---|
| Tienda habilitada | Sí / No | Activa las páginas públicas, los botones flotantes y los shortcodes |
| Modo | Catálogo / Carrito | Cotización sin pago, o compra con carrito y checkout |
| Estilo de tarjeta | Botón / Botón con cantidad / Añadir al pasar el cursor | Cómo se agrega un producto desde el listado, sin entrar a la ficha |
| Mostrar precio | Exacto / Desde / Oculto / Solo cotización | Útil en venta consultiva (tours, servicios a medida) donde el precio no es único |
| Especificaciones en tarjeta | 0 a 6 | Cuántas características del producto se resumen en la tarjeta |
| Mostrar descripción en tarjeta | Sí / No | Añade la descripción corta bajo el título |
| Favoritos | Sí / No | Habilita el botón «Guardar» y la página /favorites |
| Reservas con fecha | Sí / No | Permite que un producto pida al comprador una fecha (tours, experiencias, alquileres). Por sí solo no cambia nada: cada producto decide si la pide |
Impuestos
Define la tasa de ITBMS/IVA y si el precio ya lo incluye. Si lo incluye, el checkout desglosa el impuesto sin sumarlo al total; si no, lo agrega al final.
Envío
Configura la dirección de origen, tus políticas de envío (texto libre o un enlace a una página propia) y una lista de métodos de envío. Cada método tiene:
- Nombre y precio — lo que ve y paga el comprador.
- Gratis desde — a partir de qué monto de compra el envío no se cobra. Déjalo vacío para que nunca sea gratis.
- Retiro en tienda — marca el método como recogida: siempre cuesta $0 y no pide dirección.
- Activo — desactívalo para ocultarlo sin perder su configuración.
El costo se recalcula en el servidor cada vez que el comprador cambia de método, así que no se puede manipular desde el navegador.
Pagos
Dos avisos informativos que se muestran en la pestaña «Pago» de la ficha de producto: Pago en línea disponible y Pago posterior / contra entrega. Son texto orientativo para el comprador; las pasarelas reales se activan en Integraciones.
Contenido común
Una pestaña extra que aparece en todas las fichas de producto, con el mismo contenido: garantía, condiciones, instrucciones de cuidado. Puedes escribirlo como texto libre o reutilizar una sección existente del editor web, y le das el título que quieras.
Plantillas de variantes
Guarda combinaciones de opciones que repites (Talla: S/M/L/XL, Color: negro/blanco) para aplicarlas de un clic al crear un producto nuevo, en vez de reescribirlas cada vez.
Reservas con fecha
Pensado para tours, clases, experiencias o alquileres que se compran para un día concreto. Apagado por defecto. Al activarlo, el editor de cada producto muestra el bloque Reserva con fecha, donde defines anticipación mínima, ventana de reserva, días de operación y fechas bloqueadas; el comprador elige el día en un calendario de la ficha y la fecha queda en el pedido, el correo y la factura. Los detalles están en Productos, sección Fecha de reserva.
5. Shortcodes disponibles
Inserta cualquiera de estos shortcodes en una sección de página (Editar Web) con la sintaxis {{tienda=tipo:cantidad parametro="valor"}}. Todos, excepto cuenta, devuelven una cadena vacía si la tienda está deshabilitada.
| Tipo | Sintaxis | Parámetros | Qué muestra |
|---|---|---|---|
| productos | {{tienda=productos:8 category="ropa" style="grid"}} | cantidad (def. 8, máx. 100), category, style | Últimos productos cargados, orden por fecha descendente |
| destacados | {{tienda=destacados:6}} | cantidad, style | Productos marcados como destacados en la configuración de la cuenta |
| categoria | {{tienda=categoria:8 category="electronica"}} | category, cantidad, style | Productos de una categoría específica (filtra por el parámetro category) |
| catalogo | {{tienda=catalogo:12}} | cantidad, style | Parrilla de productos; se comporta igual que productos (8 por defecto). No es un catálogo especial |
| carrito | {{tienda=carrito style="button" text="Mi carrito"}} | style (icon | button | link, def. icon), text, class | Icono/botón/enlace al carrito con badge de cantidad |
| icono_carrito | {{tienda=icono_carrito class="header-cart"}} | style, text, class | Alias de carrito — mismo comportamiento, útil para ubicarlo (ej. header) |
| buscador | {{tienda=buscador placeholder="Buscar productos..." limit="6"}} | placeholder, limit (def. 6, máx. 12), class | Input con resultados en vivo y enlace “Ver todos” a /store?search= |
| checkout | {{tienda=checkout style="button" text="Finalizar compra"}} | style, text, class | Botón/enlace que inicia el checkout con el carrito actual (usa /cart como respaldo) |
| cuenta | {{tienda=cuenta style="icon" text="Mi cuenta"}} | style, text, class | Abre el panel de “Mi cuenta” (acceso/registro de clientes) — ver Acceso de Clientes; visible aunque la tienda esté deshabilitada si hay e-learning activo o el visitante tiene sesión iniciada |
¿Cómo muestro todos los productos? Para incrustar una parrilla dentro de una página usa {{tienda=productos:N}} (N hasta 100). Para que un visitante vea todo el catálogo, enlázalo a la página /store (ver sección 2). Un {{tienda}} sin tipo no genera nada.
6. Triggers automáticos vs. shortcodes inline
Cuando la tienda está habilitada, MGPanel ya inyecta automáticamente en todas las páginas:
- Un botón flotante de carrito con el contador de artículos.
- Un botón flotante de Mi cuenta (también aparece si tienes e-learning activo o el visitante ya inició sesión, aunque la tienda esté deshabilitada) — el sistema de cuentas que hay detrás está documentado en Acceso de Clientes.
Usa los shortcodes {{tienda=carrito}} y {{tienda=cuenta}} solo para ubicaciones adicionales — dentro de un header, un menú o un hero — no para duplicar los flotantes en la misma página.
7. Checkout y métodos de pago
El checkout acepta las pasarelas que actives en Integraciones: Wompi, PayPal, Stripe, PagueloFacil, Banco General, Yappy y Crixto. Además, Pago offline te permite cerrar ventas sin ninguna pasarela.
- Modo Catálogo: el checkout genera una cotización; no se cobra nada en línea.
- Modo Carrito: el checkout necesita al menos una forma de cobro — una pasarela, o Pago offline. Si no hay ninguna, el visitante ve un aviso y no puede completar la compra.
Los impuestos, los métodos de envío y la dirección se configuran en la sección 4, Configuración → Tienda.
Pago offline: transferencia, enlace de pago y WhatsApp
Si todavía no tienes una pasarela — o vendes cerrando por chat — activa la integración Pago offline. De una sola configuración salen hasta tres formas de cobrar, y puedes usar las que quieras a la vez:
- Datos bancarios: escribe los datos de tu cuenta y el comprador los ve al elegir transferencia.
- Enlace de pago externo: pega la URL donde cobras — BAC Compra Click, un enlace de Yappy, PayPal.me — y el checkout muestra un botón que la abre. Debe ser
https. - Cerrar por WhatsApp: pon tu número y el comprador termina la compra por chat. MGPanel arma el mensaje con el código del pedido, los artículos, el total, el abono y el enlace a la factura.
Puedes personalizar el mensaje de WhatsApp con las etiquetas {{codigo}}, {{items}}, {{abono}}, {{total}} y {{enlace}}. Si la dejas vacía se usa una plantilla por defecto.
El pago no se confirma solo
Un pedido cerrado por esta vía queda en «Pendientes de cobro», no como pagado. Cuando recibas el dinero, registra el pago desde la factura: recién ahí se descuenta el stock y el pedido pasa a Pagadas.
Abono: dejar que reserven con un anticipo
En cada producto puedes activar Aceptar abono e indicar un porcentaje del precio o un monto fijo (por unidad o por línea). Útil cuando vendes por encargo, a medida, con tiempo de entrega o con fecha: el cliente reserva hoy y paga el resto después.
- Se configura por producto, en el bloque de precio (solo para precios de pago único). Cada variante hereda la regla, lleva una propia o queda sin abono — ver Productos.
- Al reservar se cobra el abono de las líneas que lo aceptan, y completos los productos sin abono, el envío y los impuestos. Ejemplo: un producto de $100 al 30 % más otro de $149 sin abono reservan con $179.
- En el checkout el comprador elige: pagar el abono, o pagar el total. Si cambia el método de envío, el monto se recalcula al instante. Lo que quede pendiente aparece como saldo en la factura.
- Con el primer pago —sea el abono o el total, y también cuando lo registras tú desde el panel— el comprador recibe el correo de confirmación. Si pagó solo el abono, llega como «Reserva confirmada» con lo pagado y el saldo pendiente, y a ti te llega el aviso «Nueva reserva». Al saldar después no se repite.
- Al cobrar solo el abono, el pedido queda como pagado parcial y lo ves en «Pendientes de cobro» hasta que se salde.
- En modo Carrito, la tarjeta y la ficha del producto muestran el abono junto al precio (por ejemplo «Reserva con 50.00 USD»). El precio total nunca se oculta.
Funciona con cualquier forma de cobro: la pasarela cobra el abono, no el total, y el saldo se registra después desde Facturas.
8. Gestión en el panel
Desde el menú lateral → Sitio Web → Tienda On-line tienes seis pestañas además del Resumen:
- Órdenes: los pedidos del modo Carrito, con un selector de segmento. Pagadas son las ventas ya cobradas; Pendientes de cobro reúne las que esperan confirmación — cierres por transferencia o WhatsApp, y las pagadas solo con el abono — indicando por qué canal llegaron. Si tu cuenta usa Reservas con fecha, cada fila muestra las fechas reservadas y un filtro de fecha lista los pedidos de ese día.
- Cotizaciones: las solicitudes generadas desde el checkout en modo Catálogo. Se gestionan a fondo en Presupuestos.
- Catálogos: arma selecciones de productos con una URL compartible propia y una vista imprimible (
Ctrl+P) para descargar como PDF. - Productos en tienda: elige qué productos se muestran en la tienda y márcalos como destacados (define su orden).
- Carritos abandonados: pedidos que quedaron en borrador más de 24 horas sin pagar. No se mezclan con las órdenes: son oportunidades de seguimiento comercial.
- Favoritos: qué productos están guardando tus visitantes, para detectar interés que todavía no se convirtió en venta.
9. Personalización con CSS
Todo el markup de la tienda usa clases mg-store-* reutilizables. Sobreescríbelas con CSS global (Configuración → Sitio web → CSS) o CSS de sección, sin tocar el HTML:
- Listados: mg-store-grid, mg-store-card, mg-store-card-image, mg-store-card-placeholder, mg-store-card-body, mg-store-card-title, mg-store-card-price, mg-store-card-deposit, mg-store-empty.
- Buscador: mg-store-search, mg-store-search-input, mg-store-search-results, mg-store-search-item, mg-store-search-item-title, mg-store-search-item-price, mg-store-search-all.
- Abono y fecha en la ficha: mg-store-product-deposit, mg-store-product-booking, mg-booking-calendar, mg-booking-head, mg-booking-month, mg-booking-nav, mg-booking-grid, mg-booking-day (día elegido: is-selected).
- Acciones inline: mg-store-inline, mg-store-inline--icon, mg-store-inline--link, mg-store-cart-count.
- Botones: reutiliza mg-btn, mg-btn-primary, mg-btn-secondary del tema base.
Cubre todas las clases relevantes en un solo lugar — un override parcial deja las tarjetas o el buscador a medio estilizar.
El panel de “Mi cuenta” (login, registro y perfil) que abren el botón flotante y {{tienda=cuenta}} tiene su propio catálogo de clases mg-auth-* — ver la sección de personalización con CSS en Acceso de Clientes.