Shopify: Cómo mostrar el porcentaje de descuento guardado

Por Cesar Beltran
SHOPIFY: Cómo mostrar el porcentaje de descuento ahorrado creado por los desarrolladores de Shopify

¿Alguna vez quisiste mostrar un pequeño "Ahorró 25%" en tu tienda, sin hacerlo manualmente?

En este tutorial rápido, te mostraremos cómo agregar un descuento porcentual a tu tienda y dejar que el código Liquid de Shopify haga todo el trabajo.

Nota rápida: el código de esta publicación no funcionará con temas que usen JavaScript para cargar los precios. Eso es un poco más profundo de lo que se describe aquí (esto incluye nuestro tema bilingüe, que no funciona con este fragmento de código). Intentaremos actualizar esta publicación en algún momento para que sea compatible con ella. Sin embargo, con otros temas, debería funcionar. Sólo un aviso. ¡Gracias!

¿Cuándo querríamos esto?

La mayoría de los temas de Shopify vienen con banners de "venta" incorporados que le permiten mostrar cuando un producto está en especial o con descuento.  Para añadir a esto, es posible que desee decir:

era de $20,00$15,00 – se ahorra 25%

Paso 1: encuentre su plantilla de producto

En tu Administrador de Shopify, ve a temas > editor de plantillas > producto. Liquid.  Este es probablemente el lugar donde se almacenan los precios.  Hacer una búsqueda de "precio".  En algún lugar de la plantilla, debería ver un fragmento de código:

{{ product. price }}

Aquí es donde tu tema muestra el precio del producto: en nuestro ejemplo anterior, $15,00.

Paso 2: Inserte este código

Nota aburrida primero: ¡ Haz una copia de seguridad!

Next, insert the following piece of code wherever you want it to appear.  For example, if you want to show the % discount next to the price, place the code next to {{ product. price }}.

Este código calcula y muestra el porcentaje desactivado, redondeado al número entero más cercano.
Por ejemplo – se ahorra un 25%

{% if product.compare_at_price_max > product.price %}You save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{% endif %}

¿Qué hace ese código exactamente?

El código de arriba dice:

  • If the product is on special right now ( {% if product.compare_at_price_max > product.price %} )
  • Mostrar el texto "guardar" y, a continuación,
  • Una pieza de matemáticas de larga duración, encontrando el descuento ($5) como un porcentaje del precio original ($20), cuidadosamente formateado en un porcentaje sin puntos decimales.

Variaciones

Si desea decir algo que no sea "guardar", simplemente cambie el texto en el fragmento de código.  Por ejemplo, si desea "descuento: 25%", simplemente cambie "guardar" para decir "descuento:" en el código anterior.

Shopify-show-Percentage-Discount-300x175

***

Gracias por consultar nuestra Shopify Insider blog @ Blackbelt Commerce. Por favor, asegúrese de revisar nuestra Cartera. También tenemos algunas recomendaciones principales del blog para que usted Compruebe hacia fuera; More Shopify Design Strategies, 4 Ways to show social proofsShopify incoming sales,   Y Las redes sociales.  Vigila las nuevas publicaciones del blog.

¿Tiene alguna pregunta? Déjalos en los comentarios de abajo y nos volveremos a usted tan pronto como sea posible.

¿Cuáles son las principales tiendas de Shopify?

Toma lo que aprendimos y utilíla para tu ventaja.
Obtenga nuestra investigación exclusiva: Insights de más de 500 tiendas Shopify.

Impulsado por ConvertKit
Cuéntales a los demás sobre este post

