Shopify

Cómo insertar Google Maps en Shopify

Añade un mapa interactivo a la página de contacto, productos o secciones de tu tienda Shopify sin instalar una aplicación ni configurar una clave API.

Actualizado el 20 de octubre de 20266 min de lectura

Shopify permite pegar un iframe en campos y secciones que aceptan HTML o Liquid personalizado. El método adecuado depende del tema, pero el mismo código responsive puede utilizarse en una página, una plantilla o una descripción de producto.

Paso 1

Genera el código de Google Maps para Shopify

  1. Abre el generador de mapas.
  2. Busca la dirección de la tienda o introduce sus coordenadas.
  3. Elige el zoom y el tipo de mapa.
  4. Selecciona Ancho completo (100 %) y mantén el modo responsive.
  5. Pulsa Generar código y copia el iframe.

Paso 2

Añade el mapa a una página de Shopify

Este método resulta adecuado para una página de contacto, información de la tienda, recogida local o cómo llegar.

  1. En Shopify Admin ve a Tienda online → Páginas.
  2. Abre o crea la página donde aparecerá el mapa.
  3. En el editor selecciona el botón <> para mostrar el HTML.
  4. Pega el iframe en la posición deseada.
  5. Guarda y visita la página pública para comprobar el resultado.
Cambia a la vista HTML antes de pegar el código. Si lo insertas como texto enriquecido, Shopify puede mostrarlo como texto o eliminar la etiqueta iframe.

Paso 3

Inserta el mapa desde el editor del tema

Los nombres de las secciones cambian según el tema. Muchos temas modernos incluyen una sección de Liquid personalizado que admite el iframe completo.

  1. Ve a Tienda online → Temas y pulsa Personalizar.
  2. Abre la plantilla de inicio, contacto o la página correspondiente.
  3. Selecciona Añadir sección y busca Liquid personalizado, HTML, código o contenido personalizado.
  4. Pega el iframe y revisa la vista previa para ordenador y móvil.
  5. Pulsa Guardar.
Si tu tema no ofrece una sección compatible, utiliza el método de página HTML o pide al desarrollador del tema una sección Liquid específica.

Muestra un mapa en una página de producto

Un mapa en la ficha de producto puede ser útil para recogidas físicas, entradas de eventos, alojamientos o servicios que se prestan en un lugar concreto.

  1. Abre Productos en Shopify Admin.
  2. Selecciona el producto que quieres modificar.
  3. Abre la vista HTML de la descripción con <>.
  4. Pega el iframe, guarda y comprueba la ficha publicada.

Consejos y solución de problemas

  • El mapa no aparece: revisa la página pública; algunos editores no renderizan iframes dentro de su vista previa.
  • El tema elimina el iframe: utiliza una sección de Liquid personalizado en lugar de texto enriquecido.
  • El mapa es demasiado ancho: activa el modo responsive y evita valores fijos mayores que el contenedor del tema.
  • Zoom recomendado: para una sola tienda suele funcionar bien un nivel entre 14 y 16.
  • Dirección ambigua: utiliza coordenadas exactas para colocar el marcador correctamente.

Preguntas frecuentes sobre Google Maps y Shopify

¿Necesito una aplicación de Shopify?

No. Puedes insertar el iframe en una página o sección que acepte HTML o Liquid personalizado.

¿Necesito una clave API?

No para el iframe generado con este método.

¿El mapa afecta al rendimiento?

El mapa carga recursos externos, pero la carga diferida reduce su impacto inicial.

¿Puedo mostrar varias tiendas?

Sí. Crea un mapa público con marcadores en Google My Maps y pega su enlace en el generador.

Crea el mapa de tu tienda

Genera un iframe responsive para Shopify sin aplicaciones ni clave API.

Abrir el generador