Cómo agregar controles deslizantes a su tienda Shopify y aprovecharlos al máximo (+ ideas de propietarios de negocios)

Más es más . Al menos cuando se trata de compradores de comercio electrónico.

Los clientes quieren leer reseñas, ver productos desde todos los ángulos imaginables y explorar nuevos descuentos y ofertas antes de siquiera pensar en hacer clic en el botón "Agregar al carrito".

Pero si tuviera que incluir toda esa información en su sitio web, correría el riesgo de abrumarlos. Es por eso que los controles deslizantes son tan útiles: puede aprovechar los disparadores de conversión sin crear una página larga llena de imágenes y texto.

¿Qué son los controles deslizantes en Shopify?

Un control deslizante es esencialmente una presentación de diapositivas en su tienda Shopify. Puede ser automático (comienza a jugar automáticamente según un conjunto de reglas) o manual (solo se mueve cuando los usuarios hacen clic en él).

Estos son algunos de los tipos de controles deslizantes más populares con ejemplos:

• Control deslizante de testimonios : un carrusel de reseñas e imágenes de clientes es una excelente prueba social

QuadLock utiliza un control deslizante de testimonios como este en todas sus páginas de productos. Los usuarios pueden revisar las reseñas de productos haciendo clic en la flecha izquierda o derecha.

Laird Superfood también utiliza un control deslizante de testimonios en la página de inicio para mostrar las mejores reseñas de los clientes.

• Control deslizante de logotipo : para las empresas B2B, mostrar las empresas con las que trabajan envía todas las señales correctas a los posibles compradores.

Beauty Solutions utiliza un control deslizante de logotipo manual en la parte inferior de su página de inicio para compartir los nombres de los clientes a los que suministran.

• Control deslizante de imágenes de productos : muestre sus productos desde todos los ángulos y escriba los mejores atributos del producto como leyendas para estas imágenes.

Los boardshorts de CriticalSlide tienen un control deslizante manual de la imagen del producto en la página del producto. Los baúles se muestran desde el frente, el costado y la espalda. También se ven algunas fotos de primeros planos del material y el diseño y una imagen de la modelo que lo lleva puesto.

• Control deslizante de productos populares : demasiadas opciones pueden abrumar a los clientes. Muéstreles lo que es popular entre otros clientes y hará que sea más fácil decidir.

Proper muestra sus productos más populares en este carrusel manual "Shop our Instagram looks". Cada diapositiva muestra el producto con información sobre el precio y un enlace al mismo en el sitio.

eFashion Paris utiliza un control deslizante manual para mostrar los recién llegados y los más vendidos y comparte un enlace a esas categorías respectivas.

• Deslizador de pancartas: comparta descuentos de la tienda, ofertas o nuevos productos en estas pancartas.

49th Parallel utiliza este control deslizante de banner manual de 2 diapositivas en su página de inicio para llamar la atención sobre el

• filtros de café más vendidos y
• historia de los granos de origen sostenible.

El deslizador de banner manual de Beard & Blade enlaza con los productos más vendidos y anima a los visitantes a leer el blog.

Cómo agregar controles deslizantes a su tienda Shopify

Dependiendo de la aplicación Shopify que desee instalar, los pasos exactos para agregar controles deslizantes a su tienda pueden diferir, pero aquí hay un tutorial básico y rápido:

Paso 1: duplica tu tema en vivo

Inicie sesión en su tienda Shopify. Vaya a Tienda en línea -> Temas.

Junto al tema en vivo, haga clic en el botón "Acciones" y seleccione "Duplicar". Esto creará una copia de seguridad de tu tema de Shopify en caso de que cometas un error que pueda afectar negativamente a tu tienda.

Paso 2: agregue una sección de control deslizante personalizada a la tienda Shopify

Es posible que la aplicación de control deslizante de Shopify que instales requiera que pegues un código personalizado en tu sitio. Para hacerlo, junto al tema en vivo, haga clic en el botón "Acciones" y elija "Editar código".

A continuación, expanda la categoría "Secciones" y haga clic en "Agregar una nueva sección"

Asigne un nombre a su control deslizante y presione "Crear sección" y puede pegar el código personalizado.

Paso 3: Ve a theme.liquid

Desplácese hacia arriba para hacer clic en theme.liquid. Es posible que deba pegar código adicional aquí.

Paso 4: personaliza tus controles deslizantes

Vuelva a Temas y haga clic en "Personalizar" junto al Tema en vivo.

