Añade un formulario de contacto profesional a tu tienda Shopify en minutos con la extensión de tema de SupportRetriever.
¿Qué es una extensión de tema?
Una extensión de tema permite añadir funcionalidad a tu tienda Shopify sin editar el código del tema. El bloque Formularioulario de contacto de SupportRetriever se puede colocar en cualquier página para que los clientes te contacten fácilmente.
Ventajas
- Sin código: Arrastra y suelta el bloque en tu tema
- Instalación limpia: No hace falta editar archivos del tema
- Compatible con actualizaciones: Sobrevive a actualizaciones y cambios del tema
- Responsive en móvil: Funciona bien en todos los dispositivos
- Aspecto profesional: Personalizable para tu marca
- Tienda limpia: La marca SupportRetriever se oculta automáticamente cuando se inserta en tu tienda Shopify (según las políticas de marca de Shopify)
Requisitos previos
Antes de empezar:
- Necesitas una tienda Shopify (cualquier plan)
- Debes estar conectado al admin de Shopify
- Necesitas una cuenta SupportRetriever con un formulario creado
Métodos de instalación
Método 1: Enlace directo con un clic (recomendado)
La forma más rápida de instalar el bloque es usar el enlace directo desde el panel de SupportRetriever.
Paso 1: Conectar tu tienda Shopify
- Inicia sesión en tu cuenta SupportRetriever
- Ve a Ajustes (icono ⚙️ en el menú lateral)
- Baja hasta la sección "Integración con Shopify"
- Introduce la URL de tu tienda:
yourstore.myshopify.com - Haz clic en Conectar Shopify
- Autoriza la conexión cuando se solicite
Paso 2: Abrir el editor de tema con el enlace directo
- En la sección de integración con Shopify verás un botón Abrir editor de tema
- Haz clic en el botón: se abrirá el editor de tema de Shopify
- El bloque Formularioulario de contacto estará listo para añadir
Este botón abre el editor de tema de Shopify con el bloque Formularioulario de contacto listo para añadir.
Paso 3: Añadir el bloque a la página
- En el editor de tema verás el editor de la página
- Haz clic en Añadir bloque o Añadir sección donde quieras el formulario
- Elige Apps en el menú
- Selecciona Formularioulario de contacto (SupportRetriever)
- El bloque se añadirá a la página
Paso 4: Configurar el bloque
- Con el bloque Formularioulario de contacto seleccionado, mira el panel de ajustes a la derecha
- URL del formulario: Pega la URL de tu formulario SupportRetriever
- Obtén la URL en el panel de SupportRetriever
- Formularioato:
https://supportretriever.com/form/your-form-id
- Altura del formulario: Ajusta la altura (recomendado 1000px para formularios completos)
- Mostrar borde: Activa o desactiva el borde (opcional)
Paso 5: Guardar y publicar
- Haz clic en Guardar en la esquina superior derecha del editor de tema
- Haz clic en Publicar para que el formulario esté activo en tu tienda
- Visita tu página para ver el formulario en funcionamiento
Método 2: Instalación manual
Si prefieres añadir el bloque a mano sin el enlace directo:
Paso 1: Acceder al editor de tema
- Inicia sesión en el admin de Shopify
- Ve a Tienda online → Temas
- Haz clic en Personalizar en tu tema activo
Paso 2: Ir a tu página
- En la parte superior del editor, selecciona la página donde quieras el formulario
- Opciones habituales:
- Página Contacto (la más común)
- Página Nosotros
- Páginas personalizadas
- Páginas de producto (para consultas sobre productos)
Paso 3: Añadir sección o bloque
- Haz clic en Añadir sección (formulario a ancho completo) o Añadir bloque (dentro de una sección existente)
- Baja hasta Apps
- Selecciona Formularioulario de contacto (verás "SupportRetriever" o el nombre de la extensión)
Paso 4: Configurar el bloque
Igual que en el Método 1, Paso 4: añade la URL del formulario y ajusta los ajustes.
Obtener la URL de tu formulario
Para encontrar la URL de tu formulario SupportRetriever:
- Inicia sesión en SupportRetriever
- Ve a tu Panel de administración
- Haz clic en Gestión de formularios (icono del formulario en el menú lateral)
- La URL aparece arriba:
https://supportretriever.com/form/[tu-id-de-formulario] - Haz clic en Copiar para copiarla al portapapeles
Ver también: Obtener la URL de tu formulario para instrucciones detalladas.
Ubicaciones habituales
Página de contacto (la más usada)
- Crea o edita tu página de Contacto
- Quita el contenido por defecto (o mantén contenido arriba/abajo del formulario)
- Añade el bloque Formularioulario de contacto
- Guarda y publica
Páginas de producto
Añade el formulario en productos concretos para consultas sobre el producto:
- Abre el editor de tema
- Selecciona Productos → Producto por defecto
- Añade el bloque Formularioulario de contacto a la plantilla de producto
- Configura los ajustes
Varias páginas
Puedes añadir el bloque en varias páginas:
- Página de contacto para consultas generales
- Página Nosotros para consultas comerciales
- Página "Soporte" para atención al cliente
- Páginas de producto para preguntas sobre productos
Cada instancia puede usar la misma URL de formulario o URLs distintas (si tienes varios formularios en SupportRetriever).
Consejos de personalización
Altura
La altura define cuánto espacio ocupa el formulario:
- 600px: Adecuado si hay más contenido arriba/abajo
- 800px: Buen equilibrio para la mayoría de formularios
- 1000px: Muestra el formulario completo sin desplazamiento (recomendado)
Si el contenido es más alto que la altura configurada, el formulario se desplazará dentro del iframe.
Borde
- Mostrar borde: Añade un borde sutil alrededor del formulario (bueno para separar)
- Sin borde: Integración más continua con la página
Móvil
El bloque es responsive en móvil:
- El formulario se adapta al ancho de pantalla
- Los campos se apilan en vertical en móvil
- Campos cómodos para tocar
- Optimizado para iPhone y Android
Solución de problemas
El campo "URL del formulario" está vacío o muestra el placeholder
Solución: Debes pegar la URL de tu formulario SupportRetriever en los ajustes. Cópiala desde el panel de SupportRetriever.
El formulario no aparece o muestra "Formularioulario no encontrado"
Posibles causas:
- URL incorrecta (revisa errores)
- El formulario no existe o se eliminó
- Problema de permisos RLS (contacta con soporte)
Solución: Comprueba la URL; debe empezar por https://supportretriever.com/form/. Consulta Solucionar la extensión de tema.
El formulario se corta (muy bajo o muy alto)
Solución: Ajusta el control Altura del formulario en los ajustes del bloque. Sube a 1000px para ver el formulario completo.
El formulario aparece pero los envíos no funcionan
Posibles causas:
- Problema de carga de Turnstile (protección anti-bots)
- Límite de correos superado
- El navegador bloquea el envío
Solución: Revisa el panel de SupportRetriever por problemas de entrega. Consulta Solucionar la extensión de tema.
El formulario no carga o muestra errores
Posibles causas:
- URL del formulario incorrecta
- Problema de carga de Turnstile
- Problemas de conexión
Solución: Comprueba la URL en los ajustes del bloque y que coincida con la del panel de SupportRetriever. Consulta Solucionar la extensión de tema para más detalles.
Buenas prácticas
Para dueños de tienda
- Página de contacto dedicada: Un lugar claro para las consultas
- Altura 1000px: Así se ve el formulario completo sin desplazamiento
- Probar en móvil: Previsualiza en móvil antes de publicar
- Enlace en la navegación: Añade "Contacto" al menú principal apuntando a la página del formulario
Para equipos de soporte
- Revisar envíos: Consulta SupportRetriever con frecuencia
- Respuestas guardadas: Configura respuestas habituales para contestar más rápido
- Integración Shopify: Conecta tu tienda para ver datos de pedidos en las conversaciones
Para varias tiendas
Si gestionas varias tiendas Shopify:
- Usa una sola cuenta SupportRetriever para todas
- Crea formularios distintos por tienda (opcional)
- Usa correos destinatarios distintos por tienda (opcional)
- Añade el nombre de la tienda en los metadatos del formulario para filtrar
Siguientes pasos
Después de instalar el formulario:
- Pruébalo: Envía un mensaje de prueba para comprobar que funciona
- Personaliza: Ajusta colores y marca en los ajustes de SupportRetriever
- Configura el equipo: Añade a tu equipo de soporte en SupportRetriever
- Respuestas guardadas: Crea respuestas habituales para un soporte más rápido