eCommerce y operación de Magento
Vestimenta del sitio, blocks, landing pages, evidencias y verificación.
Recursos de la sección
Propósito y alcance
Soporte al ecosistema de eCommerce mediante el diseño, la actualización y la publicación de contenidos en el sitio de Farmacias Benavides, asegurando la correcta implementación de campañas comerciales, promociones y contenidos institucionales. La plataforma es Adobe Commerce (Magento) 2.4.8-p3. Cubre el sitio web; la aplicación móvil queda fuera: WAOF entregaba los artes del splash, pero no operaba ni publicaba en la app.
El trabajo se organiza en dos bloques que funcionan de manera distinta y conviene no confundir:
| Vestimenta del sitio | Landing pages personalizadas | |
|---|---|---|
| Qué es | Actualización recurrente de los espacios existentes | Construcción de páginas nuevas para campañas |
| Ritmo | Mensual, con cambios intermedios | Por campaña |
| Cómo se hace | Sustitución de materiales en espacios ya construidos | Desarrollo, con código o con Page Builder |
| Insumo principal | El Excel mensual de materiales | Diseño en Figma o maqueta previa |
Nota
Acceso a la plataforma
El acceso al panel de administración de Magento se solicita a TI de Farmacias Benavides, que asigna usuario y contraseña individuales. La dirección del panel es de acceso restringido y se comparte por el canal que TI indique; no se documenta aquí por seguridad.
- Producción: el sitio público.
- QA: entorno de pruebas, usado antes de publicar en producción, principalmente para desarrollos pesados: landing pages con código propio (HTML, CSS o JavaScript). Para la vestimenta mensual ordinaria no era necesario pasar por QA.
Criterio práctico: si lo que se va a publicar implica código nuevo, pasa por QA. Si es sustituir un material en un espacio que ya existe, va directo a producción.
Los accesos a OptinMonster, la herramienta de pop-ups y slide-ins, se gestionan por separado; el área de Marketing de Benavides puede proveer usuario y contraseña.
El acceso a QA lo otorga también TI, por la misma vía que el de producción.
Qué es cada cosa que vive en el sitio
Vocabulario de los elementos que se actualizan. Es el que aparecerá en cualquier conversación con la agencia que continúe la operación.
| Elemento | Qué es | Dónde se ve |
|---|---|---|
| Cintillo (promobar) | Franja delgada en la parte superior del sitio, sobre el menú. Comunica la promoción vigente o un mensaje institucional. | Encabezado, todas las páginas |
| Carrusel de home | Bloque principal de banners rotativos de la página de inicio. | Página de inicio |
| Carruseles internos | Banners rotativos en páginas de categoría y landing pages. | Páginas internas |
| Micrositio de categoría | Página dedicada a una categoría de producto. Se compone de un banner superior y varios banners inferiores. | Secciones de categoría |
| Folleto digital | Versión navegable del folleto promocional. | Por definir |
| Pop-up / Slide-in | Ventanas emergentes. El pop-up aparece al centro; el slide-in entra desde un costado. Se gestionan con OptinMonster, no desde Magento. | Sobre cualquier página, según su configuración |
| Landing page | Página construida para una campaña específica. | URL propia por campaña |
| Blog | Sección de contenidos. Los artículos son reciclables: cabecera, estructura y pie se reutilizan y solo cambia el contenido. | Por definir |
| Promociones | Banners de promoción de producto, con su mecánica y vigencia. Viven principalmente en la página de folleto. | Página de folleto y espacios de promoción |
Todos los ejemplos que siguen son materiales reales de agosto de 2026 y están declarados en el Excel del mes que se adjunta más abajo.
Dónde se edita cada cosa: los Blocks
La mayor parte de la operación en Magento se concentra en un solo lugar: Content → Blocks. Un block es un contenedor de contenido reutilizable; el sitio está construido de forma que casi todos los espacios editables corresponden a uno. Actualizar el sitio consiste, en la práctica, en localizar el block correcto y sustituir su contenido.
Los blocks se buscan por palabra clave en el buscador de la pantalla de Blocks. Cada uno tiene un título legible y un identificador técnico.
| Elemento del sitio | Título del block | Identificador |
|---|---|---|
| Cintillo | Header | Widget | Promobar | header-widget-promobar |
| Micrositio de Especialidades | Categorías destacadas | Especialidades | categorias-destacadas-especialidades |
| Carrusel de Especialidades | Carrusel | Categorías destacadas | Especialidades (Requiere clases) | carrusel-categorias-destacadas-especialidades |
Los blocks siguen un patrón consistente de nombres, «Tipo | Sección | Categoría», y los carruseles de micrositios se llaman «Categorías destacadas | [nombre de la categoría]». Conocer el patrón permite encontrar cualquier espacio del sitio buscando el nombre de la categoría.
Los blocks de categorías destacadas son los que más se tocan en la operación regular, junto con el cintillo.
Nota
Las clases: lo que convierte un elemento en componente
La anotación «(Requiere clases)» en el título de un block no es decorativa. El sitio tiene clases de CSS propias que aportan funcionalidad: aplicadas a un elemento de Magento, lo transforman en un componente. Por ejemplo, si a un elemento «row» del Page Builder se le agregan las clases «carrusel-personalizado slider-completo», ese row se convierte en un carrusel.
No hay un carrusel «tipo carrusel» en Magento: hay un row con las clases correctas. Esto es lo menos intuitivo de la operación y lo que más fácilmente se rompe al editar sin saberlo.
Importante
Los carruseles de producto
Hay un caso que no requiere ni clases ni maquetación: los carruseles de producto. El módulo de carrusel de Magento resuelve la fila completa a partir de una lista de SKUs separados por comas, por ejemplo «1035354, 1013986, 368725, 368814».
Al guardar, el módulo toma de cada producto su imagen, su nombre y su precio desde el catálogo, y arma las tarjetas en el mismo orden en que se listaron los SKUs. Cada una liga sola a su página de producto, de modo que no hay que construir las ligas a mano.
Importante
El ciclo mensual: la vestimenta del sitio
«Vestir el sitio» es la actualización recurrente de todos los espacios con los materiales del mes.
- Último día del mes: se carga la vestimenta completa en Magento y se deja programada para publicarse el día 1.
- Día 15: cambio de banners de medio mes, cuando aplica.
- Otras fechas: según lo indique el calendario comercial. Las campañas y temporadas alteran el ritmo regular.
Nota
La vestimenta incluye:
- Banners de los carruseles de home y de páginas internas (categorías y landings).
- Micrositios de categoría: banner superior y banners inferiores.
- Cintillo principal.
- Folleto digital.
- Pop-ups y slide-ins, en OptinMonster.
- Promociones.
El Excel mensual: el documento maestro
Toda la vestimenta se organiza en un solo archivo de Excel, uno por mes, con la nomenclatura «[número de mes]. [Mes] [año].xlsx», por ejemplo 08. Agosto 26.xlsx. Ese archivo concentra la totalidad de los materiales que el equipo de diseño produce y que la Community Manager programa en Magento: define qué se publica, dónde y cuándo.
Es el documento más importante de esta operación. Quien lo entienda puede reconstruir el mes completo; sin él, la información queda dispersa entre correos y archivos sueltos.
La estructura del archivo es siempre la misma, mes con mes, y los archivos de cada mes están en la carpeta de Drive de la sección. También es la referencia de fechas de toda la operación: las vigencias de cada material se leen de aquí.
Nota
Cómo está organizado el Excel
El archivo tiene una hoja por espacio del sitio. Es decir: la estructura del Excel es un espejo de la anatomía del sitio, y por eso funciona como mapa de la operación completa. Estas siete hojas son las que se mueven mes a mes:
| Hoja | Espacio del sitio | Códigos |
|---|---|---|
| Banners-Home | Carrusel principal de la página de inicio | ESP02 |
| Carrusel_Banner SecundarioHOME | Carruseles y banner secundario de home | ESP12, ESP16, ESP20, ESP24 |
| Micrositios-Categorias | Los siete micrositios de categoría | ESP28 a ESP50 |
| Banners-Promociones | Banners de la página de folleto | ESP54, ESP55 |
| Pop-up | Pop-ups de home, checkout y categorías | ESP03, ESP04, ESP06, ESP07 |
| Splash app | Splash screen de la aplicación móvil | ESP01 |
| Cintillo | Cintillo del encabezado | No aplica |
Nota
El sistema de códigos de espacio
Cada espacio publicable del sitio tiene un código fijo con formato ESPxx. Es la pieza que conecta todo: el Excel lo declara, el diseño nombra el arte con él y la evidencia lo comprueba.
| Código | Espacio |
|---|---|
| ESP01 | SplashScreen (solo App) |
| ESP02 | Banner de home (carrusel principal) |
| ESP03 | Pop-up Home |
| ESP04 | Pop-up Checkout |
| ESP06 | Pop-up OTC |
| ESP07 | Pop-up Bebés |
| ESP12 | Carrusel «Sugerencia semanal» |
| ESP16 | Carrusel «Lo más vendido» |
| ESP20 | Carrusel «Benavides Conmigo» |
| ESP24 | Banner home secundario |
| ESP28 | Micrositio: Medicamentos (Farmacia OTC) |
| ESP32 | Micrositio: Especialidades (Farmacia RX) |
| ESP36 | Micrositio: Bienestar Sexual (Farmacia RX/OTC) |
| ESP38 | Micrositio: Bebés |
| ESP42 | Micrositio: Cuidado Personal |
| ESP46 | Micrositio: Dermatológicos |
| ESP50 | Micrositio: Cuidado y Prevención (vitaminas, sueros, material de curación) |
| ESP54 | Banner Folleto |
| ESP55 | Banner Ahorra más |
Nota
Son siete micrositios de categoría activos, listados arriba.
Las columnas del Excel
Las hojas comparten una estructura común. Cada fila es un material a publicar:
| Columna | Qué contiene |
|---|---|
| Código | El código del espacio (ESPxx) donde va el material. |
| Espacio / Banner | Nombre legible del espacio o del banner. |
| # | Posición dentro del espacio, cuando el espacio tiene varias (por ejemplo, el orden dentro de un carrusel). |
| Inicio / Fin | Días del mes en que el material entra y sale. Es la vigencia. |
| Estatus | Estado de la gestión del material. |
| Evidencia | Control del comprobante de publicación. |
| Proveedor | El laboratorio o la marca, cuando el espacio es comercializado. |
| Tipo de Campaña | Comercializado, Orgánico, Institucional o Exclusivo eCommerce. |
| SKU | Los códigos de producto que participan. |
| Nombre del producto | Descripción de los productos y de la mecánica. |
| Promoción | La mecánica comercial: precio, porcentaje o dinámica. |
| Catman / ejecutivo | La persona responsable del acuerdo comercial. |
La columna «Tipo de Campaña» es la misma distinción que viaja en el utm_content de la URL. El Excel la declara, el UTM la etiqueta y la evidencia la comprueba: los tres tienen que decir lo mismo.
Importante
Quién lo llena y quién lo aprueba
El Project Manager de WAOF llena el archivo y Benavides lo aprueba. La coordinación del día a día ocurre por WhatsApp, y el Excel es el intermediario: es el documento sobre el que ambas partes se ponen de acuerdo antes de que la vestimenta se cargue.
El Excel no es un formato administrativo: es el acuerdo. Lo que está en el archivo es lo que se publica.
Importante
Landing pages personalizadas
A diferencia de la vestimenta, las landings implican construir una página nueva. Se resolvían de tres maneras:
- 01Código hardcodeado: la página se desarrolla directamente en HTML, CSS y JavaScript, y se carga en Magento.
- 02Construcción externa y pegado: la página se maqueta con una herramienta externa y el código resultante se pega en Magento como contenido inline.
- 03Diseño en Figma y construcción con Page Builder: se diseña la página en Figma y se arma con el editor visual de Magento, que permite componer con filas, columnas y elementos (imágenes, textos, botones) sin escribir código.
En la práctica, las landings más elaboradas combinan los enfoques: bloques de código inline para lo que requiere comportamiento o estilo propio, junto a elementos nativos de Page Builder para el contenido estándar. La landing de Rosa Fuerte 2026 es el ejemplo de referencia: una primera fila con un bloque <style> que define los estilos de la campaña, seguida de filas con imágenes y contenido armados con las herramientas del Page Builder.
Importante
El código lo desarrollaban programadores de WAOF, no el equipo de diseño. Una landing de campaña tomaba alrededor de una semana entre programación y rondas de feedback.
Importante
Nota
Evidencias de publicación
Se genera un reporte mensual de evidencias que consiste, literalmente, en capturas de pantalla que documentan que los banners fueron publicados. El formato es una presentación, con la nomenclatura «[número]. Evidencias Banners [Mes] [Año].pptx», por ejemplo 07. Evidencias Banners Julio 2026.pptx.
Su propósito principal son los espacios comercializados: los lugares del sitio vendidos a marcas o laboratorios, donde la evidencia funciona como comprobante de que el espacio contratado efectivamente se publicó.
Importante
Del lado de Benavides las recibe Yareli Salazar. El compromiso es enviarlas durante la primera semana del mes, o a principios de la segunda a más tardar.
Medición
Toda la analítica del sitio proviene de Google Analytics, incluido el seguimiento de UTMs.
Convención de UTMs
Todo banner del sitio lleva su URL de destino etiquetada con cuatro parámetros. La convención, verificada contra lo publicado en la home, es la siguiente:
| Parámetro | Qué contiene | Valores reales |
|---|---|---|
| utm_source | Constante. Identifica al sitio como origen del clic. | ecommerce |
| utm_medium | El espacio del sitio donde vive el banner, más el mes de la vestimenta. | banner-home-agosto · home-secundario-agosto |
| utm_campaign | La marca o la campaña, en minúsculas y sin espacios. | bedoyecta · nestle · skinandglow · ofertas-fin-de-semana |
| utm_content | Si el espacio es comercializado o contenido propio. | comercializado · organico |
https://www.benavides.com.mx/promociones-bedoyecta?utm_source=ecommerce&utm_medium=banner-home-agosto&utm_campaign=bedoyecta&utm_content=comercializadoutm_content es el parámetro que separa el desempeño de los espacios vendidos a laboratorios del contenido propio de la marca. Es lo que permite sustentar ante un tercero que su espacio funcionó.
Importante
Volumen de trabajo
| Sección | Volumen aproximado mensual |
|---|---|
| Home | 24–32 materiales |
| Micrositios | 49 banners |
| Blog | 8 banners |
| Landings especiales | Según campaña |
Cómo verificar que algo quedó bien publicado
Lista de comprobación para revisar una publicación sin necesidad de operar la plataforma:
- El material corresponde al que se aprobó en el Excel del mes.
- Se ve correctamente en desktop y en mobile. Son dos revisiones distintas: un banner puede verse bien en una y romperse en la otra.
- El banner lleva a la URL correcta al hacer clic.
- La URL de destino incluye los parámetros UTM.
- La vigencia está configurada: la publicación aparece y desaparece en las fechas previstas.
- Los espacios comercializados quedaron documentados en el reporte de evidencias.
Errores frecuentes
- Un cambio programado que no entró. Programar no es publicar: hay que volver a revisar el sitio el día en que el cambio debía activarse.
- Cargar solo una de las dos medidas. Todos los banners tienen versión desktop y versión mobile; olvidar una deja el espacio roto en la mitad de los dispositivos.
- Rutas de destino inválidas. Verificar siempre que la URL a la que apunta una promoción exista y cargue.
- Cambios de último minuto del área comercial en ligas de promociones o en costos, que llegan cuando el material ya estaba cargado.
Nota
Dónde viven los materiales
Todo lo relacionado con el sitio vive en la carpeta 07 Sitio Web de Drive: los Excels mensuales, los materiales, las evidencias y las campañas.
Importante
Lo que caduca y hay que vigilar
Lo que caduca son, sobre todo, las promociones. Cada una tiene una vigencia definida y debe bajarse o sustituirse al terminar.
El Excel del mes es la biblia en cuanto a fechas: ahí está la vigencia de cada material. Ante cualquier duda sobre hasta cuándo va algo, la respuesta está en el Excel.
El folleto digital es mensual y se cambia a partir del día 1 de cada mes. Como el resto de la vestimenta, puede dejarse programado con anticipación.