Personalizar la apariencia del bloque de tema

Aprende a personalizar el bloque de tema del formulario de contacto de SupportRetriever para que encaje con el diseño de tu tienda Shopify.

Opciones de personalización

El bloque de tema del formulario de contacto ofrece varios ajustes en el editor de tema de Shopify:

Ajustes del bloque (lado Shopify)

• URL del formulario: Enlace a tu formulario SupportRetriever
• Altura del formulario: Altura del contenedor (400px - 1000px)
• Mostrar borde: Activar o desactivar el borde alrededor del formulario

Ajustes del formulario (lado SupportRetriever)

La personalización adicional se hace en el panel de SupportRetriever:

• Título y descripción del formulario
• Color de fondo
• Color del botón
• Color del texto
• Logo/marca
• Etiquetas y placeholders de los campos

Personalizar en el editor de tema de Shopify

Acceder a los ajustes del bloque

1. Inicia sesión en el admin de Shopify
2. Ve a Tienda online → Temas → Personalizar
3. Ve a la página donde está el bloque Formularioulario de contacto
4. Haz clic en el bloque Formularioulario de contacto para seleccionarlo
5. Los ajustes aparecen en el panel derecho

Altura del formulario

El control de altura define cuánto espacio vertical ocupa el formulario.

Alturas recomendadas por uso

Altura	Mejor para	Notas
400px	Colocación compacta	Solo se ve la parte superior; hace falta desplazarse
600px	Diseño equilibrado	Se ven la mayoría de campos; poco desplazamiento
800px	Colocación estándar	Se ven todos los campos cómodamente
1000px	Formularioulario completo	Se ve todo el formulario sin desplazamiento (recomendado)

Cómo funciona la altura

• El iframe del formulario usa la altura indicada
• Si el contenido es más alto, el usuario se desplaza dentro del iframe
• Si es más bajo, queda espacio vacío debajo
• En móvil se ajusta automáticamente

Buenas prácticas: Empieza con 1000px para ver el formulario completo y ajusta si hace falta.

Borde

El interruptor del borde añade un contorno sutil:

Mostrar borde (activado):

• Borde gris claro de 1px
• Esquinas redondeadas 8px
• Separa visualmente el formulario del resto de la página
• Útil cuando el fondo es similar al de la página

Sin borde (desactivado):

• El formulario se integra con la página
• Apariencia más integrada
• Útil cuando el fondo del formulario coincide con el de la página

Personalizar en el panel de SupportRetriever

Para personalizar más, ajusta los valores en tu cuenta SupportRetriever:

Colores del formulario

1. Inicia sesión en SupportRetriever
2. Ve a Gestión de formularios (icono del formulario en el menú)
3. Baja hasta "Apariencia del formulario"
4. Personaliza los colores:

Color de fondo

El color detrás del formulario:

Consejo: Iguala este color al fondo de la página de Shopify para una integración natural.

Color del botón

Color del botón de envío:

Consejo: Usa el color principal de tu marca o el color de botones del tema de Shopify.

Color del texto

Color del texto del formulario (etiquetas, descripciones):

Consejo: Asegura buen contraste con el fondo para legibilidad.

Logo y marca

Añade el logo de tu tienda al formulario:

1. En Gestión de formularios, busca "URL del logo"
2. Introduce la URL de la imagen del logo
3. El logo aparece en la parte superior del formulario
4. Tamaño recomendado: 200px de ancho × 60px de alto (máx.)

Obtener la URL del logo:

• Sube el logo en Shopify: Configuración → Archivos → Subir
• Copia la URL
• Pégala en el campo del logo en SupportRetriever

Título y descripción del formulario

Personaliza el texto que aparece encima del formulario:

Ejemplos de título:

• "Contáctanos"
• "Escríbenos"
• "Envíanos un mensaje"
• "Atención al cliente"

Ejemplos de descripción:

• "Nos encantaría saber de ti."
• "¿Tienes alguna pregunta? Estamos aquí para ayudarte."
• "Rellena el formulario y te responderemos en 24 horas."

Etiquetas y placeholders de los campos

Personaliza etiquetas y placeholders:

Campo nombre:

• Etiqueta: "Tu nombre", "Nombre completo", "Nombre"
• Placeholder: "John Doe", "Introduce tu nombre"

Campo correo:

• Etiqueta: "Correo electrónico", "Tu correo", "Correo"
• Placeholder: "tu@ejemplo.com", "Introduce tu correo"

Campo mensaje:

• Etiqueta: "Mensaje", "Tu mensaje", "¿En qué podemos ayudarte?"
• Placeholder: "Cuéntanos qué necesitas...", "Describe tu consulta"

Ubicación y maquetación

Colocación a ancho completo

Para un formulario destacado a todo el ancho:

1. Añade el bloque en una sección a ancho completo
2. Quita otro contenido de esa sección
3. Pon altura 1000px
4. Desactiva el borde para integración continua

Ideal para: Páginas de contacto dedicadas

Colocación en línea

Para formulario junto a otro contenido:

