404

Enlaces destacados

1. Documentación de Shopify sobre el editor de temas
2. Documentación de Company XYZ sobre los ajustes de espaciado de sección
3. Documentación de Company XYZ sobre los ajustes de fondos de sección
4. Documentación de Company XYZ sobre los ajustes de separadores
5. Documentación de Company XYZ sobre los ajustes de ancho del diseño

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Esta sección controla la presentación de tu página 404. El contenido del mensaje se gestiona en el editor de contenido predeterminado de tu tema, mientras que los ajustes aquí te permiten definir el estilo visual y el diseño de la página. Para la configuración y la navegación en el editor, consulta documentación de Shopify sobre el editor de temas

Content

Usa el editor de contenido predeterminado de tu tema para cambiar el propio mensaje de página no encontrada. Esta sección se utiliza mejor para ajustar cómo se siente ese mensaje en la página, incluidos los colores, el espaciado y el diseño circundante.

Nota

Si la página sigue pareciendo genérica después de darle estilo, actualiza también el mensaje predeterminado. Una presentación sólida funciona mejor cuando el texto es igual de intencional.

Ajustes de color

Estos ajustes sobrescriben los colores generales de tu tema solo para esta sección. Son útiles cuando tu página 404 necesita más contraste, un tono más suave o un aspecto más distintivo sin cambiar el resto del sitio.

Ajusta juntos los colores del texto y del subtítulo, especialmente si añades un fondo personalizado. Si la sección usa un fondo más oscuro o más detallado, revisa ambos colores para mantener el mensaje legible de un vistazo.

Comprueba el contraste después de cambiar los estilos de texto y fondo. Una página 404 suele ser sobre todo texto, así que un contraste bajo puede hacer que se vuelva difícil de usar rápidamente.

Ajustes estándar de sección

Ajustes de espaciado

Ajustes de espaciado controlan el espacio por encima y por debajo del contenido de la 404 en escritorio y en móvil. En una página corta como esta, el espaciado tiene un gran efecto en si el diseño se percibe equilibrado o incómodamente vacío.

Usa un espaciado móvil menor si la página parece demasiado alta en teléfonos. Aumenta el espaciado de escritorio cuando el contenido se vea apretado o demasiado cerca de los elementos de la página próximos.

Ajustes de fondo de sección

Ajustes de fondo de sección te permiten añadir un color, degradado, imagen o video detrás del mensaje de página no encontrada. Los ajustes de superposición ayudan a mantener el contenido legible cuando usas medios de fondo.

Los degradados sobrescriben los colores sólidos, y los degradados de superposición sobrescriben los colores de superposición. Los valores vacíos o transparentes suelen conservar el estilo de reserva de la sección, mientras que los colores, degradados o medios explícitos hacen que el área 404 sea visualmente más independiente del resto de la página.

Si usas una imagen o un video, mantenlos sutiles para que la página siga leyéndose como un mensaje útil y no como un elemento visual. Los medios también pueden afectar al recorte, la carga, la reserva y la legibilidad, especialmente cuando los medios de escritorio y móvil se configuran por separado.

Consejo

Un degradado suave o una imagen con pocos detalles suele funcionar mejor que medios recargados en una página 404.

Ajustes de separador

Ajustes de separador añaden una línea en la parte superior o inferior de la sección. Esto puede ayudar a que la página 404 se sienta enmarcada de forma más intencional, especialmente cuando forma parte de un diseño de página más amplio.

Si dejas transparente el color del separador, la sección usa el color de borde de tu tema. En la mayoría de los casos, un separador sutil funciona mejor que uno llamativo.

Ajustes de ancho

Ajustes de ancho controlan el ancho del área de contenido y del contenedor exterior de la sección. Esto es especialmente útil para mantener fácil de leer un texto corto o para dar más espacio a los tratamientos de fondo.

Para la mayoría de las páginas 404, un ancho de contenido moderado resulta más legible que un diseño muy ancho. Si cambias el ancho de la sección mientras usas un fondo, previsualiza el resultado en la vista pública de la tienda online, porque las vistas previas del editor pueden hacer que los cambios de ancho parezcan menos precisos.

Notas de uso

1. Diseño y mensaje juntos. Actualiza también el texto predeterminado de la 404, además del diseño de la sección, para que la página parezca intencional y no un recurso de reserva.
   1. Mantén el texto claro y directo.
   2. Asegúrate de que el tratamiento visual respalde el mismo tono.
2. Mantén el texto fácil de revisar. Elige combinaciones de colores y anchos que hagan que el mensaje sea legible rápidamente tanto en escritorio como en móvil.
3. Usa los fondos con moderación. Las opciones sutiles de color, degradado, imagen o video apoyan mejor el mensaje que los elementos visuales llamativos.
4. Equilibra el espaciado. Ajusta el espaciado según la cantidad de contenido que muestres para que la página se vea pulida y no vacía o apretada.
5. Previsualiza en pantallas reales. Comprueba el resultado final en la tienda online, especialmente después de cambiar el ancho, los medios de fondo o el espaciado móvil.
6. Revisa ambos tamaños de ventana. Los controles de escritorio y móvil pueden producir diferentes comportamientos de alineación, visibilidad y medios, así que verifica la página 404 en ambos tamaños antes de publicarla.