Acordeón

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre los ajustes de contenido dinámico
3. Documentación de Shopify sobre la personalización de secciones
4. Documentación de Company XYZ sobre el bloque Accordion
5. Documentación de Company XYZ sobre los ajustes de encabezados
6. Documentación de Company XYZ sobre los ajustes de espaciado de sección
7. Documentación de Company XYZ sobre los ajustes de fondos de sección
8. Documentación de Company XYZ sobre los ajustes de separadores
9. Documentación de Company XYZ sobre los ajustes de visibilidad
10. 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 agrupar preguntas frecuentes, políticas, detalles de productos u otras respuestas largas en filas apiladas y expandibles. Puede crear el contenido manualmente con bloques Row, extraer entradas de un blog o combinar ambos cuando quiera una mezcla de contenido seleccionado y contenido actualizado automáticamente.

Para una visión general más amplia del comportamiento de la sección en el editor de temas, consulte documentación de Shopify sobre secciones y bloques

Ajustes de sección

Los controles principales de la sección determinan cómo se sitúa el acordeón dentro de la página. Content position cambia el diseño del área de contenido expandible, y las opciones sticky pueden mantener visible el encabezado de la sección o la interfaz mientras los visitantes se desplazan por listas más largas.

La posición a la izquierda o a la derecha suele funcionar mejor cuando quiere que la sección se sienta estructurada junto con su contenido introductorio. El ancho completo encaja mejor cuando el acordeón es el enfoque principal y la página necesita un diseño más simple y espacioso.

Consejo

Active el comportamiento sticky cuando la sección incluya muchas filas o respuestas especialmente largas. Para acordeones cortos, una configuración no sticky más simple suele verse más limpia.

Contenido dinámico

Este grupo le permite rellenar el acordeón automáticamente desde un blog. Consulte la documentación de Company XYZ sobre ajustes de contenido dinámico.

Para la configuración general en el editor de temas, consulte documentación de Shopify sobre la personalización de secciones

Elija un blog cuando quiera que la sección se actualice a medida que se añade contenido con el tiempo. Puede acotar los resultados con una etiqueta, controlar cuántos elementos aparecen y ordenar la lista por título o fecha de publicación para que coincida con la forma en que es más probable que los visitantes la consulten.

Use Show excerpt cuando las entradas completas hagan que cada fila sea demasiado larga. Show link to content resulta útil cuando el acordeón debe funcionar como una vista previa, con el artículo o página completa disponible como el siguiente paso.

El filtrado por etiquetas solo funciona cuando se selecciona un blog. Si no se elige ningún blog, la sección depende de los bloques Row que añada manualmente.

Ajustes de color

Estos controles sobrescriben los colores de texto predeterminados de esta sección. Resultan más útiles cuando el acordeón se sitúa sobre un fondo personalizado o necesita más contraste que el de la página circundante.

Ajuste juntos los colores del icono, del texto y del subtítulo para que la sección siga teniendo coherencia. Si usa una imagen de fondo, degradado o vídeo, compruebe cuidadosamente la legibilidad antes de publicar.

Tipos de bloque admitidos

1. Row

Fila

Un bloque Row crea un elemento de acordeón plegable. Puede usar rich text personalizado, extraer contenido de una entrada de blog o de una página, e incluir opcionalmente un botón, imagen o vídeo. Más información en la documentación de Company XYZ sobre el bloque Acordeón.

Si se asignan tanto una entrada de blog como una página, la página tiene prioridad. Use Show open by default con moderación para que la sección se mantenga compacta y fácil de revisar.

Show excerpt funciona bien cuando el contenido de origen es demasiado largo para un panel de acordeón. El botón opcional encaja bien cuando una fila debe mostrar primero una vista previa del contenido y enlazar después a un recurso más completo.

Ajustes de imagen

Cada Row puede incluir una imagen o un vídeo para que el contenido expandido sea más útil o atractivo. Esto resulta especialmente útil para guías de configuración, explicaciones de funciones, instrucciones de cuidado u otras respuestas que se benefician de una referencia visual.

La colocación en la parte superior da más protagonismo al medio, mientras que la colocación en la parte inferior mantiene primero la respuesta escrita. Para vídeo, una imagen de póster suele dar a la fila un aspecto más pulido antes de que comience la reproducción.

Precaución