Encuentra la sección que creaste y ahora puedes personalizar los controles deslizantes en tu tienda Shopify. Si instaló una aplicación de control deslizante de imágenes, todo lo que necesita hacer en este paso es elegir la colección que desea presentar.

Si prefiere tutoriales en video, mire este video de EcomExperts donde explican cómo agregar un control deslizante de productos destacados a su tienda Shopify.

Principales aplicaciones de Shopify Slider en 2022: características clave, reseñas de usuarios

#1. Carrusel deslizante de imágenes de productos de POWR.io

Precios : Gratis-$89.99/mes

Calificación : 4.2/5 (243 reseñas)

Esta aplicación le permite crear controles deslizantes y carruseles de productos con subtítulos, texto, botones, videos, bordes y protección contra copias.

Características clave:

• Diferentes estilos de transición de control deslizante para elegir
• Elija entre control deslizante o carrusel
• Diseño altamente personalizable
• Respuesta móvil en cualquier dispositivo
• Admite texto en todos los idiomas.

Revisión positiva

Revisión crítica

#2. Deslizador de banner por Secomapp

Precios : Gratis-$39.99/mes

Calificación : 4.5/5 (152 reseñas)

Aunque la aplicación se llama control deslizante de banner, puede crear diferentes tipos de controles deslizantes altamente personalizables con código. Banner Slider es fácil de instalar y configurar y ofrece una administración de back-end amigable.

Características clave:

• Crea más de 40 tipos diferentes de controles deslizantes
• Agregar videos al control deslizante
• Código incrustado para mostrar el control deslizante en la parte delantera
• Control deslizante de vista previa antes de publicar
• Función de carga masiva
• Establecer fecha de inicio y finalización para el banner
• Admite el modo de ancho completo

Revisión positiva

Revisión crítica

#3. Control deslizante de imagen enorme

Precios : Gratis-$16.99/mes

Calificación : 4.9/5 (116 reseñas)

Esta aplicación le permite crear controles deslizantes de pancartas, controles deslizantes de imágenes, carruseles y logotipos con texto y comentarios en sus imágenes, y agregar un enlace a cada imagen en el control deslizante.

Características clave:

• Respuesta móvil
• Controlar la velocidad del control deslizante
• Sube varias fotos a la vez
• Agregar texto y enlaces

Revisión positiva

Revisión crítica

#4. Control deslizante maestro – Control deslizante de imagen

Precios : Gratis

Calificación : 3.8/5 (73 reseñas)

Esta aplicación gratuita le permite crear controles deslizantes personalizados ilimitados sin necesidad de conocimientos de codificación. Puede usar una de las 5 plantillas o comenzar desde cero.

Características clave:

• Admite texto alternativo de imagen
• Capas ilimitadas
• Control deslizante receptivo para cualquier dispositivo
• Agregue botones superpuestos, HTML personalizado y texto
• Programe la fecha de inicio y finalización de su control deslizante
• Elija entre control deslizante o carrusel

Revisión positiva

Revisión crítica

#5. Presentación de diapositivas de testimonios de clientes por POWR.io

Precios : Gratis-$89.99/mes

Calificación : 2.7/5 (35 reseñas)

Esta aplicación fácil de usar le permite mostrar testimonios de clientes, reseñas, fotos, descripciones y videos.

Características clave:

• Testimonios en video de reproducción automática
• Destaca tus mejores reseñas de productos
• Controle el bucle, la transición de diapositivas, la velocidad y el deslizamiento automático
• Diseño altamente personalizable
• Respuesta móvil en cualquier dispositivo
• Admite texto en todos los idiomas.

Revisión positiva

Revisión crítica

#6. Ada IQ: galería de imágenes deslizantes

Precio : 2,99/mes (prueba gratuita de 10 días)

Calificación : 5/5 (23 reseñas)

Esta aplicación de control deslizante de imágenes de Shopify sin código le permite crear controles deslizantes y presentaciones de diapositivas ilimitados para mostrar sus productos más vendidos.

Características clave:

• Fácil personalización
• Agregue la misma presentación de diapositivas en varias páginas de destino
• Futuras actualizaciones y nuevas características
• Enlaza imágenes a cualquier página de tu tienda

Revisión positiva

Revisión crítica

Actualmente no hay revisiones críticas de la aplicación. Los usuarios mencionan que encontraron problemas con la aplicación que el soporte resuelve en todos los casos.

#7. Control deslizante receptivo de varias páginas

Precio : 4,99/mes (prueba gratuita de 7 días)

Calificación : 4.2/5 (8 reseñas)

Esta aplicación fácil de usar le permite crear controles deslizantes horizontales o verticales en diferentes diseños y agregar varios a una sola página.

