El logo, los colores, las tipografías, los banners y la forma en que se ven los productos en la grilla. Todo se configura desde la sección Diseño de tienda del menú lateral.
Paso a paso
- En el menú lateral, buscá la sección Diseño de tienda. No es una pantalla sola: son ocho pantallas separadas, cada una con su propio ítem en el menú.
- Entrá a la pantalla que corresponde a lo que querés cambiar. El listado está abajo.
- Editá. Casi todas las pantallas tienen una vista previa a la derecha que se actualiza mientras trabajás.
- Tocá Guardar al pie de la pantalla.
- Recargá tu tienda para ver el cambio.
Las ocho pantallas de Diseño de tienda
| Pantalla | Qué se cambia ahí |
|---|---|
| Marca | Logotipo, adaptación del logo para el pie oscuro, favicon |
| Colores y Fondo | Los cinco colores de la tienda y la imagen de fondo |
| Tipografía | Las tres fuentes de la tienda |
| Tarjeta de Producto | Los tres badges, el borde de la tarjeta y cómo se recorta la foto |
| Grilla de Productos | Productos por fila, alto de celda y margen |
| Banners | El carrusel de la portada |
| Chat | El chat de la tienda |
| Contacto | El formulario de contacto |
Banners: qué medida usar
No hay una medida obligatoria. La tienda acepta cualquier resolución y se adapta a la pantalla. Lo que sí importa es que todos los banners del carrusel compartan la misma proporción, o que fijes una altura. El propio editor te lo avisa cuando detecta banners de distinta forma: "Los banners tienen distintas proporciones. Para evitar problemas de visualización, usá imágenes con el mismo formato o configurá una altura fija para el slider".
Entrá a Diseño de tienda → Banners. Arriba de la vista previa hay dos botones, Escritorio y Móvil. El campo de altura que aparece debajo cambia según cuál esté elegido:
- Altura escritorio: la altura del carrusel en pantalla grande. Va de 0 a 800 px. El valor sugerido del campo es 600.
- Altura celular: la altura del carrusel en celulares. Va de 0 a 800 px. El valor sugerido del campo es 400.
Entender qué hace cada caso te ahorra la mitad de los problemas:
- Campo vacío: el banner se muestra a lo ancho de la pantalla y la altura sale de la imagen. No se recorta nada, pero cada slide mide distinto y el carrusel salta de altura entre uno y otro.
- Campo con un número: el banner mide exactamente eso y la imagen se recorta desde el centro para llenarlo. Todos los slides quedan iguales, pero si la imagen tiene otra proporción, le falta un pedazo.
Por eso, una vez que fijás la altura conviene exportar todas las imágenes con esa misma proporción: así llenan el espacio sin perder nada.
Si dejás vacía la altura de celular, en el celular se usa la de escritorio. Una altura pensada para una pantalla ancha, aplicada a un celular angosto, recorta muchísimo. Si fijás una altura, fijá las dos.
Una imagen distinta para el celular
Cada slide puede tener su propia imagen para celular, además de la de escritorio. En la fila del slide, en el bloque 📱 Mobile, tocá el recuadro punteado que dice MOBILE para subirla. Si después la querés sacar, está el botón Quitar imagen mobile: el banner vuelve a usar la imagen de escritorio.
Esto es lo que resuelve el caso de "el banner no se ve bien en el celular": una imagen apaisada de escritorio en un celular angosto queda muy chica. Con una imagen mobile vertical se ve completa.
El editor también avisa cuando faltan: "Algunos banners no tienen imagen mobile. En celulares se va a mostrar la imagen desktop, que puede verse diferente."
Qué se puede cargar
- Imágenes y videos, con el botón Agregar imagen/video.
- Videos de YouTube, con el botón Agregar video YouTube: pegás la URL del video y entra como un slide más.
Qué podés hacer con cada slide
En la lista Administrar Slides, cada fila tiene:
- Un botón Visible / Oculto para sacar un banner de la tienda sin borrarlo.
- Flechas arriba y abajo para cambiar el orden de los slides.
- Un botón rojo para eliminarlo.
- Link de destino: la URL a la que va el comprador cuando hace clic en el banner. Si la dejás vacía, el banner no es clickeable.
- Texto del botón: el texto del botón que aparece sobre el banner. Necesita un link de destino para mostrarse.
- Contenido sobre el banner: texto con formato encima de la imagen.
Si vas a usar texto o botón encima, conviene que la imagen no traiga texto incrustado, para que no se superpongan.
No hay control de velocidad ni de rotación automática del carrusel, y tampoco se puede programar un banner por fechas. Para sacar uno de circulación, usá el botón Oculto.
El banner de una categoría
Es otro banner distinto al del carrusel, y se carga en la ficha de la categoría. En el menú lateral, Catálogo → Categorías, abrí la categoría y bajá hasta Banner Promocional:
- Banner: la imagen o video promocional que aparece arriba de los productos de esa categoría. Acepta archivos .mp4.
- Banner Mobile: una imagen alternativa para celulares.
- Banner Link: a dónde va el comprador al hacer clic.
- Banner Margen: el espacio alrededor del banner, en píxeles.
- Banner Redondeado: los bordes redondeados del banner, en píxeles.
Tampoco hay una medida obligatoria acá. La categoría tiene además su propia Imagen título, que reemplaza el texto del nombre en el encabezado, y su Imagen fondo, que aparece detrás de los productos.
Grilla de Productos: cuántos productos por fila
En Diseño de tienda → Grilla de Productos:
- Productos en escritorio: de 1 a 6 productos por fila. Por defecto 4.
- Productos en móvil: 1 o 2. Por defecto 2.
- Alto de celda: la altura de las tarjetas, de 100 a 800 px. El valor sugerido es 300. Si escribís un número fuera de ese rango, el campo lo ajusta al salir.
- Margen: el espacio entre productos, de 0 a 50 px.
A la derecha hay una vista previa con botones Escritorio y Móvil para ver cómo queda antes de guardar.
Además, cada categoría puede pisar ese número. En Catálogo → Categorías, dentro de la categoría, el campo Columnas define cuántos productos por fila muestra esa categoría en particular. Es lo que usás cuando querés que una sección vaya de a 4 y el resto de a 3.
Cuando los productos se ven de distinto tamaño
Es la queja más común después de configurar el alto de celda, y el alto de celda no la resuelve solo. La causa es cómo se acomoda la foto dentro de la tarjeta.
Andá a Diseño de tienda → Tarjeta de Producto, sección Fotos de productos, y activá Llenar tarjeta con la foto. La ayuda del propio campo lo explica: "Si está activo, la foto ocupa toda la tarjeta y se recorta lo que sobra. Si está inactivo, la foto se muestra completa y puede dejar espacios en blanco arriba y abajo."
Cuando lo activás aparece Zona prioritaria al recortar, con tres opciones: Arriba, Centro y Abajo. Es la parte de la imagen que se conserva cuando se recorta. Para fotos de modelos conviene Arriba, así no se cortan las caras.
Hay una segunda causa posible: si un producto está marcado como Destacado en su ficha, su tarjeta ocupa el doble de espacio en la grilla. Eso es a propósito, no un error de configuración.
Tarjeta de Producto: los tres badges
En Diseño de tienda → Tarjeta de Producto subís tres imágenes. Son imágenes: no hay campo de texto ni de color para ellas.
- Badge Top Ventas: se muestra en los productos más vendidos. Es automático, no se elige producto por producto. Se dibuja arriba a la derecha de la tarjeta, a un máximo de 50 × 50 píxeles.
- Badge Nuevo: se muestra en los productos que marcaste como Nuevo en la ficha del producto. Se dibuja arriba a la izquierda, a un máximo de 50 píxeles de ancho.
- Badge Oferta: aparece en los productos con oferta activa. Se dibuja abajo a la derecha, sobre una cajita blanca, a un máximo de 24 píxeles de alto por 28 de ancho.
Debajo del Badge Oferta, si el producto tiene cargado un texto de oferta, ese texto se muestra en rojo. Ese color está fijo en el sistema y no se puede cambiar desde ninguna pantalla de configuración. Si no querés ver rojo en la tarjeta, la única salida es dejar vacío el texto de oferta del producto y usar sólo la imagen del badge.
En la misma pantalla está Estilo de tarjeta, con el interruptor Sin borde, que saca el marco de la tarjeta y le pone una sombra.
Colores y Fondo
Son cinco colores más una imagen, agrupados en tres bloques:
- Colores del encabezado: Color cabecera (el fondo de la barra superior) y Color texto (el texto de esa barra). Acá es donde se cambia el color del encabezado de la página.
- Color principal y categorías: Botones, banners y badges (el color principal, que se aplica en botones, banners de anuncio, insignias de promoción y encabezados de categoría) y Color texto en categorías.
- Fondo: Color fondo y Imagen fondo de la tienda.
A la derecha hay una vista previa del encabezado y del pie que se actualiza mientras elegís.
Tipografía
Son tres selectores de fuente:
- Texto General: los nombres de productos, los precios y los textos de la tienda.
- Títulos y Botones: encabezados, navegación, botones y títulos de categorías. Tiene además un interruptor Bold.
- Descripciones: las descripciones de productos y los textos secundarios.
Marca
- Logotipo: el logo del encabezado. Al subirlo, el sistema extrae los colores de la imagen y te los ofrece como paleta en las demás pantallas.
- Adaptar logo para footer oscuro: convierte el logo a blanco para que se vea sobre el fondo oscuro del pie.
- Favicon: el iconito de la pestaña del navegador.
La barra de anuncio del encabezado
Es la franja que aparece arriba de todo, en todas las páginas.
El texto NO se edita desde Diseño de tienda. Está en el menú lateral, en Configuración → Comunicación. Al entrar, la pantalla abre con Aviso en el checkout seleccionado; tenés que hacer clic en Anuncio de encabezado, que es el primer ítem de la lista Secciones de tu tienda, a la izquierda.
La franja no tiene color propio. El fondo es el color Botones, banners y badges de Colores y Fondo, y el texto se pone blanco solo, salvo que ese color sea blanco, en cuyo caso el texto sale gris oscuro. Si querés cambiar cómo se ve la franja, el único lever es ese color, y cambiarlo también mueve los botones y los badges de toda la tienda.
Cosas que no están en Diseño de tienda
- Página en construcción: el interruptor está en Configuración → General, se llama Página en construcción.
- Moneda: el selector Moneda está en Configuración → General, junto a la zona horaria.
- Las plantillas Catalogo Clasico, Catalogo Premium, Lookbook, Lista Compacta, Galeria y Catalogo Minimal no cambian el diseño de tu tienda. Son las plantillas del Constructor de catálogo, el catálogo descargable en PDF, CSV o Excel que armás desde Catálogo → Constructor de catálogo.
Lo que no se puede hacer
- No hay pop-up ni cartel modal al entrar a la tienda. No existe esa función. Las alternativas reales son la barra de anuncio del encabezado, o poner el aviso como primer slide del carrusel.
- No se puede armar un menú propio en la cabecera. Las solapas del encabezado son fijas: Puntos de venta, Cómo comprar, Quiénes somos, la página personalizada, un único botón personalizado, Contacto y los íconos de redes. Cada una aparece sólo si cargaste su contenido, y el orden no se puede cambiar. Tampoco hay submenús ni categorías como solapas.
- No se puede etiquetar productos con texto y colores a elección. Los únicos distintivos de la tarjeta son los tres badges de imagen descritos arriba.
Pasar a la tienda nueva
VentasxMayor tiene una segunda generación de tienda, que se arma con bloques y se edita en vivo sobre la propia tienda, con muchos más controles de diseño que estas ocho pantallas.
El lanzamiento es gradual y la activación la hace el equipo de VentasxMayor. Escribinos a soporte y te la preparamos.
No se activa desde el panel y no hay un borrador que puedas ir armando mientras tanto: el botón TIENDA de arriba a la derecha sólo te lleva a tu tienda actual. Cuando la tengan activada, ese botón pasa a decir EDITAR TIENDA y abre el editor.
Si algo no aparece
- No encontrás dónde cambiar un color o el encabezado: está en Diseño de tienda → Colores y Fondo, no en Marca ni en Banners.
- No ves el campo Altura celular: el campo cambia según el botón Escritorio / Móvil que esté elegido arriba de la vista previa. Tocá Móvil.
- Borraste un banner y sigue apareciendo: fijate si lo marcaste como Oculto en vez de eliminarlo, y si tiene imagen mobile cargada aparte.
- El banner se ve distinto en el celular: le falta la imagen mobile, o los slides tienen proporciones distintas y no fijaste la altura.
- Cambiaste el alto de celda y las tarjetas siguen desparejas: falta activar Llenar tarjeta con la foto en Tarjeta de Producto.
- No encontrás la sección Diseño de tienda en el menú: revisá que tu usuario tenga el permiso de diseño. Se habilita en Configuración → Manager, en el grupo de permisos Tienda.