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 |
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.
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. Útil cuando vendes por encargo, a medida o con tiempo de entrega: el cliente reserva hoy y paga el resto al recibir.
- Se configura por producto, en el bloque de precio (solo para precios de pago único). Las variantes heredan el mismo porcentaje.
- El abono del pedido es la suma de cada línea: dos unidades de un producto de $10 al 30% reservan con $6. No se aplica sobre el envío ni los impuestos.
- En el checkout el comprador elige: pagar el abono, o pagar el total. Lo que quede pendiente aparece como saldo en la factura.
- Al cobrar solo el abono, el pedido queda como pagado parcial y lo ves en «Pendientes de cobro» hasta que se salde.
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.
- 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-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.
- 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.