Características clave:

• Respuesta móvil en cualquier dispositivo
• Genera automáticamente códigos cortos para pegar en cualquier página
• Fácil de buscar y filtrar categorías y elementos
• Cree controles deslizantes con botones, números y miniaturas

Revisión positiva

Revisión crítica

Actualmente no hay revisiones críticas de la aplicación todavía.

#8. Revolución deslizante

Precio : $ 6.99- $ 89 / mes (prueba gratuita de 7 días)

Calificación : 4.9/5 (44 reseñas)

Esta aplicación le permite crear todo tipo de controles deslizantes y transmitir contenido de redes sociales que responde completamente y es personalizable.

Características clave:

• Steam contenido social de Facebook, Twitter, Flickr e Instagram
• Subir video de YouTube o Vimeo
• Control total sobre estilos, transiciones y animaciones.
• Optimizado para todos los dispositivos
• Ancho completo, pantalla completa, tamaños de control deslizante de respuesta automática
• Editor WYSIWYG de arrastrar y soltar

Revisión positiva

Revisión crítica

Controles deslizantes frente a carruseles: ¿Qué necesita saber?

Los controles deslizantes y los carruseles son lo mismo en esencia, excepto por una diferencia: los carruseles muestran muchas diapositivas a la vez.

Puede usar carruseles para mostrar a los clientes logotipos, testimonios o productos más vendidos.

Cuándo usar carruseles

Use carruseles cuando desee que el contenido más visible ocupe el mismo espacio en su página, lo que hace que sea más probable que los compradores lo vean.

Aquí hay algunas cosas que hacer y no hacer para tener en cuenta:

no hacer

• No utilice un carrusel en la sección principal de la página de inicio porque puede confundir a los visitantes.
• No empuje información a los usuarios que no los beneficia a ellos, solo a la empresa.
• No dejes que se convierta en un lugar para volcar contenido. Si no puede justificar su uso, no tenga uno.

hacer:

• Usa un carrusel cuando la gente lo espere. Por ejemplo, para mostrar reseñas de clientes, productos más vendidos o recién llegados.
• Utilice un carrusel cuando ahorre tiempo, esfuerzo y clics a las personas.
• Úselo para comparar dos productos diferentes.

Mejores prácticas para el uso de carruseles

• Use un carrusel manual para que los usuarios tengan el control
• Use flechas o navegación de puntos para permitir que los usuarios naveguen
• Mantenga el texto en estos carruseles breve y claro
• Asegúrese de que el carrusel se pueda deslizar de la misma manera en dispositivos móviles

Optimización de los controles deslizantes en su tienda Shopify: (+pros, contras e información de los propietarios de negocios)

Le pedimos a varios dueños de negocios que compartieran su experiencia de primera mano con los controles deslizantes y si son útiles o no.

¿Funcionan los controles deslizantes?

Primero examinemos los controles deslizantes desde dos perspectivas: rendimiento y capacidad de persuasión.

• Rendimiento : ¿Pueden los bots rastrear controles deslizantes y comprenderlos? ¿Realmente ralentizan los sitios?
  
  Si y no. Los bots pueden rastrear controles deslizantes, por lo que es importante que los haga compatibles con SEO y no todas las aplicaciones de control deslizante que instala tienen un gran impacto en la velocidad del sitio.
• Capacidad de persuasión: ¿Los controles deslizantes hacen un gran trabajo para lograr que las personas realicen una compra?
  
  La mejor manera de saber con certeza si funcionan para usted es hacer una prueba A/B. Primero, pruebe dos versiones: una con un control deslizante y otra sin él.

Reemplazar un control deslizante con una promoción de imagen estática del producto más vendido y botones con estados flotantes mejoró las conversiones en un 30 % (con una significación estadística del 98 %).

Esta prueba hizo lo que pensé que haría, pero la clave aquí es tener evidencia más directa para ayudar a alejar a este cliente y a otros de los controles deslizantes en su página de inicio. No soy el único que ha tenido esta experiencia y he leído muchos estudios de casos con resultados similares.

El problema es que las personas perciben los controles deslizantes como si fueran anuncios, por lo que no interactúan con ellos, especialmente si no hay formas de navegar fácilmente en el control deslizante o si la navegación está oculta.

Para llevar : elimine los controles deslizantes en el área de promoción de la página de inicio clave y anime a los clientes a usar esto para contar su historia o promocionar productos de gran venta o servicios clave en su lugar. Otra gran conclusión de esta experiencia es que las pruebas A/B son mucho más convincentes para los clientes que hablar sobre las "mejores prácticas" o alentar ideas basadas en otras cosas que he leído.