1. Añade el bloque en una sección de varias columnas
2. Coloca contenido en columnas adyacentes
3. Ajusta la altura al contenido
4. Activa el borde para separar del contenido

Ideal para: Páginas Nosotros, páginas de producto

Encima/debajo del contenido

Para formulario con texto introductorio:

1. Añade una sección de texto encima del formulario
2. Incluye título y descripción
3. Añade el bloque Formularioulario de contacto debajo
4. Configura una altura adecuada

Ejemplo de estructura:

[Sección de texto]
  Título: "Contacta con nuestro equipo"
  Descripción: "Estamos aquí para ayudarte con cualquier duda."

[Bloque Formularioulario de contacto]
  Altura: 1000px
  Borde: No

Responsive en móvil

El formulario se adapta solo a móviles:

Escritorio (> 768px)

• Ancho completo dentro del contenedor
• Todos los campos visibles
• Espaciado cómodo

Tablet (768px - 1024px)

• Diseño un poco más compacto
• Los campos se mantienen en horizontal cuando se puede
• Áreas de toque adecuadas

Móvil (< 768px)

• Diseño en columna
• Campos a ancho completo
• Áreas de toque más grandes
• Teclado optimizado

Pruebas: Previsualiza siempre el formulario en móvil antes de publicar.

Consejos para móvil

• Altura: 600-800px suele ir bien en móvil
• Borde: Valora quitar el borde en móvil para ganar espacio
• Ubicación: A ancho completo suele funcionar mejor en móvil

Personalización avanzada

CSS (usuarios avanzados)

El iframe del formulario permite poco CSS desde fuera. Aun así puedes:

1. Ajustar el contenedor del iframe en el tema de Shopify
2. Añadir padding/márgenes alrededor del bloque
3. Personalizar el fondo de la sección

Nota: No se puede personalizar el CSS dentro del formulario (está en un iframe por seguridad).

Varios formularios

Si necesitas distintas apariencias en distintas páginas:

1. Crea varios formularios en SupportRetriever (plan Pro)
2. Personaliza cada uno
3. Usa URLs distintas en distintos bloques de tema

Ejemplos:

• Formularioulario de ventas con botón verde
• Formularioulario de soporte con botón azul
• Contacto general con botón morado

Hacer que encaje con tu tema

Para que el formulario encaje con tu tema de Shopify:

1. Fondo: Igual que el fondo de la página
2. Botón: Igual que el color principal de botones del tema
3. Texto: Igual que el color de texto del tema
4. Borde: Desactívalo si tu página tiene pocos bordes
5. Logo: El logo de tu tienda

Probar la personalización

Antes de publicar:

1. Vista previa en el editor: Revisa en escritorio
2. Probar en móvil: Usa la vista previa móvil del editor
3. Enviar mensaje de prueba: Comprueba que todo funciona
4. Varios navegadores: Safari, Chrome, Firefox
5. Contraste: Comprueba que el texto se lee bien

Escenarios habituales

Escenario 1: Página de contacto minimalista

Objetivo: Formularioulario limpio que se integre en la página

Ajustes:

• Fondo: Blanco (#ffffff)
• Botón: Negro (#000000)
• Texto: Gris oscuro (#4a4a6a)
• Borde: No
• Altura: 1000px
• Logo: Ninguno (o logo pequeño)

Escenario 2: Soporte de producto con marca

Objetivo: Formularioulario visible con colores de marca

Ajustes:

• Fondo: Color claro de la marca
• Botón: Color principal de la marca
• Texto: Color oscuro de la marca
• Borde: Sí
• Altura: 800px
• Logo: Logo de la marca

Escenario 3: Sección de contacto en línea

Objetivo: Formularioulario junto a texto

Ajustes:

• Fondo: Igual que el de la página
• Botón: Color de botón del tema
• Texto: Color de texto del tema
• Borde: Sí (para separar del texto)
• Altura: 600px
• Logo: Ninguno

Solución de problemas de apariencia

El formulario se ve cortado

Solución: Aumenta la altura del formulario en los ajustes del editor de tema de Shopify.

Los colores no coinciden con mi tema

Solución: Cambia los colores en Gestión de formularios de SupportRetriever, no en Shopify.

El borde molesta

Solución: Desactiva "Mostrar borde" en los ajustes del editor de tema de Shopify.

El logo es demasiado grande

Solución: Redimensiona la imagen del logo a 200px × 60px o menos antes de subirla.

El formulario no cabe en móvil

Solución: El formulario es responsive. Comprueba que la sección del tema esté a ancho completo en móvil.

Buenas prácticas

1. Mantén la simplicidad: No personalices en exceso; diseños limpios funcionan mejor
2. Alineado con la marca: Usa los colores y tipografía de tu tienda
3. Prueba bien: Revisa en varios dispositivos antes de publicar
4. Accesibilidad: Asegura buen contraste para la lectura
5. Actualiza con coherencia: Si cambias de marca, actualiza también el formulario

Temas relacionados

• Instalar el bloque de tema del formulario de contacto
• Obtener la URL de tu formulario
• Personalizar la apariencia del formulario
• Solucionar la extensión de tema