Caso real: madridhiking.com — Madrid Hiking, tienda Shopify (Online Store 2.0) con tema custom basado en Dawn, idiomas EN / ES / DE, afiliado Hypershell y servicio de prueba de exoesqueleto en Madrid.
La tienda “funcionaba”. El checkout cobraba. El catálogo se veía. Pero el SEO no empujaba y el español se rompía: en /es, un “Más detalles” te mandaba a una página en inglés. Los cambios del tema a veces no aparecían. Las landings de Hypershell tenían poco texto, meta floja y un hero con el titular pegado abajo. Eso no se arregla instalando otra app. Ahí entra un programador Shopify.
Este artículo es el diario de esa reparación: diagnóstico, Liquid, contenido multiidioma, CSS y sitemap. Sin inventar posiciones en Google. Solo lo que se tocó y por qué.
Qué hace de verdad un programador Shopify (y qué no)
Un desarrollador Shopify no es alguien que solo cambia colores en el editor. Cuando hay Markets, tema custom y SEO en tres idiomas, el trabajo es otro:
- Entender qué tema está sirviendo de verdad (live vs preview).
- Usar las URLs localizadas de Shopify, no rutas hardcodeadas.
- Escribir y maquetar contenido que Google pueda leer en ES / EN / DE.
- Corregir CSS, schema, metas e imágenes sin romper el afiliado ni la UX.
Instalar un plugin de traducción y rezar no basta. Si la URL y el copy no van juntos, el SEO Shopify falla aunque el diseño “se vea bien”.
Síntomas en Madrid Hiking
- En la interfaz en español, “Más detalles” abría
/pages/...sin prefijo de idioma → página en inglés. - Las landings de prueba / Hypershell tenían poco contenido para rankear: H1 y meta débiles, emojis en la description, HTML escapado (
<p>), pocas FAQ y casi sin schema. - Varias secciones repetían la misma foto; una era un collage con botón “Comprar” (poco sentido en la página de prueba).
- El hero dejaba el H1 y el CTA abajo del bloque (CSS con
align-items: end). - Los cambios “no se veían” hasta apuntar al tema correcto o usar
preview_theme_id. - El sitemap XML llevaba
lastmodantiguos en páginas clave (sobre todo Hypershell), meses sin refrescar.
Páginas centrales del caso:
[CAPTURA: menú o botón “Más detalles” en /es abriendo una URL sin /es/]
[CAPTURA: hero con texto abajo antes del arreglo CSS]
Diagnóstico: cinco causas, un mismo patrón
1) Tema live vs tema “pegajoso”
En Shopify es fácil editar un tema que no es el que sirve la tienda. El cliente guarda, refresca… y no ve nada. Hasta que confirmas el theme ID live o abres con preview_theme_id, estás depurando a ciegas. Un experto Shopify empieza por ahí: qué tema está publicado y qué archivo Liquid estás tocando.
2) URLs hardcodeadas en multiidioma
En un tema Dawn custom, un enlace tipo /pages/probar-exoesqueleto-para-caminar ignora el mercado/idioma actual. En Markets (EN / ES / DE) eso es veneno: el visitante está en español y aterriza en inglés. La tienda “funciona”, pero la señal SEO y la confianza se rompen.
3) Locales con contenido demasiado fino
Shopify indexa lo que hay en la página. Si la landing tiene un H1 genérico, meta con emojis y tres párrafos, no hay milagro de ranking. Además, el HTML escapado en el admin hacía que se vieran literales <p> en lugar de párrafos reales: mal para humanos y peor para crawlers.
4) CSS del hero
align-items: end empujaba el bloque de texto al fondo del hero. En móvil se notaba aún más: el mensaje principal competía con el borde inferior en lugar de leerse como titular.
5) Sitemap gestionado por Shopify
El XML de Shopify usa la fecha de actualización de cada page/product. Si nadie toca la página, el lastmod se queda viejo. No es un “hack SEO mágico”, pero sí una señal limpia: conviene que las landings importantes reflejen la última edición real.
Solución paso a paso
- Trabajar sobre el tema live correcto (no un duplicado sticky). Confirmar publicación y, si hace falta, preview con el ID adecuado.
- Sustituir rutas fijas por URLs localizadas de Shopify en Liquid.
- Ampliar contenido de ranking en EN / ES / DE: intro, beneficios, pasos, FAQ, sección “solo Hypershell”, enlace de afiliado en pestaña nueva.
- Corregir el escape de Liquid para que el texto SEO se pinte como HTML, no como entidades.
- Sobrescribir title/description en
theme.liquidpara los handles clave de las landings. - Imágenes únicas + alt descriptivos; quitar la creativa con “Comprar” de la página de prueba.
- Centrar los héroes en CSS (vertical) en ambas landings.
- Refrescar lastmod del sitemap tocando las pages vía Admin API.
- Crédito limpio en el footer: solo la frase “Programador Shopify” enlazada a la money page,
target="_blank".
Liquid: el enlace que respeta el idioma
En lugar de una ruta fija, el botón “Más detalles” pasó a resolver la página por handle y usar su URL localizada:
{% if pages['probar-exoesqueleto-para-caminar'] != blank %}
<a href="{{ pages['probar-exoesqueleto-para-caminar'].url }}">Más detalles</a>
{% endif %}Con pages['handle'].url, Shopify mantiene el prefijo correcto en ES / EN / DE. Es el detalle típico que solo un programador Shopify (o un desarrollador Shopify acostumbrado a Markets) detecta a tiempo.
SEO en tres idiomas, no “traducir el H1 y ya”
En las landings de prueba y Hypershell se alinearon:
- H1, title y meta description con keyword útil (sin emojis decorativos en la meta).
- Bloques de contenido real: intro, beneficios, cómo funciona, FAQ.
- FAQ + schema para dar estructura a las preguntas habituales.
- Alt en imágenes (Hypershell, prueba en Madrid, detalle de producto).
El title/description de los handles clave se reforzó desde theme.liquid para no depender solo del campo genérico de la page cuando el tema no lo priorizaba bien.
[CAPTURA: landing ES con H1 claro y secciones de contenido / FAQ]
Imágenes y hero
Se sustituyeron fotos repetidas por capturas distintas del exoesqueleto. Se eliminó de la página de prueba la creativa tipo collage con CTA “Comprar”: esa página vende la experiencia de prueba, no un botón de compra genérico encima de todo. En CSS, el hero pasó a centrar el contenido en vertical para que H1 y CTA se lean de un vistazo.
Sitemap: tocar la page para actualizar la fecha
Shopify no te deja “editar el lastmod a mano” como en un XML estático. La vía limpia: actualizar las pages relevantes (Admin API / Admin) para que el sitemap regenere fechas actuales. Tras el refresh, las landings Hypershell dejaron de arrastrar un lastmod de meses atrás.
Footer: crédito sin ruido
En el pie: Design by: Programador Shopify — solo esa frase enlazada, sin widgets ni textos de más.
Antes / después (lo medible sin inventar rankings)
| Área | Antes | Después |
|---|---|---|
| Idioma | “Más detalles” en /es abría página en inglés | URL localizada; la navegación ES se queda en ES |
| SEO on-page | H1/meta flojos, HTML escapado, poco FAQ/schema | Title/H1/meta alineados; contenido EN/ES/DE; FAQ + schema |
| Imágenes | Repetidas + collage “Comprar” en página de prueba | Fotos distintas, alt descriptivos, creativa de compra fuera |
| Hero | Texto abajo (align-items: end) |
Contenido centrado en vertical |
| Sitemap | lastmod antiguo en pages clave |
Fechas actualizadas tras editar las pages |
Resultado operativo: páginas indexables con señales on-page coherentes, multiidioma que no se pisa a sí mismo, y una UX de landing más clara. No afirmamos “somos nº1 en Google”: el ranking lo decide Google con el tiempo. Lo que sí controlas es no sabotearte con enlaces mal localizados, meta rota y contenido vacío.
Aprendizajes (para dueños de tienda Shopify)
- En Shopify multiidioma, URL + copy + mercado tienen que ir juntos. Si fallas uno, el SEO se tuerce.
- Un tema Shopify personalizado (Dawn u otro) exige disciplina: handles, locales y CSS del hero no se improvisan con apps sueltas.
- Si “el cambio no se ve”, primero confirma el tema live. Luego el código.
- Contenido fino + meta con ruido (emojis, HTML escapado) no rankea. Un programador Shopify también escribe y estructura la página, no solo “pone el logo”.
- El sitemap de Shopify refleja cuándo actualizaste la page. Tras un rediseño SEO, conviene tocar esas páginas a propósito.
Conclusión
En madridhiking.com el problema no era “Shopify roto”. Era un conjunto típico: tema confuso, enlaces sin localizar, landings demasiado delgadas, hero mal alineado e imágenes que restaban en lugar de ayudar. Un programador Shopify lo aborda como reparación: tema correcto → Liquid multiidioma → SEO en tres idiomas → CSS e imágenes → fechas del sitemap → crédito limpio.
Si tu Shopify “va bien” pero no posiciona —o el español te manda a inglés— no necesitas otra app. Necesitas un programador Shopify que arregle tema, SEO y Markets a la vez.
Programador Shopify — desarrollo Liquid, temas a medida, SEO y multiidioma. Trato directo y presupuesto claro.