Barra de características

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre ajustes de colores
3. Documentación de Company XYZ sobre el bloque de funciones
4. Documentación de Shopify sobre la personalización de secciones
5. Documentación de Company XYZ sobre los ajustes de espaciado de sección
6. Documentación de Company XYZ sobre los ajustes de fondo de sección
7. Documentación de Company XYZ sobre los ajustes de separadores
8. Documentación de Company XYZ sobre los ajustes de visibilidad
9. Documentación de Company XYZ sobre los ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Use esta sección para destacar mensajes breves y de alto valor, como ventajas de envío, promesas de soporte, políticas de la tienda o anuncios oportunos. Puede seguir el comportamiento compartido del tema de forma predeterminada, o bien puede añadir bloques Feature para controlar por completo el contenido que se muestra aquí.

Ajustes principales

Estos ajustes definen el diseño general y la presentación de la barra antes de que personalice elementos individuales.

1. Alineación del texto controla cómo se sitúa el texto de la característica dentro de cada elemento. Hágalo coincidir con las secciones cercanas para mantener la coherencia visual de la página.
2. Posición del icono cambia la relación entre los iconos y el texto. La izquierda o la derecha suelen funcionar bien en diseños horizontales compactos, mientras que la parte superior o inferior funciona mejor cuando cada característica necesita más separación visual.
3. Mostrar borde del icono añade énfasis adicional alrededor de los iconos. Puede ayudar a que los iconos sencillos destaquen, pero puede resultar demasiado recargado si la sección ya usa separadores marcados o un fondo intenso.

Si quiere que esta sección muestre contenido de características personalizado, añada al menos un bloque Feature. Una vez añadidos los bloques, estos reemplazan el comportamiento compartido de contenido predeterminado para esta sección.

Para obtener una guía más amplia sobre cómo funcionan los bloques en el editor, consulte documentación de Shopify sobre secciones y bloques

Ajustes de color

Estos ajustes sustituyen los colores predeterminados de esta sección. Úselos cuando la barra de características necesite más contraste, un acento de marca o una prioridad visual distinta de la del diseño circundante. Más información en documentación de Company XYZ sobre ajustes de color.

Ajuste los colores del icono, del texto y del borde del icono como un conjunto para que la sección tenga una apariencia intencional. Si usa un fondo personalizado, compruebe la legibilidad con cuidado antes de publicar.

Tipos de bloque admitidos

1. Feature

Bloque Feature

Use el bloque Feature para añadir un icono, un título, texto de apoyo opcional y un enlace opcional. Más información en Característica.

1. Icono puede ser un emoji o un nombre de icono. Déjelo en blanco para una presentación más sencilla y centrada en el texto.
2. Título y subtítulo funcionan mejor si se mantienen breves. Un texto corto ayuda a que varias características se mantengan equilibradas en una sola fila.
3. Enlace resulta útil para destinos relacionados como políticas, preguntas frecuentes o colecciones. Añada enlaces solo cuando el destino coincida claramente con el mensaje.
4. Visibilidad del bloque le permite ocultar características individuales en escritorio o en móvil, lo que resulta útil cuando una versión móvil más breve se lee mejor.

Nota

Esta sección admite hasta 4 bloques Feature, así que céntrese en los mensajes que los clientes deberían notar primero.

Para conocer los detalles de configuración del editor, consulte documentación de Shopify sobre la personalización de secciones

Ajustes estándar de sección

Ajustes de espaciado

Ajustes de espaciado controlan el espacio por encima y por debajo de la barra de características. Un espaciado más pequeño funciona bien para mensajes de tipo utilidad, mientras que un espaciado mayor hace que la sección se perciba más como un área de contenido independiente. Los valores separados para escritorio y móvil son útiles cuando la barra se siente apretada en pantallas más pequeñas.

Ajustes de fondo de sección

Ajustes de fondo de sección le permiten añadir un color, degradado, imagen o video detrás de la barra de características. Esto resulta útil cuando la sección necesita más separación visual o un aspecto más promocional. Los ajustes de superposición ayudan a conservar la legibilidad, y las superposiciones con degradado tienen prioridad sobre los colores sólidos de superposición.

Precaución

Los fondos de imagen y video pueden reducir rápidamente la claridad del texto en una sección pequeña como esta. Compruebe las vistas de escritorio y móvil para asegurarse de que el texto siga siendo fácil de leer.

Ajustes de separador

Ajustes de separador añaden una línea en la parte superior o inferior de la sección. Úselos cuando la barra se sitúe entre secciones más grandes y necesite un límite sutil sin añadir más espacio. Si el color del separador se deja transparente, se usa el color de borde compartido.

Ajustes de visibilidad

Ajustes de visibilidad controlan si toda la sección aparece en escritorio, en móvil o en ambos. Esto resulta útil cuando quiere un diseño móvil simplificado o una disposición distinta entre dispositivos. Cuando también usa visibilidad a nivel de bloque, compruebe que al menos una característica siga visible donde la necesite.

Ajustes de ancho

Ajustes de ancho controlan tanto el ancho máximo del contenido como el ancho exterior de la sección. Un ancho de contenido más estrecho puede facilitar la lectura rápida del texto breve de las características, mientras que unos ajustes más amplios pueden ayudar a que la barra se integre mejor con diseños de página amplios. Si es posible, previsualice los cambios de ancho en la página publicada, ya que el encuadre del editor puede hacer que el espaciado resulte engañoso.

Consejos de uso

1. Mantenga el texto breve. Esta sección funciona mejor con enunciados cortos que los clientes puedan entender de un vistazo.
   1. Los mensajes breves son más fáciles de leer rápidamente en una barra estrecha.
   2. Si un mensaje necesita más contexto, enlace al destino completo en lugar de añadir más texto.
2. Use los bloques con intención. Añada bloques Feature cuando esta barra deba mostrar iconos, texto o enlaces específicos de la sección en lugar del comportamiento compartido del contenido.
   1. Añadir bloques puede cambiar de forma importante lo que aparece aquí.
   2. Revise la sección después de añadir o eliminar bloques para confirmar que el mensaje final sigue teniendo equilibrio.
3. Revise ambos tamaños de vista. Los controles de escritorio y móvil pueden afectar de forma diferente al diseño, la alineación, la visibilidad y el comportamiento de los medios.
   1. Compruebe que los iconos y el texto sigan viéndose alineados en pantallas más pequeñas.
   2. Asegúrese de que cualquier elección exclusiva para móvil o para escritorio siga dejando la barra legible y útil.
4. Use con cuidado las sustituciones de color y medios. Los valores de estilo predeterminado suelen conservar el estilo de reserva, mientras que los colores, degradados o medios explícitos hacen que la sección sea más independiente.
   1. Un estilo local marcado puede mejorar el énfasis, pero también aumenta la necesidad de comprobar el contraste.
   2. Los medios separados para escritorio y móvil pueden afectar al recorte y a la legibilidad, así que confirme ambas versiones antes de publicar.
5. Mantenga fáciles de leer los mensajes de tipo formulario. Si la barra se usa para entrada de cliente, validación o mensajes de éxito y error, deje suficiente contraste y espaciado para que esos estados destaquen con claridad.