Demasiadas filas con mucho contenido multimedia pueden hacer que la sección se sienta recargada y más lenta de explorar, especialmente en móvil. Añada imágenes solo donde mejoren la comprensión.

Ajustes de visibilidad

Cada Row también tiene su propio control de visibilidad. Úselo cuando ciertas respuestas o tratamientos de medios deban aparecer solo en móvil o solo en escritorio.

Ajustes estándar de sección

Ajustes de encabezado

Use los controles compartidos del encabezado para añadir una introducción con un subtítulo, encabezado, subtítulo, icono y un botón opcional. Consulte la documentación de Company XYZ sobre ajustes de encabezado.

Un encabezado claro ayuda a los visitantes a entender qué cubre el acordeón antes de abrir ninguna fila. Si añade un botón, manténgalo centrado en una única acción lógica siguiente, como visitar una página de ayuda o un recurso relacionado.

Ajustes de espaciado

Use los controles compartidos de espaciado para ajustar el espacio por encima y por debajo de la sección. Consulte la documentación de Company XYZ sobre ajustes de espaciado.

Un espaciado más reducido ayuda a que el acordeón se sitúe cerca del contenido relacionado. Un espaciado mayor funciona mejor cuando necesita destacar como su propia sección de información.

Ajustes de fondo de sección

Use los controles compartidos de fondo para añadir un color, degradado, imagen o vídeo detrás de la sección. Consulte la documentación de Company XYZ sobre ajustes de fondo de sección.

Los tratamientos de fondo pueden dar más presencia al acordeón, pero también afectan a la legibilidad. Al usar fondos multimedia, revise el contraste del texto, la intensidad de la superposición y lo densa que se siente la sección una vez que se expanden las filas.

Ajustes de separador

Use los controles compartidos de separador para añadir una línea por encima o por debajo de la sección. Consulte la documentación de Company XYZ sobre ajustes de separador.

Los separadores son útiles cuando el acordeón se sitúa entre otras secciones con mucho contenido y necesita un límite visual sutil. Manténgalos simples si la estructura de filas ya proporciona suficiente separación.

Ajustes de visibilidad

Use los controles compartidos de visibilidad para mostrar u ocultar toda la sección por dispositivo. Consulte la documentación de Company XYZ sobre ajustes de visibilidad.

Esto resulta útil cuando quiere un diseño de información diferente en móvil y escritorio. Si oculta la sección en un dispositivo, asegúrese de que el mismo contenido siga disponible en otro lugar.

Ajustes de ancho

Use los controles compartidos de ancho para gestionar tanto el contenedor de la sección como el área de contenido dentro de él. Consulte la documentación de Company XYZ sobre ajustes de ancho.

Los anchos de contenido más estrechos suelen ser más fáciles de leer cuando las respuestas son largas. Los ajustes más anchos pueden funcionar bien para entradas cortas o filas que incluyen más contenido visual, pero merece la pena previsualizar el resultado en la tienda online en vivo.

Consejos de uso

1. Elija una fuente de contenido clara. Use contenido impulsado por blogs para preguntas frecuentes que cambian a menudo, y bloques Row manuales para respuestas permanentes o diseños personalizados más ricos.
2. Escriba títulos de fila fáciles de revisar. Los encabezados claros de estilo pregunta o basados en temas ayudan a los visitantes a encontrar la respuesta correcta sin abrir varias filas.
3. Mantenga el contenido expandido centrado. Use extractos, botones y enlaces cuando el contenido de origen completo haga que el acordeón se vea demasiado largo o denso.
4. Limite las filas abiertas por defecto. Abra solo el elemento más importante de forma predeterminada para que la sección conserve su comportamiento compacto de acordeón.
5. Revise la legibilidad en móvil. Compruebe juntos el comportamiento sticky, los medios, el espaciado y el contraste en pantallas pequeñas antes de publicar.
6. Compare ambos tamaños de vista. Revise por separado los diseños de escritorio y móvil cuando use opciones de posición, visibilidad o medios, porque el acordeón puede presentarse de forma diferente en cada tamaño de pantalla.
7. Use las sustituciones con intención. Deje los colores y los medios en sus valores predeterminados o vacíos cuando quiera que la sección herede el estilo circundante; añada colores, degradados o medios separados solo cuando quiera que el acordeón destaque.