Tim Brown, 5 pruebas A/B que cambiaron la forma en que diseño sitios web

¿Qué tienen que decir los dueños de negocios sobre los controles deslizantes?

Recientemente agregué un control deslizante de imágenes a mi tienda Shopify y estoy muy contento con los resultados. Los controles deslizantes de imágenes son una excelente manera de exhibir productos, resaltar ofertas especiales y agregar interés visual a su tienda.

  Luke Lee, cofundador, everwallpaper.co.uk

Para mí, los controles deslizantes de imágenes pueden ser efectivos en las tiendas Shopify. Cuando se usan correctamente, pueden ayudar a resaltar ciertos productos o características y facilitar que los clientes aprendan más sobre lo que la tienda tiene para ofrecer.

Burak Ozdemir, Fundador, setalarmonline.com

Sí, los controles deslizantes de imágenes funcionan, hasta cierto punto. Los controles deslizantes de imágenes funcionan mejor cuando hay un gran catálogo de productos y se muestran múltiples variantes del mismo modelo en la página.

Theola Tinny, cofundadora de VinPit

He probado diferentes tipos de controles deslizantes en mis clientes de Shopify a lo largo de los años. Descubrimos que los controles deslizantes de mejor rendimiento dan algún tipo de pista de que hay más para ver. A un cliente en particular le fue muy bien al poner "Oferta n.º 1 de 3" en su primer Control deslizante, luego, por supuesto, tuvo el Control deslizante n.° 2 y el Control deslizante n.° 3 con aún más ofertas.

Jeff Moriarty, ninja del marketing digital en JMoriarty Marketing

¿Pueden los controles deslizantes ser contraproducentes?

Sí, los controles deslizantes pueden ser contraproducentes y esto es lo que los empresarios quieren que sepas:

No recomiendo usar ningún tipo de carruseles o controles deslizantes de imágenes en su tienda Shopify. Causan confusión y pueden abrumar a los visitantes que acuden a tu tienda. Cuando han registrado una imagen, ya se ha movido a la siguiente. Además, dar a sus clientes demasiadas opciones puede distraerlos de la razón principal por la que vinieron a su tienda en primer lugar. Ofrezca a sus visitantes un camino directo para llegar allí, sin distracciones. Las opciones suelen ser el subproducto de una mala estrategia.

Una práctica más fácil de usar es utilizar una imagen llamativa que les recuerde que han aterrizado en el lugar correcto. Los complementos deslizantes también pueden ralentizar drásticamente el tiempo de carga de su página y crear una experiencia de usuario deficiente. Son difíciles de diseñar y tienen una mayor probabilidad de no responder bien en diferentes dispositivos y navegadores.

Emily Amor, Gerente de SEO, Digital Darts

Los usuarios tienden a no interactuar con las imágenes deslizantes y, a menudo, las ignoran porque asumen que son anuncios. Los controles deslizantes parecen ofrecer la promesa de poder entregar múltiples mensajes en la misma página, pero casi siempre he encontrado que enfocarse en un solo mensaje y llamada a la acción (CTA) es mucho más efectivo.

Decano Kaplan, https://www.kaplancollectionagency.com

El peor problema de Slider que encontré con uno de mis clientes fue cuando no comprimieron las imágenes y cargaron Sliders que pesaban más de 50 mb cada uno. Casi nadie los vio, porque no se cargaron cuando el visitante se desplazó hacia abajo o fue a otra página web. ¡Puaj!

Jeff Moriarty, ninja del marketing digital en JMoriarty Marketing

Mejores prácticas a seguir al optimizar los controles deslizantes

Esto es lo que debe saber al usar controles deslizantes:

• Asegúrate de que tu slider cargue rápido
  
  Las imágenes de alta calidad también tienden a ser archivos grandes que pueden ralentizar el control deslizante. Asegúrese de elegir el tamaño correcto de las imágenes según el tamaño de su control deslizante.
  
  Más allá de cierto punto, los usuarios no pueden notar la diferencia en la calidad de la imagen, así que no tenga miedo de comprimir sus archivos. También puede cargar de forma diferida su control deslizante y reducir la cantidad de estilos y fuentes para que no reduzca el tiempo de carga.
• Mostrar la diapositiva más importante primero
  
  ¿Cuál es la razón principal por la que la gente debería comprarte? Use su USP para atraer visitantes al control deslizante para que estén más inclinados a desplazarse por los contenidos.
