En este tutorial vamos a ver cómo darle diseño 🖌️ al menú, paso a paso:
1. Ingresá al backoffice de Tiendastic → Tienda online > Navegación.
2. Buscá el menú al que querés agregarle la imagen.
3. Entrá en la solapa “Diseño” del menú que quieras modificar
🎨 Pestaña Diseño
En esta sección vas a poder definir la disposición visual del menú: espacios, alineación, separadores y estilo general.
🔹 Espacios de menú
Permite elegir cuántos bloques querés mostrar dentro del menú desplegable
💡 Importante: Esta opción aplica solo a los elementos hijos, es decir, los que se despliegan dentro del principal.
Espacios de menú
Si elegís la opción “Hasta 3 espacios”, podés imaginarlo como si tu menú tuviera 3 columnas. En el caso de incluir una imagen, esa imagen ocupa uno o más espacios según su formato:
-
Cuadrada: ocupa 1 espacio.
-
Ancho: ocupa 2 espacios.
-
Banner: ocupa 3 espacios.
A continuación te dejamos un ejemplo de cómo se vería cada uno 👇
Espacio 3 columnas
Espacio 4 columnas
Espacio 5 columnas
🔹 Alineación
Define hacia qué lado se alinean los elementos del menú (izquierda, centro o derecha)
En el ejemplo que vemos en la imagen, “Perfumes Hombre” (marcado en rojo) está alineado a la derecha, mientras que “Perfumes Mujer” (marcado en verde) está alineado a la izquierda.
🔹 Separador
Si activás el check ✅ “Mostrar como línea separadora”, se agrega una línea divisoria entre columnas o ítems del menú.
Podés elegir también el color de esa línea en “Color Separador”.
🔹 Tema del Menú (por defecto)
Estas configuraciones se aplican a todo el menú, salvo que personalices algún ítem en particular.
Color de fondo del menú: Define el color general del fondo del desplegable.
Ejemplo: Black Friday
Color de títulos: Cambia el color de los títulos principales (marcado en color rosa).
También podés ajustar el grosor del título, eligiendo entre Regular, Semi-Bold o Bold.
Color de enlaces: Modifica el color del texto de los enlaces (los ítems que están debajo de cada título, marcados en color verde).
Además, podés ajustar su grosor, eligiendo entre Light, Medium o Bold.
Color hover de enlaces: Define el color que se mostrará cuando el usuario pase el mouse sobre un enlace (marcado en color azul).
👉 Esto ayuda a resaltar visualmente la interacción y mejora la experiencia de navegación.
Ejemplo visual:
💾 Recordá que, para ver estos cambios aplicados, siempre tenés que hacer clic en “Guardar cambios”. ✅
🎉 ¡Listo! Tu menú ya tiene el estilo que queres!
🖼️ Si querés saber cómo agregar imágenes a tu menú, seguí este paso a paso: https://ayuda.tiendastic.com/guia/como-agregar-imagenes-a-mi-menu/
🎨 Si querés saber cómo darle estilo a tu menú, seguí este paso a paso: https://ayuda.tiendastic.com/guia/como-darle-estilo-a-mi-menu/
💡 Si querés un extra para tu menú, seguí este paso a paso: https://ayuda.tiendastic.com/guia/como-darle-un-extra-a-mi-menu-🫢/