BA Google Maps: cómo mostrar tu ubicación en PrestaShop (paso a paso)

Paso a Paso

MÓDULO

BA GOOGLE MAPS

Paso 1) Introducción

Este módulo te permite mostrar un mapa embebido de Google Maps en tu tienda, ideal para que el cliente encuentre tu ubicación rápidamente. Puede visualizarse en Home y/o en la página de Contacto, según cómo lo configures.

Paso 2) ¿Para qué sirve?

• Mostrar la ubicación exacta del negocio en la tienda online
• Mejorar la confianza del cliente al ver una dirección real
• Facilitar visitas al local con un mapa clickeable y familiar
• Reducir consultas tipo “¿dónde están?”

Paso 3) Beneficios

• Más credibilidad y experiencia de compra más completa
• Mejor usabilidad en móviles (el cliente abre Maps en 1 toque)
• Refuerza la identidad local del negocio
• Aporta contexto en la página de Contacto

Paso 4) Acceso a la configuración del módulo

Para configurarlo:

• 1.Ir a MÓDULOS
• 2.Buscar “BA Google Maps”
• 3.Hacer clic en Configurar

Paso 5) Obtener el código de Google Maps (iframe)

El campo obligatorio es:

Código de Google Maps (iframe)

Aquí se debe pegar el código HTML que Google Maps genera para insertar el mapa en un sitio web.

Para obtenerlo, seguir estos pasos:

• 1.Ir a Google Maps
• 2. Ingresar en: https://maps.google.com
• 3.Buscar la dirección del negocio
• 4. Ejemplo:
• 5. Av. San Martín 7000, Villa Devoto, CABA
• 6.Hacer clic en “Compartir”
• 7. Una vez ubicado el punto en el mapa, presionar el botón “Compartir”.
• 8.Seleccionar “Insertar un mapa”
• 9. Se abrirá una ventana con dos pestañas.
• 10. Elegir la pestaña: Insertar un mapa.
• 11.Copiar el HTML del iframe
• 12. Google mostrará un código similar a:

<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Hacer clic en “Copiar HTML”.

• 1.Pegar el código en el módulo
• 2. Volver a PrestaShop.
• 3. Pegar el código completo dentro del campo:

Código de Google Maps (iframe)

Importante:

• No modificar el código.
• Pegar el iframe completo.
• Si el iframe trae altura propia, el módulo respetará la configuración de altura definida debajo.

Paso 6) Configurar Altura del mapa

Campo: Altura (px)

Este valor define la altura visible del mapa en píxeles.

• Valor recomendado estándar: 350 px
• Rango permitido: entre 150 y 1200 px
• Si el iframe trae una altura propia, el módulo la respetará.

Ejemplo práctico:

Altura configurada: 350

Resultado: el mapa tendrá una altura equilibrada en Home y Contacto.

Si querés un mapa más protagonista:

Altura configurada: 500

Resultado: el mapa ocupará más espacio visual.

Recomendación profesional:

Para Home utilizar entre 300 y 400 px para no romper el diseño.

Paso 7) Configurar Ancho del contenedor

Campo: Ancho del contenedor

Este desplegable define cómo se comporta el mapa respecto al ancho de la página.

Opciones habituales:

• Estándar 1200px centrado
• Ancho completo (full width)

Ejemplo práctico:

Seleccionar: Estándar 1200px centrado

Resultado: el mapa respeta el ancho del diseño del tema.

Seleccionar: Ancho completo

Resultado: el mapa ocupa todo el ancho de la pantalla.

Recomendación:

Si tu tema usa diseño boxed, elegir estándar.

Si tu diseño es moderno y amplio, usar full width.

Paso 8) Mostrar en Home (displayHome)

Interruptor: Sí / No

Define si el mapa se mostrará en la página principal.

• Activado → El mapa aparece en Home.
• Desactivado → No se muestra en Home.

Ejemplo:

Mostrar en Home: Sí

Resultado: el mapa se visualiza en la página principal, generalmente al final.

Uso recomendado:

Ideal para negocios físicos que quieran reforzar ubicación desde el inicio.

Paso 9) Mostrar en Contacto

Interruptor: Sí / No

Define si el mapa se mostrará en la página de Contacto.

• Activado → Se muestra dentro de la página de contacto.
• Desactivado → No aparece allí.

Ejemplo:

Mostrar en Contacto: Sí

Resultado: el cliente verá el mapa debajo del formulario o del contenido de contacto.

Recomendación profesional:

Siempre activarlo en Contacto, ya que es el lugar más lógico para un mapa.

Paso 10) Guardar configuración

Una vez configurados:

• Código iframe
• Altura
• Ancho
• Mostrar en Home
• Mostrar en Contacto

Presionar Guardar.

Conclusión

BA Google Maps es un complemento esencial para tiendas con presencia física, ya que transforma la ubicación en un elemento visual integrado dentro del sitio, fortaleciendo la confianza, la usabilidad y la conversión.

Si querés, ahora podemos:

• Preparar la portada final del manual completo
• Unificar todos los módulos creados por Baires en un documento maestro
• O comenzar el próximo módulo paso a paso