En este tutorial vamos a ver cómo agregar imágenes en el 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 “Imágenes”.
Ahí vas a tener la opción de agregar dos versiones:
- 💻 Desktop: 600×300 px (recomendado) o 300×300 px (cuadrado).
- 📱 Mobile: imagen optimizada para móvil (opcional).
Te sugerimos ambos tamaños porque podés elegir cuánto querés que ocupe la imagen.
No te preocupes, eso lo vamos a ver más adelante 😉
⚠️ Importante:
La imagen se inserta mediante una URL. Te explico cómo obtenerla.
a. vas a ingresar al diseñador, en cualquier borrador.
b. Agregá una sección cualquiera (después la vas a eliminar).
c. Subí la imagen que querés usar para tu menú.
d. Una vez subida, hacé clic derecho sobre la imagen y seleccioná “Inspeccionar”.
Se abrirá una ventana con código: ahí vas a ver marcada la URL de la imagen.
Hacé doble clic sobre ella para seleccionarla y copiá el link:
En Windows: Ctrl + C
En Mac: Command + C
¡Listo! Ya tenés copiado el link ✅ Podés dejar la sección o eliminarla.
Ahora, volvé a la pestaña donde estabas dando estilo al menú y pegá el link en el campo correspondiente. ✨
Vamos con un ejemplo. Este es el menú que elegí para colocar la imagen.
Lo hice sobre el elemento “Exclusivo online”, pero vos podés hacerlo sobre otro, sobre más de uno o incluso sobre todos los elementos del menú.
Además, podés elegir el orden de los elementos.
Para hacerlo, usá las flechas: hacé clic sobre una, mantené presionado el botón del mouse y arrastrá hasta la posición deseada.
¡Resultado con imagen agregada!
Pero también podes agregar
✏️ Texto alternativo
El texto alternativo es útil si querés agregar información adicional sobre ese ítem, por ejemplo: “Exclusivo online”, “Especial día de la madre”.
Es completamente opcional, pero puede ayudarte a destacar o aclarar ese contenido.
🖼️ Aspecto de la imagen
Y por último, podés elegir el aspecto de la imagen.
Hay tres tipos disponibles:
A continuación te dejamos un ejemplo de cada uno:
Cuadrada (1 espacio)
Ancho (2 espacios)
Banner (3 espacios)
🎉 ¡Listo! Tu menú ya tiene imágenes ✨🖼️
🖼️ 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 saber cómo darle diseño a tu menú, seguí este paso a paso: https://ayuda.tiendastic.com/guia/como-darle-diseno-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-🫢/