Editar la portada y secciones
Editar la portada y secciones
La portada (la página de inicio, /) es lo que la mayoría de las tiendas ajusta, y lo bueno es que no necesitas el webshop para tenerla bonita: es la vitrina gratis. Todo se edita desde un solo lugar —el Storefront Profile— y casi todos los campos son opcionales: lo que dejes vacío toma el valor por defecto del tema. Esta página recorre, sección por sección, qué puedes cambiar.
Dónde se edita todo: el Storefront Profile
- En tu Escritorio (Desk), abre Storefront Profile. Si tu ERPNext tiene una sola tienda, tendrás un registro; ábrelo. Si tienes varias vitrinas (varias marcas o sucursales-marca en el mismo ERPNext), habrá un registro por cada una — es el mecanismo de multi-tienda por celda.
- El formulario está dividido en pestañas: General, Catálogo, Categorías, Servicios, Carrito y pago, Cuenta, Envíos, Curación y Landing. Para la portada, la pestaña clave es «Landing».
- Cambia lo que necesites y guarda. Los cambios se reflejan en tu portada pública.
Nota: el campo «Storefront Name» (
storefront_name) en la pestaña General es el identificador de la tienda; se estampa en las órdenes que genere. «Domains» (domains) lista el/los dominios públicos que resuelven a esta vitrina (uno por línea). Normalmente el equipo Muelle deja esto listo; no lo cambies sin coordinar.
La portada (hero): título, subtítulo y estilo
En la pestaña Landing, sección «Portada (hero)»:
- «Título principal» (
landing_headline): el encabezado grande de tu portada. Ej. «Refacciones y accesorios para tu celular». - «Subtítulo» (
landing_subheadline): una línea de apoyo debajo del título. - «Estilo de portada» (
landing_layout): elige la forma del hero. Hay 3 estilos:cercania(por defecto): cercano, de barrio, orientado a confianza.escaparate: tipo vitrina/escaparate, más visual.catalogo: enfocado en llevar rápido al catálogo.
- «Banner promocional (barra superior)» (
landing_announcement): una barra delgada arriba de todo para un aviso (ej. «Envío gratis en compras +$999»).
Nota [captura: los tres estilos de portada — cercania, escaparate, catalogo — lado a lado]
Imagen o video de portada
Sección «Imagen / video de portada». Aquí decides el medio grande del hero.
- «Tipo de media» (
landing_media_kind):none(nada),image(una imagen),videoocarousel(varias imágenes que rotan). - «Origen» (
landing_media_source):manual: tú pones las URLs.item_group: la portada toma las fotos de los productos publicados de un grupo de artículos (un feed automático desde ERPNext). Útil si no quieres subir imágenes a mano.
- Si es manual: «URLs (una por línea)» (
landing_media_urls) — rutas/files/…ohttps, una por renglón. - Si el origen es
item_group: «Grupo de artículos (fotos)» (landing_media_group) — de qué categoría saca las fotos. - «Pie de media» (
landing_media_caption): texto opcional sobre el medio.
Advertencia: para
video, usa una URL de video servible públicamente. Si el video no carga para un visitante anónimo, revisa que la URL sea pública (no un adjunto privado). [VERIFICAR: formatos/hosts de video soportados en el reproductor]
Encender y apagar secciones de la portada
Sección «Secciones de inicio». Son interruptores para mostrar u ocultar bloques:
- «Mostrar Destacados» (
landing_show_featured, encendido por defecto): el carrusel de productos destacados (los que marcastefeatureden los overrides). - «Servicios activos» (
landing_show_services, encendido): apaga TODO lo de Servicios de un golpe — la página/servicios, el enlace del menú y la sección de inicio. - «Mostrar sucursales / stock» (
sucursal_display): un selector con cómo se ven tus sucursales y el stock por tienda:Ubicaciones + stock,Solo ubicaciones,Solo stock por tiendaoNinguna.Nota: existe también una casilla antigua «Mostrar Sucursales (heredado)» (
landing_show_sucursales). Usa preferentemente el selectorsucursal_display; la casilla heredada queda por compatibilidad. - «Mostrar Visítanos» (
landing_show_visit, encendido): la sección con tu dirección/mapa/horario.
Textos «Acerca de» y «Contacto / Visítanos»
- Sección «Acerca de»: «Título» (
landing_about_title) y «Texto» (landing_about_body) para contar quién eres. - Sección «Contacto / Visítanos»:
- «Dirección» (
landing_address), «Horario» (landing_hours), «WhatsApp» (landing_whatsapp). - «Mapa (coordenadas)» (
landing_map): pega coordenadaslat,lng(ej.22.834510,-105.778866) o un enlace de Google Maps para un pin exacto. Si lo dejas vacío, se ubica por la dirección (menos preciso).
- «Dirección» (
Importante: este bloque es la dirección/horario general de la tienda. El horario y dirección de cada sucursal viven en su propio registro de sucursal (ver más abajo), no aquí.
Marca y tema: colores, tipografía, esquinas y presets
Sección «Marca / tema». Aquí defines el «look» sin tocar código:
- «Color de marca» (
landing_color): tu color principal. - «Logo (URL)» (
landing_logo_url): la URL de tu logo. - «Esquinas» (
landing_corner_style):redondeado(default),suaveorecto. - «Tipografía» (
landing_font_pairing):moderno(default),amigableoclasico. - «Estilo (preset)» (
landing_preset): aplica un look completo de una vez (color, tipografía, esquinas, layout, claro/oscuro). Opciones:pastel,scandi,gadget(tema oscuro),artesanal,editorial. Los campos de marca de arriba sobrescriben al preset. - «Esquema de color» (
landing_color_scheme):light(claro, default) udark(oscuro). Sobrescribe el del preset.
Nota: el orden de prioridad es: campos individuales de marca ganan sobre el preset. Si eliges el preset
gadget(oscuro) pero pones un color de marca claro, manda tu color.
Nota [captura: pestaña Landing → sección Marca / tema con selector de preset]
Franja de confianza, newsletter y redes
- «Confianza (value props)» (
value_props, tabla «Storefront Value Prop»): la tira de íconos con promesas bajo la portada. Cada renglón: «Icon» (icon, elige de: shield, truck, lock, whatsapp, clock, star, pin, mail), «Label» (label, ej. «Envío gratis») y «Subtext» (sub, una línea concreta, ej. «Desde $999»). Si la dejas vacía, se usan valores universales por defecto. - Newsletter: «Mostrar captura de correo» (
landing_show_newsletter, apagado por defecto) más «Título» (landing_newsletter_title) y «Texto» (landing_newsletter_body). - Redes sociales: «Instagram URL» (
instagram_url), «Facebook URL» (facebook_url), «TikTok URL» (tiktok_url).
Testimonios
Los testimonios se capturan como registros aparte (Storefront Testimonial), no dentro del profile:
- En el Escritorio, Storefront Testimonial → Nuevo.
- Llena «Author» (
author, ej. «Laura M.»), «Quote» (quote, el texto corto), y opcionalmente «Location» (location), «Rating (1-5)» (rating, default 5) y «Photo URL» (photo). - Deja «Enabled» encendido; ordena con «Display Order». Si tienes varias vitrinas, limita con «Storefront».
Sucursales
Cada sucursal es un registro Storefront Sucursal con su propia página /sucursal/<slug>. Sirve tanto para mostrar tus ubicaciones como para stock por tienda.
- En el Escritorio, Storefront Sucursal → Nuevo.
- «Sucursal Name» (
sucursal_name, ej. «Mumu Centro») y «Enabled». - «Warehouse» (
warehouse): el almacén que surte esta sucursal. Si lo dejas vacío, la sucursal es solo informativa (dirección + fotos, sin stock) — ideal para una tienda que aún no conectas a ERPNext. - «Sellable» (
sellable, encendido): si el stock de esta sucursal cuenta para la disponibilidad en línea. «Show per-item stock» (show_stock): muestra «Disponible en» por producto. - Ubicación y contacto: «Address» (
address), «City», «State», «Hours» (hours, horario de ESTA sucursal), «Phone», «WhatsApp», «Maps URL» (maps_url) y «Mapa (coordenadas)» (map). - Fotos: «Foto de tarjeta» (
card_image, la que se ve en la tarjeta de Sucursales del inicio), «Banner de la página» (banner_image, imagen ancha arriba de la página de la sucursal) y «Galería» (photos, varias fotos; la primera es el respaldo si no pusiste tarjeta/banner). - «Route Slug» (
route_slug): la URL/sucursal/<slug>; vacío = se genera del nombre.
Nota — envíos y recoger por sucursal (avanzado / en preparación): los campos «Can ship from this branch» (
is_fulfillment_origin), «Offer in-store pickup here» (pickup_enabled) y «Postal Code (CP)» (postal_code) alimentan el surtido multi-sucursal y la cotización de paqueterías. Esto es §18.7, función en preparación y requiere configuración adicional del equipo Muelle. Para una portada normal no necesitas tocarlos.
La página de Servicios
En la pestaña «Servicios» eliges el grupo de artículos que se muestra como servicios («Service Group», service_group). En la pestaña «Curación» editas el contenido de la página /servicios: «Título de la página» (servicios_title), «Texto / descripción» (servicios_intro) y una imagen o video (servicios_media_kind con las mismas opciones que el hero). Recuerda que el interruptor maestro es «Servicios activos» (landing_show_services) en la pestaña Landing.
Advertencia: casi todo en esta página es opcional y reversible. Cambia de a poco y revisa tu portada pública después de guardar. Si algo se ve raro, vaciar un campo lo regresa al valor por defecto del tema. [captura: portada antes/después de un cambio de preset]