• Use una copia atractiva en todas las diapositivas
  
  Todas sus diapositivas son oportunidades para atraer visitantes y usar diferentes ángulos de venta para convertirlos. Agregue titulares que aborden los beneficios y puntos débiles y CTA basados ​​en acciones.
• Tener menos de 5 diapositivas
  
  Pero no te excedas con las diapositivas. No desea abrumar a los visitantes con demasiadas opciones y no realizar una compra debido a la parálisis del análisis. Sea intencional con su control deslizante y tenga un fuerte POR QUÉ lo incluyó en primer lugar.
• Establecer un tiempo de rotación lento
  
  Ofrezca a los clientes potenciales suficiente tiempo para digerir su contenido. Demasiado rápido y perderán el contenido y tendrán que esperar a que la diapositiva vuelva a aparecer. Demasiado lento y estarán en agonía esperando que aparezca la siguiente diapositiva. Rich Page sugiere establecer un tiempo de rotación de 3 segundos.
• Gira automáticamente tus diapositivas
  
  Incluso si usa un control deslizante automático, no puede estar seguro de que los visitantes esperarán pacientemente a que se complete la presentación de diapositivas. Ofrezca a los visitantes la opción de navegar a través del control deslizante mediante flechas o navegación de puntos.
• Use un diseño asimétrico para los carruseles
  
  Si está considerando un carrusel, intente usar un diseño asimétrico para sus imágenes. Tanto Airbnb como Booking.com utilizaron pruebas A/B y llegaron a diseños de imagen casi similares: una gran imagen de "característica" con imágenes más pequeñas (casi como miniaturas) a su alrededor.

¿Cómo usan los dueños de negocios los controles deslizantes de manera óptima?

En primer lugar, asegúrese de que las imágenes que utilice sean de alta calidad y del tamaño adecuado. Las imágenes borrosas o pixeladas dañarán la apariencia profesional de su tienda. En segundo lugar, evite usar demasiadas diapositivas: tres o cuatro suelen ser suficientes. Demasiadas diapositivas pueden resultar abrumadoras para los visitantes y dificultarles encontrar la información que buscan. Finalmente, asegúrese de que el control deslizante esté colocado en un área fácilmente visible de la página, preferiblemente cerca de la parte superior.

Luke Lee, cofundador, everwallpaper.co.uk

También es importante actualizar regularmente las imágenes en su control deslizante, ya que las imágenes obsoletas pueden volverse obsoletas rápidamente y ser menos efectivas para cumplir con su propósito de atraer la atención.

Además, debe asegurarse de que su control deslizante sea fácil de navegar, con botones claros Siguiente y Anterior para que los usuarios puedan moverse fácilmente a través de sus ofertas. Finalmente, puede ser útil incluir texto relevante junto con cada imagen para ayudar a los lectores a comprender de qué se trata cada imagen.

Burak Ozdemir, Fundador, setalarmonline.com

Si se utilizan controles deslizantes, deben ser estáticos. Los controles deslizantes automáticos que cambian las imágenes cada pocos segundos a menudo se mueven demasiado rápido para algunos usuarios y demasiado lentos para otros. Es mucho mejor tener controles deslizantes estáticos con botones de navegación claros para garantizar que el usuario siempre tenga el control.

Decano Kaplan, https://www.kaplancollectionagency.com

Los clientes prefieren mirar imágenes en lugar de leer textos. Haga que su control deslizante sea atractivo para la audiencia al proporcionarles imágenes atractivas en lugar de textos largos.

Will Cannon, fundador de Signaturely

Deslizando su camino hacia las victorias: A/B Test Your Sliders

Los controles deslizantes son una idea controvertida por una buena razón. La emulación ciega de las mejores prácticas de sus competidores o de la industria puede tener el efecto contrario. Los visitantes pueden molestarse, rebotar de la página y su tasa de conversión puede disminuir.

Prueba A/B de tus controles deslizantes para que tengas datos para respaldar tus decisiones y un marco para probar nuevos cambios para aumentar la conversión.

Rich Page, experto en conversión, comparte algunas ideas A/B que puede usar:

• Pruebe tener una sola imagen frente a diapositivas giratorias
• Pruebe usando un video explicativo versus diapositivas
• Pruebe la altura y el ancho de su control deslizante
• Muestre los controles deslizantes al público objetivo correcto
• Intenta agregar prueba social de diferentes maneras

No importa el tipo de hipótesis que desee probar, la plataforma de prueba A/B fácil de usar de Convert lo respalda. Pruébalo gratis durante 15 días.