Correcto
Ajustes de tarjeta de producto
Establezca valores predeterminados globales para el diseño de la tarjeta de producto, el contenido multimedia, las acciones y las muestras en todo su tema.
Estos ajustes definen la apariencia y el comportamiento predeterminados de las tarjetas de producto en todo su tema. Úselos para crear una experiencia de navegación coherente para las cuadrículas de productos, las listas y otras visualizaciones de productos basadas en tarjetas; luego, anúlelos solo donde una plantilla específica necesite un enfoque distinto. Para obtener una descripción general más amplia de la configuración a nivel de tema, consulte documentación de Shopify sobre la personalización de temas
Diseño global de la tarjeta
Sección titulada «Diseño global de la tarjeta»Empiece aquí para dar forma a la estructura general de sus tarjetas de producto. El estilo de la tarjeta, la relación de imagen, la visualización del texto, la alineación y el tratamiento del botón trabajan juntos para determinar cuán visuales, compactas o ricas en información se sienten sus listas de productos.
Use relaciones de imagen independientes para escritorio y móvil para mantener las tarjetas equilibradas en diferentes tamaños de pantalla. Una relación coherente es especialmente útil cuando la fotografía de producto varía, porque hace que las cuadrículas se vean más limpias y fáciles de revisar.
Los ajustes de texto controlan cuánto contexto aparece antes de que un cliente abra el producto. Mostrar tanto el título como el extracto puede favorecer el descubrimiento, mientras que los diseños con solo el título suelen funcionar mejor para cuadrículas más densas o catálogos muy visuales.
Las tarjetas de estilo banner siempre muestran una sola imagen, por lo que los ajustes de presentación no se aplican. La alineación vertical media del texto también solo funciona con el estilo banner.
Detalles del producto y acciones
Sección titulada «Detalles del producto y acciones»Estos controles determinan qué detalles clave del producto aparecen en las tarjetas, incluidos el precio, el proveedor, las insignias, las acciones de compra rápida y los selectores de variantes. Úselos para decidir cuánto se puede comprar directamente desde la tarjeta frente a la página del producto.
La compra rápida es más útil cuando los clientes pueden comprar con confianza desde la cuadrícula. Si la selección de variantes está activada y el producto está disponible, la tarjeta puede admitir un flujo de añadir al carrito más directo; de lo contrario, la acción puede llevar a los clientes a la página completa del producto.
Las insignias de colección pueden resaltar productos seleccionados con etiquetas de comercialización ligeras. Esto funciona bien para promociones, selecciones curadas o grupos de productos que quiere que los clientes noten rápidamente.
Ajustes al pasar el cursor
Sección titulada «Ajustes al pasar el cursor»El contenido multimedia al pasar el cursor permite que las tarjetas de producto muestren un recurso alternativo cuando los clientes se sitúan sobre ellas en escritorio. Esto es útil para mostrar otro ángulo, una vista de detalle u otro elemento visual de apoyo sin añadir más texto a la tarjeta.
Puede elegir automáticamente una posición de la galería o apuntar a un metacampo cuando quiera un control más preciso sobre el recurso al pasar el cursor para cada producto. Una configuración basada en metacampo es especialmente útil cuando la imagen ideal al pasar el cursor no está de forma coherente en la misma posición en todo su catálogo.
El contenido multimedia al pasar el cursor no funciona cuando el estilo de imagen de la tarjeta de producto está configurado como presentación.
Ajustes de presentación
Sección titulada «Ajustes de presentación»Si usa tarjetas de producto con estilo de presentación, este subgrupo controla cómo se comportan esas galerías en escritorio y móvil. Puede ajustar el número de diapositivas visibles, el estilo de animación, la velocidad, la reproducción automática, el bucle y la navegación o paginación en la tarjeta.
Las presentaciones funcionan mejor cuando varias imágenes del producto ayudan a los clientes a comparar o evaluar artículos desde la cuadrícula. Para catálogos más sencillos, una configuración de una sola imagen suele ser más fácil de revisar y mantiene más la atención en la lista de productos en su conjunto.
La animación de desvanecimiento crea una presentación más sencilla, pero también obliga a un diseño de una sola diapositiva y no muestra paginación. Si el número de diapositivas y la información de navegación importan, elija un estilo de animación que no sea de desvanecimiento.
Ajustes de muestras de color
Sección titulada «Ajustes de muestras de color»Las muestras de color permiten a los clientes previsualizar las opciones de variante directamente en la tarjeta de producto. Son más eficaces cuando el color es una decisión de navegación principal y la nomenclatura de sus opciones es coherente entre productos.
Introduzca nombres de opción, no valores de opción, para las opciones de variante que deben mostrar muestras. Si la nomenclatura es incoherente, es posible que las muestras aparezcan solo en algunos productos o no aparezcan en absoluto.
Las definiciones de color personalizadas son útiles cuando la nomenclatura de sus colores va más allá de los colores con nombre estándar o cuando desea un control más preciso sobre cómo aparecen las muestras.
Ajustes de muestras de imagen
Sección titulada «Ajustes de muestras de imagen»Las muestras de imagen reemplazan los chips de color planos con miniaturas vinculadas a variantes. Esta es una buena opción cuando la diferencia entre variantes se muestra mejor mediante el patrón, la textura, el acabado o una pequeña imagen del producto.
Cada opción de variante relevante necesita una imagen asociada para mostrarse correctamente. Si algunas variantes no tienen imágenes, esas muestras pueden parecer incompletas.
Cuando tanto las muestras de imagen como las de color están configuradas para el mismo patrón de nomenclatura de opciones, las muestras de imagen tienen prioridad. En la mayoría de los casos, es mejor elegir un método principal de muestras para cada tipo de variante.
Ajustes del borde de la muestra
Sección titulada «Ajustes del borde de la muestra»Los controles del borde de la muestra ayudan a que las muestras de color y de imagen sigan siendo visibles frente a distintos fondos e imágenes. Son especialmente útiles para muestras claras, diseños de tarjeta con poco contraste o temas con un estilo de interfaz sutil.
Si deja en blanco los colores del borde, el tema utiliza en su lugar los colores del borde del botón principal. La variante activa siempre mantiene un estado seleccionado visible, de modo que los clientes aún pueden distinguir qué opción está elegida en ese momento.
Notas de uso
Sección titulada «Notas de uso»- Establezca los valores predeterminados antes de hacer excepciones. Construya primero aquí un estilo global sólido de tarjeta de producto, y luego use anulaciónes a nivel de plantilla solo cuando un diseño específico necesite realmente un comportamiento distinto. Para obtener orientación sobre cómo se organizan las áreas del tema, consulte documentación de Shopify sobre secciones y bloques
- Elija un solo patrón de contenido multimedia. Use imágenes únicas para una revisión rápida, contenido multimedia al pasar el cursor para una segunda vista rápida o presentaciones cuando varias imágenes a nivel de tarjeta mejoren claramente la navegación.
- Revise ambos puntos de corte. Las tarjetas de escritorio y móvil pueden comportarse de forma distinta, así que compruebe las relaciones de imagen, la alineación, la navegación y la visibilidad del contenido multimedia en ambos tamaños de pantalla antes de publicar.
- Mantenga claro el estilo de reserva. Los valores en blanco o con estilo predeterminado suelen conservar el aspecto integrado del tema, mientras que los colores explícitos, los degradados o las anulaciones de contenido multimedia hacen que un área de tarjeta de producto se sienta más independiente.
- Observe las interacciones entre funciones. Las tarjetas banner no usan presentaciones, las tarjetas de presentación no admiten contenido multimedia al pasar el cursor y las muestras de imagen sustituyen a las muestras de color cuando ambas apuntan a la misma opción.