¿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.
¿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.
***
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 proofs, Shopify 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.
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
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.
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
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!
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
Hola Zach,
¿Puede señalarnos a su sitio web y hacernos saber qué tema está haciendo? Voy a echar un vistazo. Si tu tema usa JS, será por eso que no funciona. ¡Salud! Tristan.
¿Alguna vez averiguas por qué JS no permite renderizar el líquido correctamente? También estoy recibiendo el error de REGEXP esperado, en el tema Megatronic.
¡ 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!
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???
Hola Callum,
Difícil de decir sin ver su sitio. ¿Cuál es tu URL y tu tema? Sí, intente introducilo después de eso, actualice y vea lo que sucede. Siempre puede eliminarlo si no funciona.
For site-wide discounts, I’d recommend the App “Product Discounts” by Bold Apps: https://apps.shopify.com/product-discount
Hi Tristan, my website is ** Could you have a look please I have entered it after the, end%} and nothing has happened…
Y el tema es mínimo
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.
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.
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.
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 %}
Hola Jonathan,
I think these would be the ones: {{ product.price | money }} INC GST.
OK Tristan creo que estoy llegando a algún lado.
Esto es lo que se muestra en el sitio web:
' Se guarda el error de líquido: tipo de argumento incorrecto Nil (RegExp esperado)% '
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!
Bien, salud Tristian. Estoy juguando con eso.
Gracias por toda la ayuda
Aplicar la instrucción como se proporciona en el tema de la retina; mostró el precio de la oferta vs precio original (Strike-OFF); pero no muestra el% de descuento y el texto "usted guardó"
Please advise.
Hola Dennis,
He tomado una mirada. Usted tendría que ponerse en contacto con los desarrolladores de ese tema en outofthesandbox.com, que deben ser capaces de ayudar. ¡Salud! Tristan.
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
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?
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.
¡ Me alegro de que lo hayas hecho bien! 🙂
I really like the solution
Hola
muestra%. 0. ¿Cómo puedo eliminar el 0?
Hola, intente agregar:
| quitar: ' 0 '
Guideline: https://docs.shopify.com/themes/liquid-documentation/filters/string-filters#remove
¡ Espero que ayude!
¡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
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 🙂
Buen post Tristan! Solía recomendar a los propietarios de tiendas de Shopify para nombrar su descuento con el porcentaje apagado (por ejemplo, 25-OFF) pero es un poco malo y fácil de engañar 🙂
You should have a look at my new app called Automatic Discount, it’s complementary to this post: https://apps.shopify.com/automatic-discount-rules
Gracias Derek, interesante manera de hacerlo y la codificación mínima 🙂 Niza!
Funcionó para mí, pero está mostrando el porcentaje de descuento antes de precio, ¿cómo puedo colocarlo después de precio con descuento?
Gracias
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!
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?
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.
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?
Perfecto agradecimiento
Hola
Me encanta
¿Podría por favor decirme cómo puedo utilizarlo con las variaciones?
Your method of explaining the whole thing in this article is in fact good, all be capable of without difficulty
be aware of it, Thanks a lot.
Thanks for a marvelous posting! I actually enjoyed reading it, you happen to be a great author.
I will ensure that I bookmark your blog and will often come back down the road.
I want to encourage you to definitely continue your great job, have a nice morning!