Cómo añadir un control deslizante de antes y después en Shopify

Imagina que vendes un kit de blanqueamiento dental, un servicio de detallado de autos o un conjunto de presets de Lightroom. ¿Qué hace que un cliente potencial se decida a comprar? Con productos como estos, la gente quiere algo más que tus promesas. Quieren ver los resultados.

Un deslizador de antes y después permite a los compradores visualizar exactamente lo que están pagando. Arrastra el control, observa la transformación, y el valor se vende solo. Es una de las formas más rápidas de generar confianza y hacer que tu producto destaque en un mercado saturado.

Si vendes en Shopify, hay un detalle: sus temas predeterminados no incluyen un bloque de antes y después de forma nativa. Para añadir uno, tienes tres opciones: instalar una aplicación desde la Shopify App Store, insertar un widget gratuito sin código o programar un deslizador personalizado en los archivos de tu tema. Esta guía recorre los tres métodos para que puedas empezar a convertir visitantes en compradores.

Opción 1: Instala una extensión de la Shopify App Store

Para la mayoría de los comerciantes, el primer impulso es abrir la Shopify App Store y buscar “deslizador de antes y después”. Encontrarás muchas opciones, y la mayoría se instalan como un bloque de aplicación nativo. Una vez que hayas añadido la aplicación, el deslizador aparece directamente en el editor de tu tema como una sección o bloque que puedes colocar en una página de producto. Esa comodidad es su atractivo.

Sin embargo, conlleva dos costos.

El primero es lo que los dueños de tiendas llaman el “impuesto de las aplicaciones”. Casi todas las aplicaciones de deslizadores funcionan con una suscripción mensual, normalmente entre 1 y 10 dólares al mes por una sola función interactiva. Un deslizador aquí, un temporizador de cuenta regresiva allá, y un año después estás pagando una cantidad considerable por funciones que antes eran complementos de pago único. 

El segundo costo es la velocidad. Las aplicaciones visuales de front-end suelen inyectar su propio JavaScript de terceros en cada página que afectan. Instala algunas de ellas y tus páginas de producto cargarán un montón de scripts externos, lo que puede ralentizar la velocidad de la página, afectando directamente tanto tu tasa de conversión como tu SEO.

Si has sopesado esas desventajas y aun así prefieres la ruta de la aplicación nativa, aquí tienes la configuración:

1. Dirígete a la Shopify App Store, asegurándote de haber iniciado sesión en tu cuenta de Shopify. Busca “deslizador de antes y después”.

2. Selecciona una aplicación y haz clic en Instalar para añadirla a tu tienda.

3. Sigue las instrucciones de la aplicación para configurarla. La mayoría de las aplicaciones requieren que configures el pago antes de usarlas, así que deberás hacerlo antes de añadirlas a tu tema.

Opción 2: Usa un widget de deslizador gratuito y sin código (recomendado)

Si quieres un deslizador de comparación personalizable y adaptable sin una suscripción mensual, la mejor opción es un widget integrado gratuito. El Deslizador de Antes y Después de Jotform está diseñado exactamente para esto. Lo configuras visualmente, copias un único código de inserción y lo colocas en tu página de Shopify. No hay ninguna aplicación que instalar ni cuotas recurrentes.

Como el widget se carga desde los servidores de Jotform en lugar de inyectar scripts en tu tema, mantiene el código de tu tienda ligero, lo que ayuda a proteger la velocidad de la página. Puedes configurar la transición horizontal o vertical; elegir la interacción por arrastre, clic o al pasar el cursor; añadir etiquetas y leyendas; e incluso apilar hasta tres pares de comparación en un carrusel compacto.

Así es como añadirlo:

1. En la página del Deslizador de Antes y Después de Jotform, añade tus imágenes de antes y después y escribe una etiqueta y una leyenda para cada par. Jotform obtiene las imágenes por URL, así que si tus fotos aún no están en línea, súbelas primero a Shopify en Configuración > Archivos y copia la URL de cada imagen. También puedes elegir la opción de subir imagen si prefieres añadir las imágenes directamente en Jotform.

2. Personaliza la dirección de la transición, la posición del divisor, los colores y el tamaño para que coincidan con tu tienda.

3. Copia el código de inserción que genera Jotform. Puedes hacerlo haciendo clic en el botón Copiar código en la pestaña Publicar.

4. En el editor de tu tema de Shopify, abre la plantilla de producto o de página donde quieras el deslizador, haz clic en Añadir sección (o Añadir bloque) y elige Liquid personalizado. Pega el código de inserción y luego haz clic en Guardar.

Opción 3: Edita el código de tu tema de Shopify

Si prefieres no usar ninguna aplicación externa ni código de inserción, puedes crear un deslizador de comparación directamente en tu tema. Es la ruta con más control y menos sobrecarga, pero también es la opción más fácil de dañar.

La construcción tiene tres partes: HTML para contener las dos imágenes, CSS para apilarlas y recortarlas, y JavaScript para mover el divisor a medida que el visitante lo arrastra. El lugar más sencillo para colocar todo esto es un único bloque de Liquid personalizado, así no tienes que editar directamente los archivos de tu plantilla.

Esto es lo que debes hacer:

1. Añade el marcado con las URL de tus dos imágenes. La imagen de “antes” se coloca encima y se recorta; la imagen de “después” se coloca debajo.

html<div class="ba-slider" id="baSlider">  <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore">  <img src="AFTER_IMAGE_URL" alt="After" class="ba-img">  <div class="ba-handle" id="baHandle"></div></div>

Una advertencia justa: esta es la opción que muerde. Un corchete perdido o un estilo que se filtra al resto de tu tema puede romper tu diseño móvil o, peor aún, interferir con el flujo de pago. El comportamiento táctil debe probarse en dispositivos reales, no solo en el navegador de tu escritorio, y tú mismo te haces cargo de cada error y cada corrección futura. Si esa compensación suena peor que un widget, te recomendaríamos la Opción 2.

Mejora tu tienda de Shopify con widgets inteligentes y sin código

Un slider de antes y después vale la pena agregarlo, pero rara vez es el único elemento interactivo que necesita una tienda. Shopify se gana su lugar entre los mejores creadores de sitios web de comercio electrónico en parte porque es muy fácil de ampliar, y los complementos adecuados son los que convierten una tienda funcional en una pulida. La trampa está en pagar una suscripción mensual separada por cada uno, ya que esas tarifas van devorando silenciosamente los márgenes que tanto te esfuerzas por proteger.

Ese es el argumento para optar por widgets gratuitos y alojados en su lugar. Herramientas como el Slider de Antes y Después de Jotform mantienen tu ganancia intacta, tus páginas cargando rápido y a tus compradores interesados. Y el mismo directorio cubre mucho más que comparaciones de imágenes.

Algunos otros widgets de Jotform que vale la pena explorar para una tienda de Shopify incluyen

• Un temporizador de cuenta regresiva para añadir urgencia a una venta flash o al lanzamiento de un producto
• Un widget de preguntas frecuentes para responder preguntas comunes sobre productos directamente en la página
• Verificación de edad para productos con restricción de edad
• Un botón de volver arriba para facilitar la navegación en páginas de productos largas

Explora el directorio completo de widgets para sitios web de Jotform para ver qué se adapta a tu tienda. Además, puedes conectar tus formularios y datos directamente a través de la integración de Jotform con Shopify. Prueba tu primer widget sin código gratis y configúralo en solo unos minutos.