Guías por plataforma 24 de mayo de 2026

Videowidget para Shopify: confianza y comercio

Descubre cómo añadir un videowidget a Shopify, segmentarlo por tipo de página y probarlo antes de publicarlo.

Videowidget para Shopify: confianza y comercio

Puntos clave

  • La instalación desde Shopify puede ser sencilla y no siempre requiere programar, pero debes seguir los permisos y las pruebas de tu tienda.
  • Puedes controlar muchos detalles visuales de la videoburbuja sin tocar el código. Comprueba las funciones disponibles en tu plan actual.
  • Abre la tienda en Chrome, Safari y Firefox y comprueba cómo aparece la videoburbuja.

¿Cómo instalar CompleteGreet en Shopify?

La instalación puede hacerse desde la Shopify App Store y la aplicación se conecta directamente con la tienda. El proceso exacto depende del tema y de las pruebas que debas realizar.

Ilustración del proceso para instalar CompleteGreet en Shopify

Empieza buscando «CompleteGreet» en la administración de Shopify, dentro de Apps, y haz clic en «Instalar aplicación». Aparecerá una pantalla de permisos para acceder al tema y, según la configuración, a los pedidos. Haz clic en «Instalar» cuando hayas revisado la conexión.

La aplicación te dirige a CompleteGreet para crear una cuenta. Introduce tu correo, elige una contraseña y confirma el registro. Después entrarás en el panel.

Sube tu primer saludo en vídeo. Haz clic en el botón azul «Upload» de la esquina superior derecha, elige el archivo y espera a que termine el procesamiento. Mantén el archivo razonablemente ligero y prueba el tiempo de carga en tu tienda.

Configura los ajustes de tu videoburbuja :

  1. Elige la posición de la burbuja. La esquina inferior derecha suele encajar bien en tiendas Shopify con botones del carrito en la parte superior derecha, pero debes comprobarlo en tu tema.
  2. Selecciona las páginas en las que debe aparecer el widget. Empieza por la página de inicio y algunas páginas de producto y amplía solo después de probarlo.
  3. Escribe el texto de la llamada a la acción. Un mensaje como «Pregúntame lo que quieras» puede funcionar mejor que «Contacta con nosotros» en algunas pruebas, pero compruébalo en tu audiencia.
  4. Indica tu horario comercial para que el widget pueda mostrar una opción de reserva cuando estés desconectado, si esa función está disponible en tu configuración.

En los temas Online Store 2.0, la aplicación puede añadir una sección de «CompleteGreet» al editor del tema. Arrástrala al pie y guarda. En temas antiguos, copia el código de inserción desde el panel de CompleteGreet, ve a Online Store, Themes y Edit code, abre theme.liquid y coloca el código según la guía actual, justo antes de la etiqueta de cierre correspondiente. Consulta su caso actual como ejemplo, no como garantía.

Haz clic en Publicar en el editor del tema o guarda los cambios de código. Comprueba después la tienda activa para confirmar que aparece la burbuja.

¿Qué puedes personalizar en Shopify?

Puedes controlar muchos detalles visuales de la videoburbuja sin tocar el código. Colócala abajo a la izquierda o a la derecha, elige su tamaño y sube una miniatura con tu rostro en lugar de un icono de reproducción genérico. Prueba el tamaño en móvil y escritorio para que encaje con el tema y la audiencia.

La segmentación por página es una de las ventajas que muchas tiendas Shopify pueden aprovechar.

Ilustración de personalización del videowidget en Shopify

Muestra el widget solo en páginas de producto donde haya intención de compra o escóndelo durante el pago si distrae. También puedes definir un retraso para que la burbuja aparezca después de unos segundos. Mide consultas y ventas en tu propia tienda en lugar de dar por hecho un resultado.

Formularios y llamadas a la acción

El creador de formularios integrado puede recoger nombre, correo, teléfono o campos propios como «¿Qué talla buscas?». Prueba las preguntas con tu audiencia y conserva solo los campos que realmente necesites.

El texto del botón importa más de lo que muchos equipos esperan. «Enviar mensaje» puede funcionar peor que «Pregúntame lo que quieras» en una prueba concreta. El color debe encajar con la marca y tener suficiente contraste. Muchas

herramientas de videoburbujas se limitan a paletas predeterminadas, mientras que la integración con el tema de Shopify puede permitir usar los códigos hexadecimales del diseño existente. La calidad de la grabación es un detalle que separa una experiencia cuidada de una amateur. Usa luz natural lateral de una ventana, no una luz de techo que proyecte sombras bajo los ojos. La claridad del audio importa más que el vídeo 4K. Un micrófono USB sencillo puede sonar mejor que el del ordenador, y una imagen algo granulada suele ser aceptable si se te oye con claridad.

Guía paso a paso para instalar el videowidget de CompleteGreet en Shopify, con cuatro pasos de configuración y datos de casos de clientes. Usa las cifras como ejemplos y mide siempre el resultado en tu propia tienda.

