Oct 21 • General discussion
Código para Boton de whatsapp
Holaa chicos, les dejo un código liquid para qque les aparezca el icono de whatsapp mientras el cliente ve la página y si hace click en el bóton lo lleva al carrito. Se crea la carpeta en con el nombre "WA-Cart-Floating-Button.liquid" y se copia y pega esta codigo:
{% comment %}
WA Cart Floating Button - Section
- Botón flotante con ícono de WhatsApp que redirige al carrito (/cart)
- Parpadeo + halo (funciona en móvil/iOS con fixes de SVG)
- Visible solo en productos y colecciones; oculto en cart/checkout
{% endcomment %}
{% if request.page_type == 'product' or request.page_type == 'collection' %}
{% unless request.page_type == 'cart' or request.page_type == 'checkout' %}
{% if section.settings.show_on_desktop or section.settings.show_on_mobile %}
<style>
:root{
--wa-green: {{ section.settings.color | default: '#25D366' }};
}
.wa-cart-fab{
position: fixed;
right: {{ section.settings.right_offset }}px;
bottom: {{ section.settings.bottom_offset }}px;
z-index: 9999;
display: inline-flex;
align-items: center;
justify-content: center;
width: {{ section.settings.size_desktop }}px;
height: {{ section.settings.size_desktop }}px;
border-radius: 9999px;
background: var(--wa-green);
box-shadow: 0 8px 24px rgba(0,0,0,.18);
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
cursor: pointer;
opacity: .98;
animation: wa-pop .42s ease-out both;
}
.wa-cart-fab:hover{
transform: translateY(-2px) scale(1.04);
box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.wa-cart-fab:active{ transform: translateY(0) scale(.98); }
.wa-cart-fab:focus-visible{
outline: 3px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(37,211,102,.35), 0 8px 24px rgba(0,0,0,.18);
}
/* Halo pulsante */
.wa-cart-fab::after{
content: "";
position: absolute;
inset: 0;
border-radius: 9999px;
box-shadow: 0 0 0 0 rgba(37,211,102,.45);
animation: wa-halo 2.2s infinite ease-out;
pointer-events: none;
}
.wa-cart-fab__icon{
width: calc({{ section.settings.size_desktop }}px * .54);
height: calc({{ section.settings.size_desktop }}px * .54);
display: block;
fill: #fff;
/* ✅ Fixes para móvil/iOS */
transform-origin: center;
transform-box: fill-box;
will-change: transform, opacity;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
animation: wa-blink 1.6s infinite ease-in-out;
}
/* Animación de entrada */
@keyframes wa-pop {
0% { transform: scale(.9); opacity: 0; }
60% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); }
}
/* Latido / parpadeo del ícono */
@keyframes wa-blink {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.12); opacity: .9; }
}
/* Halo pulsante alrededor del botón */
@keyframes wa-halo {
0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
{% if section.settings.respect_reduce_motion %}
@media (prefers-reduced-motion: reduce){
.wa-cart-fab, .wa-cart-fab__icon{ animation: none !important; }
.wa-cart-fab::after{ animation: none !important; }
.wa-cart-fab{ transition: none !important; }
}
{% endif %}
/* Responsivo móvil */
@media (max-width: 768px){
.wa-cart-fab{
width: {{ section.settings.size_mobile }}px;
height: {{ section.settings.size_mobile }}px;
right: {{ section.settings.right_offset_mobile }}px;
bottom: {{ section.settings.bottom_offset_mobile }}px;
}
.wa-cart-fab__icon{
width: calc({{ section.settings.size_mobile }}px * .56);
height: calc({{ section.settings.size_mobile }}px * .56);
/* ✅ Fixes también en móvil */
transform-origin: center;
transform-box: fill-box;
will-change: transform, opacity;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
animation: wa-blink 1.6s infinite ease-in-out;
}
}
/* Visibilidad por dispositivo */
{% unless section.settings.show_on_desktop %}
@media (min-width: 769px){ .wa-cart-fab{ display: none !important; } }
{% endunless %}
{% unless section.settings.show_on_mobile %}
@media (max-width: 768px){ .wa-cart-fab{ display: none !important; } }
{% endunless %}
</style>
<a class="wa-cart-fab"
href="{{ section.settings.cart_url | default: '/cart' }}"
aria-label="Ir al carrito"
title="{{ section.settings.tooltip | escape }}">
<!-- Ícono WhatsApp -->
<svg class="wa-cart-fab__icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
<path d="M16.01 3.2c-7.07 0-12.8 5.53-12.8 12.35 0 2.43.74 4.7 2.02 6.6L3.2 28.8l6.89-1.95a12.93 12.93 0 0 0 5.92 1.5c7.07 0 12.8-5.53 12.8-12.35S23.08 3.2 16.01 3.2zm7.52 17.71c-.31.86-1.53 1.58-2.12 1.62-.56.04-1.26.06-2.03-.13-.47-.12-1.08-.35-1.87-.68-3.28-1.41-5.41-4.7-5.58-4.92-.17-.22-1.33-1.77-1.33-3.38 0-1.61.84-2.39 1.14-2.71.31-.32.68-.4.9-.4.22 0 .45 0 .65.01.2.01.49-.08.77.59.31.74 1.06 2.56 1.15 2.75.09.19.15.41.03.63-.12.22-.18.35-.36.54-.19.21-.38.47-.54.63-.18.18-.37.38-.16.74.21.35.93 1.52 2 2.45 1.38 1.19 2.55 1.56 2.91 1.73.36.17.57.15.78-.09.21-.24.9-1.05 1.14-1.41.24-.36.48-.3.8-.18.34.12 2.15 1.02 2.52 1.2.37.18.62.27.71.42.09.15.09.88-.21 1.74z"/>
</svg>
</a>
{% endif %}
{% endunless %}
{% endif %}
{% schema %}
{
"name": "Botón WA Carrito",
"settings": [
{ "type": "checkbox", "id": "show_on_desktop", "label": "Mostrar en escritorio", "default": true },
{ "type": "checkbox", "id": "show_on_mobile", "label": "Mostrar en móvil", "default": true },
{ "type": "text", "id": "cart_url", "label": "URL del carrito", "default": "/cart", "info": "Dejar en /cart para redirigir al carrito de Shopify." },
{ "type": "text", "id": "tooltip", "label": "Texto de tooltip", "default": "Ir al carrito" },
{ "type": "color", "id": "color", "label": "Color del botón", "default": "#25D366" },
{ "type": "checkbox", "id": "respect_reduce_motion", "label": "Respetar 'Reducir movimiento' del dispositivo", "default": true, "info": "Desactiva animaciones si el usuario usa 'Reducir movimiento'." },
{ "type": "range", "id": "size_desktop", "label": "Tamaño escritorio (px)", "min": 44, "max": 96, "step": 1, "default": 64 },
{ "type": "range", "id": "size_mobile", "label": "Tamaño móvil (px)", "min": 44, "max": 84, "step": 1, "default": 56 },
{ "type": "range", "id": "right_offset", "label": "Separación derecha desktop (px)", "min": 8, "max": 48, "step": 1, "default": 16 },
{ "type": "range", "id": "bottom_offset", "label": "Separación inferior desktop (px)", "min": 8, "max": 72, "step": 1, "default": 20 },
{ "type": "range", "id": "right_offset_mobile", "label": "Separación derecha móvil (px)", "min": 8, "max": 36, "step": 1, "default": 14 },
{ "type": "range", "id": "bottom_offset_mobile", "label": "Separación inferior móvil (px)", "min": 8, "max": 72, "step": 1, "default": 18 }
],
"blocks": [],
"presets": [{ "name": "Botón WA Carrito" }]
}
{% endschema %}
9
1 comment
Código para Boton de whatsapp
skool.com/lbdp-gratuito
TODO lo que necesitás como emprendedor digital para dar tus primeros pasos en este modelo de negocio y acceder a un entorno que te potencie 🚀🔥
Leaderboard (30-day)
1
+11
2
+10
3
+8
4
+7
5
+7
Powered by