Ir al contenido

Ajustes de tarjeta

Perfecciona el diseño reutilizable de las tarjetas, las imágenes, el texto, la alineación y los botones para adaptarlos mejor a cualquier pantalla.

Usa estos ajustes cuando un área basada en tarjetas necesite una presentación diferente de los ajustes generales del tema. Te permiten ajustar con precisión el aspecto y el contenido de las tarjetas sin cambiar el estilo del resto de las tarjetas de la tienda online. Para obtener una visión general más amplia de cómo encajan estos ajustes, consulta la documentación de Shopify sobre secciones y bloques

El estilo de tarjeta controla la presentación general de cada tarjeta, incluido su nivel de estructura, espaciado o énfasis en la imagen. Este es el mejor punto de partida si las tarjetas parecen demasiado recargadas, demasiado simples o poco coherentes con el contenido que muestran.

Los estilos con más espaciado suelen facilitar la lectura rápida de contenido variado. Los estilos más centrados en la imagen funcionan mejor cuando la fotografía debe transmitir la mayor parte del mensaje.

Mantén Use theme setting cuando quieras mantener la coherencia con el resto del tema. Anúlalo solo cuando este grupo de tarjetas tenga una necesidad visual o específica del contenido claramente definida.

La proporción de imagen controla cómo se recortan y encuadran las imágenes de las tarjetas. Los ajustes independientes para ordenadores y dispositivos móviles son especialmente útiles cuando el mismo recorte se ve equilibrado en pantallas grandes, pero corta contenido importante en las más pequeñas.

Las proporciones apaisadas y panorámicas suelen adaptarse a imágenes horizontales y diseños más densos. Las proporciones cuadradas y verticales pueden crear una cuadrícula más definida o dar más espacio a las imágenes altas. Si las imágenes se ven extrañas en los teléfonos, ajusta primero la proporción móvil en lugar de comprometer el diseño para ordenadores.

El estilo del botón cambia la intensidad con la que se presenta la acción de la tarjeta. Usa estilos más destacados cuando quieras que las tarjetas impulsen los clics, y estilos más sutiles cuando el título y la imagen ya dejen claro el destino.

Los botones más pequeños ayudan a reducir el ruido visual en cuadrículas compactas. Ocultar el botón puede funcionar en diseños muy limpios y centrados en la imagen, pero solo si la tarjeta sigue indicando claramente que es interactiva.

La visualización del texto controla cuánto contexto escrito aparece dentro de cada tarjeta. Esto afecta tanto a la velocidad de lectura rápida como a la orientación que reciben los clientes antes de hacer clic.

Mostrar el título y el extracto funciona bien cuando las tarjetas necesitan una explicación o cuando las imágenes son menos descriptivas. Los diseños que solo muestran el título son más limpios y normalmente funcionan mejor cuando la imagen y la etiqueta ya cumplen suficientemente su función. Los estilos con texto mínimo deben reservarse para diseños muy visuales con un contexto circundante sólido.

La alineación horizontal y vertical ayuda a que el texto parezca intencionado dentro del estilo de tarjeta elegido. La alineación adquiere más importancia en los diseños centrados en la imagen, donde la posición afecta a la legibilidad tanto como al estilo visual.

El texto alineado a la izquierda suele ser más fácil de leer rápidamente en cuadrículas, mientras que el texto centrado resulta más promocional. La posición vertical es más importante en las tarjetas con estilo de banner y en otros diseños donde el texto se coloca sobre la imagen o junto a ella.

Estos ajustes están pensados como anulaciones locales para tarjetas reutilizables. Mantener la mayoría de las opciones en Use theme setting ayuda a conservar la coherencia, mientras que los cambios selectivos permiten adaptar un grupo de tarjetas específico a distintos tipos de contenido, formas de imagen o comportamientos de navegación.

Si te encuentras cambiando casi todas las opciones, revisa la presentación general de esa área de tarjetas. Un conjunto más ligero de anulaciones específicas suele crear un resultado más coherente que reconstruir el estilo de tarjeta desde cero.

Para obtener más información sobre los controles disponibles, consulta la documentación de Company XYZ sobre ajustes de tarjetas y la documentación de Shopify sobre la personalización de secciones

  1. Revisa ambos puntos de interrupción. Los controles para ordenadores y dispositivos móviles pueden afectar de forma diferente al diseño, la alineación, la visibilidad y el comportamiento de los elementos multimedia, así que comprueba ambas vistas antes de publicar.
  2. Observa el comportamiento del control deslizante. Las presentaciones con estilo de control deslizante pueden cambiar la navegación, la paginación, las vistas previas y el comportamiento en los puntos de interrupción en comparación con una cuadrícula estática o un diseño apilado.
  3. Mantén simples los valores alternativos. Los valores en blanco, transparentes o de estilo predeterminado suelen conservar el estilo alternativo general, mientras que los colores, degradados o anulaciones multimedia explícitos hacen que el área local sea más independiente.
  4. Protege la legibilidad de las imágenes. Cuando los elementos multimedia para ordenadores y dispositivos móviles se configuren por separado, confirma el recorte, la carga, el contenido alternativo y el contraste del texto en ambas pantallas.
  5. Conserva indicaciones de navegación claras. Si las tarjetas incluyen menús, paneles laterales, enlaces anidados o controles exclusivos para móviles, asegúrate de que los elementos ocultos o reordenados no bloqueen el recorrido que los clientes esperan seguir.