Formulario de inicio de sesión

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre los ajustes de fondos de sección
3. Documentación de Company XYZ sobre los ajustes de espaciado de sección
4. Documentación de Company XYZ sobre los ajustes de separadores
5. Documentación de Company XYZ sobre los ajustes de anchos del diseño

Videos útiles

Vídeo de Shopify Academy: personalización de tu tienda

Vídeo de Shopify Academy: personalización de tu tienda

Use esta sección para controlar el área principal de inicio de sesión que los clientes usan para acceder a su cuenta. Le ayuda a refinar el mensaje y la presentación de la página, a la vez que mantiene la experiencia de inicio de sesión clara y fácil de usar.

Ajustes básicos

Los ajustes básicos le permiten personalizar el encabezado, el subtítulo y el icono opcional que se muestra con el formulario de inicio de sesión. Para obtener una visión general más amplia de la configuración, consulte documentación de Shopify sobre secciones y bloques. Este es el mejor lugar para añadir un breve mensaje de bienvenida, aclarar que la página es para clientes que regresan o adaptar el tono al resto de su tienda.

Si deja en blanco el encabezado o el subtítulo, la sección puede usar en su lugar el contenido predeterminado del tema. Esto es útil cuando desea una configuración limpia rápidamente, pero un texto personalizado suele crear una experiencia de cuenta más pulida.

Consejo

Mantenga el texto de la página de inicio de sesión breve y práctico. Normalmente, los clientes vienen aquí para iniciar sesión, no para explorar ni leer mensajes promocionales.

Ajustes de color

Estos ajustes anulan los colores generales de su tema solo para esta sección. Úselos cuando el área de inicio de sesión necesite un contraste más fuerte, un tono más suave o una mejor alineación con un fondo personalizado.

Puede ajustar el icono, el texto principal y el subtítulo por separado para crear una jerarquía visual clara. Si añade una imagen de fondo, un degradado o un vídeo, revise la sección tanto en escritorio como en móvil para asegurarse de que el texto siga siendo fácil de leer. Las opciones de color explícitas, los degradados y las anulaciones de medios hacen que esta área se sienta más independiente, mientras que los valores en blanco o transparentes suelen conservar el estilo de reserva del tema.

Los fondos decorativos nunca deben reducir la legibilidad. Si el área de inicio de sesión resulta más difícil de leer, simplifique el fondo o aumente la intensidad de la superposición y el contraste del texto.

Ajustes estándar de sección

Ajustes de fondo de sección

Use Ajustes de fondo de sección para añadir un color, un degradado, una imagen o un vídeo detrás de la sección de inicio de sesión. En esta sección, los fondos funcionan mejor cuando respaldan su marca sin distraer del formulario.

El color y la opacidad de la superposición ayudan a conservar la legibilidad sobre imágenes y vídeo. Los medios de fondo específicos para móvil son especialmente útiles cuando la imagen de escritorio se recorta de forma poco adecuada o resulta demasiado pesada en pantallas más pequeñas, así que revise ambos viewports si usa medios diferentes para cada uno.

Ajustes de espaciado

Use Ajustes de espaciado para controlar el espacio encima y debajo del contenido de inicio de sesión. Esto es útil cuando la página se siente demasiado ajustada o cuando desea que el área de inicio de sesión encaje de forma más cómoda en el diseño general de la página.

El espaciado de escritorio y móvil se puede ajustar por separado, de modo que puede mantener la sección equilibrada en todos los tamaños de pantalla. Un espaciado móvil más reducido suele ayudar a que el formulario se vea antes sin que la página parezca recargada.

Ajustes de separador

Use Ajustes de separador para añadir una línea en la parte superior o inferior de la sección. En una página de inicio de sesión, los separadores resultan útiles principalmente cuando desea un límite más claro entre esta sección y el contenido circundante.

Normalmente, un divisor sutil es suficiente aquí. Si deja el color del separador transparente, la sección vuelve al comportamiento general del color del borde.

Ajustes de ancho

Use Ajustes de ancho para controlar el ancho del contenido y el alcance general de la sección. En la mayoría de las páginas de inicio de sesión, un ancho de contenido más estrecho mantiene el formulario centrado y más fácil de leer.

El ancho de la sección es más importante cuando también utiliza un tratamiento de fondo. Si prueba diseños de ancho completo o full-bleed, prévisualícelos también en la tienda online activa, ya que el encuadre del editor puede hacer que los cambios de ancho parezcan distintos de como se ven en la página real.

Notas de uso

1. Mantenga el mensaje breve. Use un encabezado directo y un texto de apoyo conciso para que los clientes puedan iniciar sesión rápidamente.
2. Proteja el contraste. Al usar imágenes, degradados o vídeo, ajuste las superposiciones y los colores del texto hasta que la sección siga siendo fácil de leer de un vistazo.
3. Revise ambos viewports. Los controles de escritorio y móvil pueden cambiar el diseño, la alineación, la visibilidad y el recorte, así que revise el formulario de inicio de sesión en ambos tamaños de pantalla antes de publicarlo.
4. Prefiera anchos enfocados. Un área de contenido más estrecha suele adaptarse mejor a las páginas de inicio de sesión que los diseños amplios, porque mantiene la atención en el formulario.
5. Ajuste el espaciado móvil. Reduzca el espaciado móvil si el formulario queda demasiado abajo en pantallas más pequeñas.
6. Use estados claros. Mantenga los mensajes de éxito y error fáciles de leer para que los clientes puedan recuperarse rápidamente cuando el formulario esté vacío, se haya enviado o muestre comentarios de validación.