Widget de mapa para Shopify

Por qué una sección del tema es mejor que una app de Shopify

La mayoría de las fichas de «apps de mapas» piden una instalación, permisos sobre los datos de tu tienda y una cuota mensual — para lo que en el fondo es un solo iframe. Esta es la alternativa honesta: un único archivo Liquid que vive en tu propio tema. No pide permisos de la tienda, no añade scripts a tus páginas, no envía nada a ningún servidor y no cuesta nada. Las únicas peticiones externas que hacen tus visitantes son el iframe del mapa en sandbox de whatismylocation.ai y sus teselas de OpenStreetMap: sin cookies de Google, sin el lastre de los banners de consentimiento y, si el servicio dejara de estar disponible, el iframe falla en silencio sin romper tu página. Borra el archivo de la sección y no queda ni rastro.

Descarga whatismylocation-shopify-sections.zip — las dos secciones más un README, unos pocos kilobytes. Después sigue los pasos de instalación de abajo.

Instalación en unos dos minutos

Dos mitades: pegas el archivo una vez y luego lo usas como cualquier sección integrada.

Pega el archivo: panel de Shopify ▸ Tienda online ▸ Temas ▸ ⋯ ▸ Editar código. En la barra lateral izquierda, bajo Sections, pulsa Agregar una nueva sección, nómbrala whatismylocation-map, borra el contenido de ejemplo y pega todo el contenido de whatismylocation-map.liquid: el bloque {% schema %} del final es el que construye tu panel de ajustes, así que debe ir incluido. Guarda.

Úsala: abre el editor de temas (Personalizar), ve a tu página de contacto (o a cualquier página), pulsa Agregar sección y elige WhatIsMyLocation Map. El panel de ajustes aparece a la izquierda. Hasta que introduzcas coordenadas, la sección muestra un aviso amable que te dice exactamente qué necesita.

Consigue las coordenadas en el generador de mapas insertables — escribe tu dirección y luego arrastra el pin hasta tu entrada antes de copiarlas. La sección lleva tus coordenadas definitivas, así que el pin ya no puede desplazarse después.

Las sucursales son bloques

Las tiendas con varias ubicaciones se llevan la mejor parte: en el editor de temas, cada sucursal es un bloque — pulsa Agregar sucursal, rellena la latitud, la longitud, una etiqueta y una dirección, y reordénalas arrastrando (hasta 10). El mapa se ajusta automáticamente a todas las sucursales y los pines van numerados para coincidir con la lista. Los visitantes ven el panel de ubicaciones: un acordeón junto al mapa en el escritorio y una tira de tarjetas deslizable en el móvil, con indicaciones para cada sucursal e iconos opcionales de «Abrir en Google Maps / Apple Maps». La disposición del panel (auto, lateral, inferior, ninguna) y la animación de cambio (suave, fundido, animada, ninguna — quien tenga activada la reducción de movimiento siempre ve la versión instantánea) son menús desplegables del mismo panel.

Todos los ajustes, uno por uno

El mismo zip incluye whatismylocation-widget.liquid: el widget de buscar mi ubicación como segunda sección (tema, modo compacto o completo, altura), para páginas de envío y buscadores de tiendas.

Solución de problemas

La sección no aparece en Agregar sección. El archivo debe estar en Sections (no en Snippets ni Assets) y el pegado debe incluir el archivo completo. Si se cortó el bloque {% schema %}, Shopify rechaza u oculta la sección. Vuelve a pegar el archivo entero y guarda.

Error «Invalid schema» al guardar. Un pegado parcial, casi siempre por una llave de cierre que falta al seleccionar hasta el final menos una línea. Pega otra vez el archivo completo; no edites el schema a mano si no conoces Liquid.

El mapa se ve gris. Las teselas del mapa vienen de tile.openstreetmap.org; un bloqueador de anuncios agresivo o una red corporativa pueden bloquearlas. Compruébalo en el móvil con datos: tus clientes casi seguro lo ven bien.

El pin no está en mi puerta. Vuelve a generar las coordenadas en el generador, arrastra el pin hasta tu entrada y pega los nuevos valores en los ajustes de la sección.

Los cambios no se ven en la tienda publicada. Has editado un tema borrador o sin publicar: haz el cambio en el tema publicado (o publica el que editaste). El widget en sí no tiene nada que guardar en caché.