#cg-ig-PL5 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
border-top: 4px solid #3D5ACE;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL5 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#cg-ig-PL5 .ig-header {
text-align: center;
margin-bottom: 24px;
}
#cg-ig-PL5 .ig-title {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
}
#cg-ig-PL5 .ig-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0;
}
#cg-ig-PL5 .step-container {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
#cg-ig-PL5 .step-item {
display: flex;
gap: 16px;
align-items: flex-start;
background: #ffffff;
padding: 16px;
border-radius: 8px;
border: 1px solid #e2e2ea;
}
#cg-ig-PL5 .step-number {
width: 32px;
height: 32px;
background: #3D5ACE;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
#cg-ig-PL5 .step-content {
flex: 1;
}
#cg-ig-PL5 .step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0;
line-height: 1.5;
}
#cg-ig-PL5 .code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px;
margin-top: 8px;
position: relative;
}
#cg-ig-PL5 .code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, monospace;
font-size: 12px;
color: #e2e2ea;
margin: 0;
word-break: break-all;
}
#cg-ig-PL5 .copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #3D5ACE;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: default;
}
#cg-ig-PL5 .stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
#cg-ig-PL5 .stat-box {
background: #ffffff;
padding: 16px 8px;
border-radius: 8px;
text-align: center;
border: 1px solid #e2e2ea;
}
#cg-ig-PL5 .stat-number {
font-size: 24px;
font-weight: 700;
color: #3D5ACE;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .stat-label {
font-size: 11px;
color: #7a7a96;
margin: 0;
line-height: 1.3;
}
#cg-ig-PL5 .case-study {
background: #ffffff;
border-left: 3px solid #E48333;
padding: 12px 16px;
border-radius: 0 8px 8px 0;
margin-bottom: 20px;
}
#cg-ig-PL5 .case-label {
font-size: 12px;
font-weight: 600;
color: #E48333;
margin: 0 0 4px 0;
}
#cg-ig-PL5 .case-text {
font-size: 12px;
color: #4a4a68;
margin: 0;
line-height: 1.5;
}
#cg-ig-PL5 .cta-button {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
margin-bottom: 16px;
}
#cg-ig-PL5 .source-line {
font-size: 11px;
color: #7a7a96;
text-align: center;
margin: 0;
}
@media (max-width: 480px) {
#cg-ig-PL5 {
padding: 16px;
}
#cg-ig-PL5 .ig-title {
font-size: 18px;
}
#cg-ig-PL5 .stats-grid {
grid-template-columns: 1fr;
}
#cg-ig-PL5 .step-item {
padding: 12px;
}
}

Instalar CompleteGreet en Shopify

Guía de configuración en cuatro pasos, sin necesidad de programar

1

Instalar desde Shopify App Store

Busca «CompleteGreet» en la sección Apps de la administración de Shopify y haz clic en Instalar.

2

Conectar tu cuenta

Inicia sesión o crea tu cuenta de CompleteGreet y autoriza el acceso a Shopify.

3

Subir tu saludo en vídeo

Graba o sube un vídeo de bienvenida breve directamente desde el panel y comprueba cómo se ve en tu tienda.

4

Añadir el código del widget, opcional

Si necesitas una posición personalizada, coloca este fragmento antes de la etiqueta de cierre siguiendo la documentación actual:

Copiar Ejemplo

Más consultas

Ejemplo

Tiempo en el sitio

Ejemplo

Conversión

Merchshark.dk describe una mejor interacción y conversión después de añadir un videowidget. Úsalo como inspiración y mide tu propio efecto.

Instala CompleteGreet en Shopify en pocos minutos

Consulta los datos HTML anteriores para ver el recorrido completo.

Consulta los datos HTML estáticos anteriores para ver todos los detalles.

¿Qué debes comprobar antes de publicar?

Abre la tienda en Chrome, Safari y Firefox y comprueba cómo aparece la videoburbuja . Debe quedar en una esquina sin cubrir el menú de navegación, el botón del carrito ni el proceso de pago. Si se solapa con elementos importantes, ajusta el desplazamiento en la configuración del widget antes de anunciarlo.

El tráfico móvil es especialmente importante en las tiendas Shopify.

Prueba en Safari de iOS y Chrome de Android con dispositivos reales, no solo con emuladores. La burbuja debe adaptarse sin forzar el vídeo a pantalla completa y el botón de cierre debe quedar al alcance del pulgar. Si cubre el menú móvil o una barra fija de añadir al carrito, las personas pueden abandonar antes de ver el producto.

La segmentación por página es donde muchos equipos cometen errores.

Comprueba que las reglas de visualización corresponden a tu objetivo. Un vídeo de bienvenida encaja en la página de inicio, no necesariamente en el pago, donde puede crear fricción. Los saludos específicos deben activarse solo en las páginas correspondientes. Usa los casos de tiendas sostenibles como inspiración, pero mide el efecto en tus propias colecciones y mantén el pago despejado.

