Una de las preguntas más frecuentes en los grupos de emprendedores que diseñan por su cuenta sus tiendas online con Shopify es esta, ¿cómo hacer que el emblema de Oferta muestre el % real de descuento (para los temas gratuitos).
Y es que, imagina esto: Un cliente ve tu producto con un tímido ‘Oferta’ en una esquina. ¿Le emociona? Mehh. ¿Y si en vez de eso ve un ‘¡35% OFF!’? Ahí está el click mental que necesitas.
Tu cliente no quiere pensar, calcular, hacer cuentas.
Si llegaste a este artículo no tienes que imaginarlo, seguramente lo estás viendo en tu propia tienda y sabes que necesitas y quieres cambiarlo.
El resultado será pasar de esto:
A esto:
El problema, por asi llamarlo, es que Shopify muestra por defecto un label genérico para productos en descuento, pero la solución: Reemplazarlo por el porcentaje real, es algo que (sorpresa) puedes hacer en menos de 5 minutos sin ser un ninja del código.
Vamos a ello mis e-Riders!
Paso a paso: Cómo modificar el label "Oferta" por el % real de descuento.
(Lee hasta el final antes de actuar).
¡Importante! Antes de modificar, duplica tu tema (porsimorsi).
1. Entra al backend de Shopify (o sea a tu panel de administrador):
- Ve a Temas > Editar código (¡no temas, es solo copiar y pegar!).
2. Encuentra el archivo clave:
- Busca "card-product.liquid" (usualmente en la carpeta 📁Snippets).
3. Localiza el fragmento a cambiar: {{- 'products.product.on_sale' | t -}}
- Generalmente está en la línea 140 (en los temas actuales de dawn 15.3.0) pero también puedes buscarlo haciendo clik en cualquier parte dentro del archivo y activando el buscador con las teclas Ctrl + F , te abrirá la ventana de busqueda, allí pega y busca este fragmento: {{- 'products.product.on_sale' | t -}}
4. Reempláza esa linea por este código mágico:
{
{{
card_product.compare_at_price
| minus: card_product.price
| times: 100.0
| divided_by: card_product.compare_at_price
| round
-}}
% OFF
{% comment %}
{{- 'products.product.on_sale' | t -}}
{% endcomment %}
Pro tip: El `{% comment %}` deja la línea original "escondida" por si necesitas volver atrás.
- ¿Por qué este cambio es un game-changer?
Psicología del comprador: Un número (% OFF) genera más urgencia que un texto plano. - Transparencia: Los clientes ven exactamente cuánto ahorran (y eso vende solo).
- Diferencial: La mayoría de tiendas no lo hacen. ¡Destaca!
¡Haz la prueba y cuéntame!
Ahora toca acción: aplica el cambio, refresca tu tienda y mira cómo esos % destacan más que el ‘Oferta’ de siempre. ¿Notas la diferencia? Deja un comentario (o un grito de victoria) cuando lo pruebes.
Y si te atascas, ¡aquí estoy para ayudarte! 🛠️🚀
EXTRA BONUS: si quieres destacar tus ofertas aún más puedes incluir en la sección de CSS personalizado de tu "colección destacada" instrucciones para agrandar el texto o colocarle un borde al emblema:
Recuerda que el color de fondo depende del esquema de colores que le asignes.
Te dejo el css personalizado para agrandar la fuente y colocar ese borde.
{
.badge {
font-size: 14px;
font-weight: bold;
border: 1px solid white;
}
Cómo funciona este CSS:
Font-size ajusta el tamaño de la letra, cambialo al tamaño que quede bien con tu diseño (en el ejemplo usé 14px.)
Hace que la letra sea vea en negrita (bold), con font-weight: bold, puedes eliminarlo si no lo necesitas.
Y border: 1px solid white, añade un borde de 1px en color blanco, puedes cambiar el solid white por otro color si lo deseas según los colores de tu marca.
*Para no colocar este código en cada sección de colección destacada y que funcione siempre en todas también existe algo fácil de hacer pero lo hablaremos en otro artículo.
Nos vemos...