Cómo enseñar los descuentos de Shopify en la ficha sin cargarte el SEO

Escena que se repite en la mitad de las tiendas Shopify del planeta: el dueño monta una promoción del 20%, se frota las manos… y el descuento no aparece por ningún lado en la ficha de producto. Shopify lo aplica en el checkout, sí, pero el pobre comprador que está mirando el producto ve el precio de siempre. El cartel de rebajas, guardado en el almacén.

Es un clásico, y la forma en que la gente lo «arregla» suele ser peor que la enfermedad. Vamos a verlo, porque tiene más chicha de SEO de la que parece.

El apaño del compare_at_price (y por qué te dará dolores de cabeza)

La solución de manual es meter el precio original en el campo compare_at_price a mano para que el tema pinte el tachado. Funciona… hasta que tienes 800 productos, cambias la oferta y se te queda todo desincronizado. Además pisas un campo que Shopify usa para su propia lógica de rebajas e informes. Mantenerlo a mano es un trabajo de becario eterno, y de los aburridos.

El apaño peor: apps que meten un kilo de JavaScript

Aquí es donde entramos los del SEO a llorar. Muchas apps de badges pintan el precio con JavaScript que se ejecuta en el navegador del cliente. ¿Traducción? Más scripts, más render bloqueado, peores Core Web Vitals. Y desde que los Core Web Vitals son señal de posicionamiento, cambiar una fuga de conversión por un frenazo de velocidad es pan para hoy y hambre (de tráfico) para mañana. Google no te lo va a agradecer.

La forma correcta: en el servidor, en Liquid, leyendo los descuentos de verdad

Lo suyo es leer los descuentos nativos de Shopify (los automáticos y los códigos) desde el Admin API, calcular el precio final por variante y pintarlo en Liquid, del lado del servidor. Sin JS de bloqueo, sin tocar compare_at_price y sincronizado en tiempo real con webhooks cuando cambias una oferta. Rápido, limpio y amigable con el crawler.

¿Tachado o badge? Depende del descuento

Un detalle que casi nadie hace bien: no todo descuento merece un precio tachado. Los automáticos de producto (un -20% para todo el mundo, sin mínimos) sí: ahí el tachado es honesto. Un código, un descuento de envío o uno con mínimo de compra piden un badge («con el código VERANO»), porque el precio final depende de que el cliente haga algo. Mezclar los dos es engañar, y Shopify (y tu tasa de devoluciones) te lo hará notar.

Un ejemplo de app que lo hace justo así es Discount Display: precio tachado para los automáticos, badge para los códigos, todo en Liquid. La han montado Pango Studio, la agencia Shopify de Madrid, que son unos obsesos del rendimiento (y se nota en que no te cuelan JavaScript de relleno).

La moraleja SEO

Enseñar tus ofertas donde el cliente decide es de cajón para la conversión. Pero hazlo sin sacrificar velocidad: cada décima de segundo que le robas a la ficha se la estás regalando a la competencia en la SERP. Server-side siempre que puedas; el navegador del cliente no es tu servidor de plantillas.

Y si tu tema es un espagueti y no sabes por dónde meterle mano sin romperlo, ya sabes a quién llamar: para estas cosas están los expertos en Shopify de Pango. Nosotros solo hemos venido a recordarte que un badge bonito no vale nada si te tira los Web Vitals por el barranco.