Comentarios 40

  1. Hola gran tutorial!

    Pregunta: ¿hay alguna posibilidad de que esto se pueda aplicar a una colección específica en lugar de un descuento en toda la tienda?

    Mejor
    Liz

    1. Hola Liz,
      ¡ Me alegro de que te guste! Hmm... que se podría hacer. ¿Podría apuntarme a un enlace de una colección que le gustaría usar? Si puede aclarar un poco más, haré todo lo posible para encontrar una manera de hacerlo.

      Debe ser capaz. Podría tener una declaración if en el código, para decir:

      Si el título de la colección es "colección-título-aquí", a continuación, mostrar el descuento. es decir, en líquido:

      {% if collection.handle == ‘collection-title-here’ %}
      [CÓDIGO PARA MOSTRAR EL DESCUENTO VA AQUÍ%}
      {% endif %}

      ¡ Espero que ayude!
      Tristan.

  2. Hola, chicos

    I am having a hard time trying to locate the {{ product.price }}. Is there a different term that might have been used?
    Estoy tratando de hacer básicamente lo que este artículo está hablando.
    Si pudieras ayudar eso sería genial.

    La plantilla que estoy usando es Megatronic.

    saludos
    Ali

    1. Hola Ali,
      No estoy tan familiarizado con el tema Megatronic... pero le sugiero que intente buscar en "fragmentos de código" si no lo ve en producto. líquido. Hay muchos que son algo como ' producto-forma. líquido ' o similar. Intente buscar en todos los archivos "snippet" y hacer un Ctrl + f para "product. Price". ¡ Espero que ayude!

  3. Hola, chicos

    I added this to my product.liquid file and for my products, the selector was {{ product.price | money }}.

    Agregué el recorte del código proporcionado y dijo el siguiente error en el front-end:

    "Se ahorra un error de líquido: tipo de argumento incorrecto Nil (RegExp esperado)%"

    ¿Pensamientos? Mi tema podría usar JS, no es positivo en eso. -ZL

        1. ¡ Hola Josh! No es tanto que JS no va a renderizar el líquido correctamente-es sólo que con los temas que utilizan JS, el código necesario para que se encuentra en un lugar diferente. En otras palabras – diferentes temas, diferentes fragmentos de código para cambiar el precio – es por eso que realmente no podemos dar orientación general aquí en este artículo. No estoy tan seguro de megatrónico, ya que no he utilizado mucho el tema-mis disculpas!

          Si ves un archivo llamado "apps. js" o similar, podría ser un buen lugar para empezar. La otra opción sería ponerse en contacto con Shopify (ya que apoyan ese tema) y ver si pueden apuntarlo. La mejor de las suertes!

  4. Hi I am having somewhat of the same problem with my site.. I have looked for the {{product.price}} in product.liquid form but all I can see is this

    {{ product.price_min | money }}{% if product.price_min < product.compare_at_price_min %} {{ product.compare_at_price_min | money }}{% endif %}

    ¿Introduciría el código justo después de este??? También estoy buscando para entrar en una tienda de descuento... ¿Cómo lo haría, por favor???

          1. Hola Callum,
            He tenido una mirada en su sitio. De hecho, está usando JavaScript para actualizar los precios en función de la variante, por lo que esta solución no funciona (es más compleja y muy dependiente del tema).

            Lo que esto significa es: si voy a la página de su producto y selecciono un tamaño de fotograma diferente, el precio se actualiza. Así es como sabemos que usa JavaScript.

            Esto tendría que hacerse a medida. Se podría hacer en aproximadamente 2 horas de desarrollo ($ 120/hr). Siéntase libre de hacerme saber si le gustaría seguir adelante y podríamos conseguir que la próxima semana. Otra pregunta bienvenida. Salud – Tristan.

  5. G'day Tristan,

    Con la esperanza de su ayuda y para obtener esta característica en mi sitio.

    I can find similar to “{{ product.price }}” but not exact.

    Cualquier ayuda en el asunto sería muy apreciada.

    1. Hola Jonathan,

      ¿Podría decirme qué encontró? No puedo verlo sin mirar dentro de su tema, y parece ser costumbre (tomé una mirada rápida). Si se parece a producto. precio o similar, que es probablemente el uno para probar. Puede hacer una copia de seguridad y probarlo.

  6. Gracias por la rápida respuesta Tristan.

    Esto es lo que tengo. Lo más cerca que puedo conseguir tiene un '% ' al lado del producto. Price.....

    {% if product.available %}

    {% else %}

    {% endif %}

    {% if product.compare_at_price > product.price %}

    {{ product.compare_at_price_max | money }}
    {{ product.price | money }} INC GST.

    {% else %}
    {{ product.price | money }} INC GST.
    {% endif %}

    1. Hola Jonathan,
      Me alegro de que estés progresando. No puedo ir mucho más allá en este post. Si tu tema usa JavaScript, podría ser más complicado que en esta publicación (como mencioné en la parte superior de la publicación). Si tienes un desarrollador web, podrías involucrarlos; de lo contrario, podríamos ayudarle a configurar en aproximadamente 2 horas (como un mini-proyecto). No dude en ponerse en contacto con nosotros a través de nuestra página de "contacto" si lo desea. Alternativamente se puede jugar con él un poco y tal vez va a venir bien.. difícil de decir sin ver dentro de su tema. ¡Buena suerte!

  7. Hola Tristan,

    Esto funciona correctamente con el producto. Price etiqueta, pero ¿qué pasa con los productos con múltiples variantes? Traté de cambiar todos los usos aplicables de ' producto ' a ' variante ', pero esto sólo muestra todo como 0% de descuento. ¿Hay alguna manera de hacer que esto funcione para productos con más de una variante?

    Gracias
    Samantha

    1. Hola Samantha, gracias por leer. Sí, en Resumen, hay una manera, pero casi todos los temas son diferentes. Probablemente necesitarás editar la función SelectCallback, que puede ser bastante complicada si estás involucrando variantes. Probablemente necesitarías nuestro Lead técnico para ayudar con esto. ¿Qué tema estás usando?

      1. En realidad me di cuenta. Todas las instancias de "producto" necesitan cambiarse a "variante" como esperaba; sin embargo, el uso de "_ Max" debe descartarse por completo para que el código funcione para las variantes.

  8. ¡Hola! Gracias por su amable ayuda, está funcionando perfectamente, pero estoy teniendo otro tipo de problema. Cuando recargue el sitio web, puedo ver el precio, y el x% que está funcionando perfecto, pero sólo aparece durante 1 segundo, entonces este% desaparece.
    En esta fracción de tiempo, puedo ver que el% está funcionando bien, pero sólo dura 1 segundo. ¿Sabes qué clase de problema tengo?
    Gracias de nuevo,
    Sebastian

    1. Hola-trate de hacer que "pantalla: bloque! Important;" en el CSS, que puede ayudar a. De lo contrario, podría estar siendo ocultado por algún JavaScript en su tema, lo mejor para comprobar con un desarrollador en ese 🙂

  9. Hola
    No puedo encontrar producto. Price en cualquier lugar! Tengo el tema Canopy instalado.
    I found {{ product. price | money }} in product.liquid, but whne i add the code, nothing seems to work.

    por favor ayuda!

  10. Hola Tristan. Seguí sus instrucciones y pude Mostrar la frase exacta sólo después de hacer clic en el producto, pero el porcentaje de descuento no se muestra automáticamente en la Página principal de mi tienda. ¿Alguna ayuda?

    1. Hola Jether. Le enviaré su mensaje a nuestro equipo de soporte, y ellos le ayudarán a resolver esto. Me alegro de que esté siguiendo nuestras instrucciones.
      Gracias. Cesar Beltran.

  11. Hola Tristan. Seguí sus instrucciones y pude Mostrar la frase exacta sólo después de hacer clic en el producto, pero el porcentaje de descuento no se muestra automáticamente en la Página principal de mi tienda. ¿Alguna ayuda?

Añadir comentario

Su dirección de correo electrónico no se publicará. Los campos obligatorios se marcan *

Este sitio utiliza Akismet para reducir el spam. Obtén información sobre cómo se procesan los datos de tus comentarios.