Acordeón

Enlaces destacados

1. Documentación de Company XYZ sobre el bloque Accordion
2. Documentación de Company XYZ sobre los extractos
3. Documentación de Company XYZ sobre los iconos
4. Documentación de Company XYZ sobre el uso de vídeos
5. Documentación de Company XYZ sobre los ajustes de visibilidad
6. Documentación de Shopify sobre secciones y bloques

Videos útiles

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

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

Use este bloque para organizar información más extensa en paneles plegables que sean más fáciles de revisar. Es una opción práctica para preguntas frecuentes, detalles de envío, instrucciones de cuidado, políticas o cualquier contenido de apoyo que deba permanecer disponible sin dominar la página. Para una visión general más amplia de la estructura del contenido del tema, consulte documentación de Shopify sobre secciones y bloques

Puede escribir contenido directamente en el bloque o conectarlo a una página o entrada de blog existente. Consulte la Acordeón.

Ajustes básicos

Empiece con el encabezado y el contenido. El encabezado es la etiqueta en la que se puede hacer clic y que los clientes ven primero, así que manténgalo breve y específico, mientras que el área de contenido es mejor para la respuesta, la explicación o los detalles de apoyo.

Puede elegir que el acordeón se muestre abierto de forma predeterminada. Esto funciona bien cuando un elemento es especialmente importante, pero usarlo con demasiada frecuencia hace que el bloque se perciba menos compacto.

El bloque también puede extraer contenido de una entrada de blog o de una página. Esto es útil cuando desea reutilizar contenido más extenso en otro lugar, y opcionalmente puede mostrar el extracto en lugar del cuerpo completo cuando una vista previa más corta es suficiente. Para obtener ayuda con los extractos, consulte Extractos.

Si se asignan tanto una página como una entrada de blog, la página tiene prioridad.

Encabezado y acciones

Puede añadir un icono en línea junto al encabezado para darle al elemento del acordeón más carácter visual o para ayudar a diferenciar los temas. Mantenga coherentes las opciones de icono en los elementos relacionados para que el bloque parezca intencionado y no decorativo. Para la configuración de iconos, consulte Iconos.

Si el acordeón está conectado a contenido externo, puede mostrar automáticamente un enlace a ese contenido. También puede añadir su propio texto de botón, enlace, icono y estilo cuando quiera una llamada a la acción más deliberada.

Elija un estilo de botón que coincida con la importancia de la acción. Los estilos más destacados funcionan mejor cuando el enlace es un verdadero siguiente paso, mientras que los estilos más pequeños o sencillos se adaptan mejor a rutas de lectura secundarias. Los botones móviles de ancho completo pueden ser útiles cuando la facilidad para tocar importa más que la sutileza visual.

Ajustes de imagen

Puede añadir medios opcionales para cambiar el aspecto del contenido del acordeón. Los medios pueden aparecer encima o debajo del texto, según si deben encabezar el mensaje o apoyarlo después.

Use una imagen cuando quiera una mejora visual sencilla, o use video cuando el movimiento ayude a explicar mejor el contenido. Si añade un enlace a un servicio de video, use la URL del video en lugar del código de inserción.

Una imagen de póster es especialmente útil para video alojado porque le da al bloque un primer fotograma más limpio antes de que comience la reproducción. Los ajustes de relación de aspecto le ayudan a controlar cómo encajan los medios en el diseño, y la relación móvil independiente es útil cuando un recorte que funciona en escritorio parece demasiado alto, demasiado estrecho o demasiado ajustado en pantallas más pequeñas.

La reproducción automática y la repetición suelen ser mejores para clips cortos y ambientales que para contenido hablado esencial. Si los clientes necesitan escuchar o controlar el video, mantenga los controles disponibles y pruebe el estado expandido en pantallas más pequeñas. Para obtener más orientación, consulte Uso de video.

Ajustes estándar de bloque

Ajustes de visibilidad

Use los controles de visibilidad para mostrar el bloque en todos los dispositivos o ocultarlo en escritorio o en móvil. Esto es útil cuando desea diferente contenido, redacción o elecciones de medios del acordeón para pantallas más pequeñas. Consulte Ajustes de visibilidad.

Notas de uso

1. Mantenga claros los encabezados. Escriba los encabezados como preguntas o temas específicos para que los clientes puedan elegir rápidamente el elemento correcto que abrir.
2. Use una sola fuente de contenido. Introduzca texto directamente para contenido personalizado breve, o conecte una página o entrada de blog para contenido reutilizable, pero evite depender de ambas a la vez.
3. Abra con moderación. Use la opción de abierto de forma predeterminada solo para un elemento prioritario, especialmente cuando varios bloques de acordeón aparecen juntos.
4. Añada medios con un propósito. Elija imágenes o video solo cuando mejoren la comprensión, y revise el diseño expandido tanto en escritorio como en móvil antes de publicar.
5. Haga que las acciones sean significativas. Muestre un botón o un enlace de contenido solo cuando los clientes se beneficien realmente de ir a un destino más completo.
6. Espere un estilo de reserva. Dejar los colores u otros valores visuales en sus valores predeterminados puede conservar el aspecto circundante, mientras que las anulaciones explícitas hacen que el acordeón se sienta más independiente del resto de la página.