Ejecuta Google PageSpeed Insights después de la instalación. Los recursos de vídeo pesan y los temas de Shopify ya pueden ser exigentes. Si empeora tu LCP, comprueba la carga asíncrona y el tamaño del archivo. Mide antes y después antes de sacar conclusiones.

Prueba los envíos del formulario de principio a fin. Rellena el formulario de contacto del widget, envíalo y confirma que el contacto llega a tu bandeja de entrada o CRM. Un formulario roto daña la confianza rápidamente.

Haz un último recorrido como cliente. Consulta un producto, añádelo al carrito e inicia el pago. El widget debe ayudar, no resultar invasivo. Comprueba ese equilibrio con datos reales.

Los videowidgets convierten una tienda Shopify estática en una experiencia interactiva en la que el visitante ve a una persona real en lugar de iconos de chat automáticos. La tecnología se carga de forma asíncrona para no bloquear la página, en línea con la guía de Google sobre Web Vitals para mantener una interacción ágil.

La implementación suele requerir una instalación de script y después la configuración desde un panel visual.

CompleteGreet entrega el vídeo mediante un fragmento ligero de JavaScript que se inicia después de cargar el contenido de la página. El código se copia una vez en el tema y los ajustes orientados al visitante se gestionan desde el panel externo, sin tener que editar archivos Liquid cada vez.

  1. Inicia sesión en el panel de CompleteGreet y elige Añadir dominio en el menú del sitio.
  2. Introduce la URL de la tienda Shopify y copia el script de instalación generado.
  3. En Shopify, ve a Online Store, Themes y después selecciona Actions y Edit code.
  4. Abre el archivo theme.liquid y coloca el script antes de la etiqueta de cierre head siguiendo la guía actual.
  5. Guarda el archivo y vuelve a CompleteGreet para comprobar el estado de la conexión.

El script puede registrar un service worker y entregar el vídeo mediante una red de distribución, pero el resultado depende del navegador, del tema y de los demás scripts. Comprueba el proceso de pago en tu tienda en lugar de asumir que la arquitectura será idéntica en todas.

Las tiendas que activan el widget pueden observar cambios en las consultas después del lanzamiento, pero el efecto varía. Consulta la página de precios actual para conocer el plan Build, sus límites y las opciones de vídeo y branding incluidas.

La prueba en móvil sigue siendo importante porque los temas de Shopify gestionan el tamaño de pantalla de forma distinta. Comprueba que la burbuja no cubra el botón de pago en un iPhone SE u otra pantalla pequeña antes de activarla en todas las páginas de producto.

Preguntas frecuentes

¿Cómo añado CompleteGreet a mi tienda Shopify sin editar código?

Instala la aplicación de CompleteGreet desde Shopify App Store y sigue los pasos actuales de permisos y configuración. Después comprueba la tienda activa y sube o graba tu saludo desde el panel.

¿Por qué no aparece mi videoburbuja en la vista previa del tema de Shopify?

La vista previa del tema de Shopify se ejecuta en un entorno aislado que puede bloquear scripts de terceros por seguridad. La burbuja suele aparecer en la tienda activa cuando sales de la vista previa. Prueba la URL en una ventana privada o desde un móvil.

¿Puedo mostrar CompleteGreet solo en las páginas de producto de Shopify?

Sí. Utiliza reglas de segmentación por URL en el panel de CompleteGreet para incluir solo rutas que contengan /products/. También puedes excluir productos concretos mediante sus identificadores. Comprueba siempre que las reglas correspondan a tu plan y a la estructura actual de la tienda.

¿CompleteGreet ralentiza mi tienda Shopify?

El script se carga de forma asíncrona y no debería bloquear la primera representación, pero el efecto depende del tema, los vídeos y el resto de scripts. Mide Google PageSpeed y Core Web Vitals antes y después de instalarlo.

¿Cuánto cuesta CompleteGreet para una tienda Shopify con 5.000 visitantes mensuales?

Consulta la página de precios actual para encontrar el plan que encaje con unos 5.000 visitantes únicos. Los importes y las funciones pueden cambiar, así que usa la página vigente en lugar de precios antiguos y comprueba cómo se cuentan las visitas, los vídeos y los límites adicionales.

¿Puedo usar CompleteGreet en varias tiendas Shopify con una sola cuenta?

Depende del plan actual y de las condiciones para varios sitios. Comprueba la página de precios o la documentación vigente antes de crear instalaciones separadas para varias marcas.

Azad Habib

Azad Habib

CEO & Founder of CompleteGreet

Azad Habib is the founder of CompleteGreet. With a background in ecommerce and user experience, he works at the intersection of trust, clarity, and conversion to help businesses make their websites feel more human from the first click.