Correcto
Configuración de la tarjeta de producto
Ajuste el estilo de la tarjeta de producto, las imágenes, el texto, los botones y las muestras para crear cuadrículas de productos más limpias.
Use estos ajustes para afinar cómo aparecen las tarjetas de producto dondequiera que se use este patrón de tarjeta compartido. Puede mantener las tarjetas alineadas con los valores predeterminados de su tema general o anularlos cuando una lista de productos específica necesite una presentación diferente. Para obtener más contexto sobre cómo encajan estos ajustes en el editor de temas, consulte documentación de Shopify sobre el editor de temas
Ajustes de tarjeta
Sección titulada «Ajustes de tarjeta»Este grupo controla el aspecto general y la densidad de información de las tarjetas de producto. Es especialmente útil cuando quiere ajustar lo visual, compacto o orientado a la acción que se sienten las listas de productos sin cambiar globalmente todos los ajustes relacionados con las tarjetas. Para obtener más información sobre cómo se relacionan estos controles con los componentes del tema, consulte documentación de Shopify sobre secciones y bloques
La página de referencia de ajustes de tarjeta incluye orientación adicional sobre cómo se relacionan estas anulaciones con el comportamiento general del tema: tarjetas de producto
Estilo de tarjeta
Sección titulada «Estilo de tarjeta»El estilo de tarjeta cambia la estructura y el espaciado de cada tarjeta de producto. Úselo para que las tarjetas se sientan más editoriales, más compactas o más orientadas a la utilidad, según la colección y la calidad de las imágenes de sus productos.
Los estilos más estructurados o con más espacio suelen funcionar mejor cuando las fotos de producto varían en encuadre o fondo. Los estilos más ajustados pueden encajar más productos en una fila, pero también hacen que las incoherencias sean más evidentes.
Si las imágenes de sus productos están recortadas de forma inconsistente, elija un estilo con más estructura visual o espaciado para que las cuadrículas de productos se vean intencionales.
Relación de aspecto de la imagen
Sección titulada «Relación de aspecto de la imagen»Puede elegir relaciones de imagen separadas para escritorio y móvil, lo que resulta útil cuando un solo recorte no funciona bien en ambos tamaños de pantalla. Las relaciones fijas suelen crear una cuadrícula más limpia y coherente, especialmente cuando su catálogo mezcla distintas formas de imagen.
Las relaciones más anchas pueden sentirse más editoriales, mientras que las relaciones cuadradas o verticales suelen facilitar la exploración de las listas de productos. Si su fotografía ya está preparada cuidadosamente, usar la relación predeterminada o la del nivel del tema puede conservar mejor el encuadre previsto.
Estilo del botón
Sección titulada «Estilo del botón»Este ajuste controla cuán visible aparece la acción de la tarjeta de producto. Ocúltelo para una experiencia de navegación más limpia, o use un estilo basado en texto cuando los clientes necesiten una indicación de acción más clara.
Los estilos de botón compactos ayudan a mantener ordenadas las cuadrículas densas. En móvil, la acción usa un estilo de solo icono, así que asegúrese de que la tarjeta siga viéndose clara y utilizable cuando la etiqueta ya no se muestre.
Texto de la tarjeta
Sección titulada «Texto de la tarjeta»El texto de la tarjeta controla cuánta información escrita del producto aparece en cada tarjeta. Más texto puede ayudar a explicar un producto rápidamente, mientras que menos texto crea un diseño más limpio y centrado en la imagen.
Mostrar tanto el título como el extracto funciona mejor cuando el texto de apoyo es breve y coherente. Si los extractos varían en tono o longitud, las tarjetas solo con título suelen ser más fáciles de revisar.
Alineación del texto
Sección titulada «Alineación del texto»La alineación del texto afecta tanto a la legibilidad como al tono visual. La alineación a la izquierda suele ser la opción más clara para las cuadrículas de productos, mientras que el texto centrado puede sentirse más promocional o más centrado en el diseño.
La alineación vertical importa más en diseños en los que el texto se sitúa dentro de una tarjeta más estilizada. La posición central solo se aplica al estilo de tarjeta banner, por lo que resulta principalmente útil para tratamientos de tarjetas de producto basados en banner.
Selector de variantes de la tarjeta
Sección titulada «Selector de variantes de la tarjeta»El selector de variantes permite a los clientes previsualizar o elegir opciones directamente desde la tarjeta de producto mediante muestras o botones tipo píldora. Esto resulta especialmente útil cuando el color, el patrón o la variación basada en imágenes es una parte importante de la decisión de compra.
Si su catálogo tiene productos sencillos o una presentación de variantes inconsistente, ocultar el selector puede mantener las tarjetas más limpias. Cuando habilite muestras o botones tipo píldora, asegúrese de que los datos de variantes estén configurados de forma coherente para que los clientes tengan una experiencia fiable.
Para obtener orientación sobre la configuración, consulte variantes de producto
Notas de uso
Sección titulada «Notas de uso»- Use las anulaciones de forma selectiva. Mantenga los ajustes a nivel de tema salvo que un contexto específico de tarjeta de producto necesite un aspecto o comportamiento diferente.
- Elija relaciones para mantener la coherencia. Las relaciones de imagen fijas ayudan a unificar fotografías mixtas, mientras que las relaciones predeterminadas conservan un encuadre de imagen más natural.
- Diseñe pensando primero en móvil. Dado que las acciones de la tarjeta de producto pasan a ser solo iconos en móvil, apoye la comprensión de las tarjetas en imágenes sólidas y texto claro.
- Haga que el texto tenga un propósito. Muestre extractos solo cuando añadan contexto útil del producto; de lo contrario, las tarjetas más simples centradas en el título suelen revisarse mejor.
- Habilite los selectores donde importen. Use muestras o botones tipo píldora para productos con opciones visuales significativas, y confirme que la configuración de variantes sea coherente antes de desplegarlos ampliamente.
- Revise las tarjetas de estilo carrusel en ambas vistas. Si elige una presentación similar a un carrusel, compruebe la navegación, la paginación y el espaciado en escritorio y móvil, porque el diseño puede comportarse de forma diferente a una cuadrícula estática.
- Revise con cuidado las opciones de medios separadas. Cuando escritorio y móvil usen recortes de imagen diferentes, revise ambas versiones para comprobar la legibilidad, el encuadre de reserva y cualquier recorte no deseado.