Todos los principales minoristas lo hacen... ¿Y por qué no tú también?
Una manera fácil de animar a los clientes a comprar más productos es ofrecer envío gratuito por encima de un determinado Umbral.
Por ejemplo, puede ofrecer "envío gratis para pedidos superiores a $75".
Esto es relativamente fácil de mostrar en su sitio (en su página de envío, por ejemplo), pero uno de los mejores lugares para tenerlo es en su Página de carrito. Y, desafortunadamente, es un poco difícil de implementar allí, ya que requiere la adición de código personalizado a su carrito. Liquid plantilla.
Por suerte, ahí es donde vamos.
Este es un gran ejemplo: https://www.erstwilder.com/cart
(Ve y agrega un producto al carrito para verlo en acción.)
Este post le mostrará cómo agregar "usted está $X lejos de envío gratis!" a su página de carrito, en sólo unos sencillos pasos.
Terminarás con algo como esto, que puedes cambiar según sea necesario:
En nuestro ejemplo a continuación, vamos a ofrecer envío gratis para todos los pedidos superiores a $75.
Por supuesto, podría cambiar esto a otro valor ($20, $200, lo que quiera), según sea necesario.
- Configure los ajustes de envío. Vaya a admin > ajustes > envío en su tienda Shopify, y configurarla para ofrecer envío gratuito por encima de $75 o el valor elegido.
- A continuación, vaya a la plantilla de carrito, yendo a admin > Online Store > temas > editar HTML/CSS > Cart. líquido bajo "plantillas" a la izquierda.
- Una vez que tenga el carrito. Liquid abierto, agregue el código de abajo en la parte superior (vea a continuación algunas notas sobre cómo personalizarlo para su tienda en particular):
{% assign shipping_value = 7500 %} {% assign cart_total = cart.total_price %} {% assign shipping_value_left = shipping_value | minus: cart_total %} <p class="shipping-savings-message"> {% if shipping_value_left > 0 %} You are {{ shipping_value_left | money }} away from free shipping! <a href="/collections/all">Continue shopping</a> to add more products to your cart and receive free shipping for orders over $75. {% else %} You've got free shipping! {% endif %} </p>Algunas notas: Para cualquier persona con menos de $75 en su carrito, este mensaje se mostrará. Para cualquier persona con más de $75, que sólo verá "usted tiene envío gratis!". Puede cambiar 7500 para que coincida con el valor de envío libre-que es el valor en dólares en centavos. Por ejemplo, $20 sería 2000, $100 sería 10000 y así sucesivamente. Puede cambiar la redacción según sea necesario, simplemente no toque lo que está entre llaves, ya que eso es lo que hace que el script funcione. El código anterior insertará un enlace a su página /Collections/All ("todos los productos"), pero también podría cambiarlo si lo desea.
- Guardar carrito. líquido.
- Por último, es posible que desee un poco de CSS para el estilo de su nueva sección de lujo en la página del carrito. Puedes usar esto como punto de partida y cambiar los colores a cualquier color HEX que te guste (usando Este selector de color por ejemplo). Por lo tanto, para ello, abra Style. CSS en "assets" a la izquierda dentro del editor de temas. Este archivo podría llamarse StyleSheet. CSS, Styles. CSS, Style. CSS, o algo similar a eso, dependiendo de su tema. Pegue esto en la parte inferior de ese archivo:
.shipping-savings-message { background-color: #f9ffe6; border: 3px solid green; padding: 20px; text-align: center; margin-bottom: 25px; } -
Salvar.
Eso le dará algo similar a esto:
Recuerde que puede cambiar los colores, el relleno y así sucesivamente según sea necesario, simplemente editando ese código y reemplazando los colores hexadecimales o los valores de relleno. Si usted está contento con él como-es, sólo puede copiar/pegar.
Eso es todo lo que hay que hacer, ahora tiene una manera fácil y flexible de animar a los clientes a comprar un poco más y obtener el envío gratis en el negocio.
¿Tienes preguntas? Encantados de responder en los comentarios.
Gracias nuevamente por seguir nuestra Shopify Insider blog @ Blackbelt Commerce, tenemos muchas otras publicaciones valiosas que son informativas. Aquí están nuestras principales recomendaciones; Cómo elegir un desarrollador de Shopify, Los mejores recursos de la hoja de trucos de Shopify, selling and social media:facts, what are the advantages of e-commerce store, Y Más estrategias de diseño de Shopify.
También podemos ayudarle con muchos otros servicios. Además, puede aprender todo sobre que son los expertos en Shopify en Blackbelt Commerce.
¿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.
Gracias por esto!!
Hola Quinten, que son bienvenidos, me alegro de que ayudó a 🙂
Hola. Gran sitio! Vi tu publicación en el blog de Shopify.
¿Cómo implementaría eso si tiene diferentes umbrales de envío gratis para diferentes países: tenemos envío gratis para $199 en Canadá y $249 en los EE.UU.
Aprecio, muy unfamilliar con la codificación.
¡Gracias!
Hi Louis! Thanks for reading, glad you liked the post 🙂 As for setting up the notification with custom messaging based on location — this is doable (for example – we did this for our client https://www.erstwilder.com) — that’s something we might need to take a deeper look at in a custom mini-project, as it really depends on your site 🙂 Feel free to contact us at the link below and happy to see if we can help > https://www.blackbeltcommerce.com/contact/
¡ Hola, me encanta la idea de esto!
Preparando para lanzar mi tienda esta semana, usando el tema minimal.
He creado un sitio web anteriormente y estoy razonablemente familiarizado con la codificación, pero no puedo encontrar nada remotamente similar a StyleSheet. CSS en assets.
I can create a new asset but I’m unsure which drop-down to use and whether I need to place {{ ‘custom-styles.css’ | asset_url | stylesheet_tag }} in Layout > theme.liquid before ??
Gracias por todo el gran trabajo que estás haciendo!
Richie
Hey Richie! Realmente cualquier archivo CSS va a hacer, depende de su tema, pero lo más probable es que será algo como Style. CSS, StyleSheet. CSS, base. CSS, tema. CSS o similar. Espero que ayude, sólo hazme saber si tienes alguna otra pregunta.
Gracias
Tristan.
Hola Tristan,
Siento haberte hecho un error, pero todavía no estoy más cerca de crear una bonita mirada en caja alrededor del contador de franqueo – y he probado todo tipo de variaciones diferentes en las sugerencias que ofreces. Por favor, vea mi mensaje del 7 de junio, que comprobé durante una semana, con la esperanza de una respuesta. Ahora estoy muy cerca de lanzar mi sitio web y pensé que volvería a intentarlo!
Mejor
Richie
Hola Richie, por favor, publique un enlace a su sitio para que podamos echar un vistazo, ya que es un poco difícil de decir en este caso, ya que cada tema es un poco diferente.
Hola Tristan y mis disculpas por no haber visto su respuesta. Yo había asumido que recibiría una notificación por correo electrónico... Gracias por sus sugerencias, pero todavía no estoy claro:
En mis activos (como dije antes, tema mínimo) puedo ver "Theme. SCSS. Liquid" solamente.
Ninguna de sus otras sugerencias están presentes.
Tengo la calculadora de envío libre/cuenta regresiva trabajando, pero con el fin de crear una caja alrededor del texto, ¿necesito crear "Theme. css" en Assets?
Mejor
Richie
Puede utilizar ese archivo CSS existente, cualquier archivo CSS lo hará.
Saludos
Coloca el código en ambos lugares exactamente como se muestra, pero la página de pago no muestra ningún mensaje. Estoy en la parte pidiendo una tarjeta de crédito. ¿Tengo que ir más lejos para ver el mensaje?
No quiero introducir mi tarjeta y terminar ordenando mi propio producto.
Bob
Hola Bob-esto debe ir en la página del carrito (carrito. líquido), es que donde lo has colocado? No lo verás en la caja (ya que no es editable a menos que estés en Shopify Plus), el carrito es el mejor lugar. Siéntase libre de colocar un enlace para que pueda echar un vistazo.
Hola y gracias por la respuesta rápida.
Aquí está la URL de la página donde lo probé.
Hemos instalado el script en Cart. Liquid.
Y CSS personalizado en Style. SCSS. Liquid.
Verás que no hay aviso.
¿Qué crees que estamos haciendo mal?
Bob
Más allá de mi respuesta.
Está funcionando.
Nuestra página de "carrito" no es tan obvia como usted pensaría.
¡Me encanta!
Bob
Hola, estoy usando el tema de la retina, es posible hacer su trabajo con el carrito de Ajax?
Hi there! Thanks for reading. Yes, that would be possible, but it would be somewhat of a custom job. Feel free to contact us: www.blackbeltcommerce.com/contact and we can take a look 🙂
FANTASTICO!!!!
Muchas gracias. Es un gran Consejo.
¡Esto es genial! ¿Es posible agregar esto al carrito que aparece inicialmente cuando un producto se agrega al carrito? No es la página del carrito real, pero la ventana emergente que generalmente se muestra en el lado derecho de la página cuando un producto se agrega por primera vez.
¡Gracias!
Ben
Hola, he añadido esta característica a mi tienda y me encantan las. Tenía curiosidad si era posible establecer algo para los clientes canadienses que compran en el sitio, así? Ofrezco envío gratuito a nosotros cuando gastan más de $75, pero le gustaría incluir una nota para los clientes en Canadá, así. Gracias
Me encanta esta función de venta ascendente. Me preguntaba si hay una modificación en el guión para excluir un producto?
Por ejemplo, nuestra tienda ofrece envío gratuito en pedidos superiores a $97, excepto 1 producto de Sampler a un precio de $24,95 que incluye envío gratuito. Es confuso ver la oferta de venta ascendente en la página del carrito para el producto sampler.
Hola, me gustaría saber si usted sabe cómo hacer esto con Ajax, en caso de que el código va en el mini-carrito de cabecera/desplegable, que necesita ser actualizado en vivo, uppon producto añade/elimina.
Hola Ricardo, sí, podemos crear código personalizado también. Háganos saber si usted está interesado.