Cómo editar el campo de precio de oferta de tu tienda en Shopify sin aplicaciones

Cómo editar el campo de precio de oferta de tu tienda en Shopify sin aplicaciones

¿Has notado cómo algunos sitios destacan de manera super atractiva el ahorro que obtienes al comprar un producto en oferta? Es una estrategia visual efectiva para atraer a los clientes.

😍A continuación, te mostraremos cómo lograrlo en tu tienda Shopify, incluso si utilizas temas gratuitos como Dawn que, hasta diciembre de 2023, no incluyen esta función de forma predeterminada...y lo mas divertido, todo sin uso de aplicaciones o cargos extras para ti.

Resaltando el descuento:

El estándar es: el nuevo precio se convierte en el "real", y el antiguo (precio de comparación) se tacha. Te muestro este ejemplo:

Pero, ¿y si quisieras añadir un toque extra para enfatizar este ahorro? como 💸"AHORRA $5" o "15% OFF este mes"

Inspírate con sitios como gymshark.com - ve a las colecciones de ofertas para visualizar estos labels

Algunos temas de Shopify ya tienen esta función, pero en temas gratuitos como Dawn, puedes implementarla fácilmente utilizando el bloque Líquid personalizado de tu tema. Con unos simples cálculos, podrás mostrar el ahorro en dólares o como un porcentaje. A continuación, te presentamos cómo hacerlo:

Ahorro en Valor Dólar:

Es sencillo, debes restar el precio actual (con descuento) del precio de comparación.

 {%- if product.compare_at_price > product.price -%}
    <p>TU AHORRO: {{ product.compare_at_price | minus: product.price | money }}</p>
{%- endif -%}

Ahorro en Porcentaje:

El cálculo es similar, pero mostramos el descuento como un porcentaje.

 {%- if product.compare_at_price > product.price -%}
    <p>{{ product.compare_at_price | minus:product.price | times:100 | divided_by:product.compare_at_price }}% DE DESCUENTO</p>
{%- endif -%}

Añadiendo Estilo:

Para un toque visual, agrega etiquetas <style> en el mismo bloque de Líquid personalizado y asigna una clase, como "savings-amount", para que puedas estilizarlo con CSS.

 {%- if product.compare_at_price > product.price -%}
   <p class="savings-amount">TU AHORRO: {{ product.compare_at_price | minus: product.price | money }}</p>
{%- endif -%}

<style>
.savings-amount {
background: #F5F5F5;
display: inline-block;
padding: 3px 10px;
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
font-size: 12px;
}
</style>

Estilo de insignia alternativo:

Si prefieres un estilo más redondeado, utiliza este CSS y el color lo cambias en background: #(colocas el código de color).

 .savings-amount {
background: #00796b; *AQUI COLOCAS EL COLOR QUE QUIERAS*
color: white;
display: inline-block;
padding: 5px 10px;
border-radius: 40px;
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
font-weight: bold;
}

Eliminar la insignia de 'Venta' que trae por defecto el template:

Finalmente, si deseas quitar la insignia de 'Venta' predeterminada, sigue estos pasos según el tema Dawn:

  • Abre el editor de código de tema y busca main-product.liquid.
  • Encuentra la línea {%- when 'price' -%}, generalmente en la línea 99 para Dawn.
  • Algunas líneas más abajo, encontrarás render 'price' y debajo show_badges: true,. Cambia esto a show_badges: false.

¡Guarda los cambios y listo!

Con estos pasos, resaltarás las ofertas de manera llamativa en tu tienda Shopify, captando la atención de tus clientes de una manera amigable y efectiva.

Regresar al blog