Las cuadrículas de productos y de colecciones muestran cada elemento como una tarjeta. Diseñas la tarjeta una vez en la sección, y todas las tarjetas de esa sección la siguen.
Dónde están las tarjetas
- El bloque Product card está en Featured products, Related products, Search products y Collection products.
- El bloque Collection card está en Collections y Sub collections.
En el constructor, selecciona la sección y luego el bloque de la tarjeta. Cada sección tiene su propia tarjeta, así que un cambio solo afecta a esa sección. El bloque de la tarjeta no se puede eliminar, pero sus partes sí: oculta o elimina una parte, o vuelve a añadirla con Add new block.
Tarjeta de producto
En la propia tarjeta, Use parent color scheme está activado por defecto. Desactívalo para dar a las tarjetas su propio Color scheme. Arrastra las partes para cambiar su orden en la tarjeta. Sus partes son:
- Image: Aspect ratio (Auto, Portrait, Square o Landscape) e Image fit (Cover llena el marco, Contain muestra la imagen completa). Image fit se oculta con Auto.
- Title: Preset (estilo de texto), Line height, Letter spacing y Max lines (de 1 a 3; los nombres más largos se cortan con "...").
- Price: el precio, con el precio antiguo tachado cuando hay rebaja. Savings muestra un distintivo como Percentage, Price (la cantidad ahorrada) o None. Solo aparece en productos con precio rebajado.
- Rating: las estrellas y el número de reseñas. Los productos sin reseñas no muestran estrellas.
- Buy: el botón y las variantes.
La parte Buy
- Action: Checkout permite a los compradores comprar desde la tarjeta. Link abre la página del producto.
- Label: déjalo vacío para usar el texto predeterminado: "View product" con Link, y con Checkout "Add to cart" o "Buy now", según el Checkout method de los ajustes del checkout.
- Style: colores de botón Primary o Secondary.
- Show variants, con Size y Shape (la forma solo se aplica a las muestras de color y de imagen): los compradores eligen una opción en la tarjeta. En la tarjeta solo aparece el primer grupo de variantes. Las variantes nunca aparecen con Link.
Un producto con todas sus opciones agotadas muestra, con Checkout, un botón "Out of stock" desactivado.
Tarjeta de colección
Card style: Standard pone el texto debajo de la imagen, Overlay lo pone sobre la imagen. También tienes Use parent color scheme. Las partes son:
- Image: Aspect ratio, Image fit y Overlay opacity (solo con Overlay; una imagen más oscura hace que el texto se lea mejor).
- Title: Preset, Line height, Letter spacing, Max lines (1 o 2) y Alignment.
- Product count: el número de productos de la colección. No tiene ajustes: ocúltalo o elimínalo para quitarlo.
- Button: Label (vacío usa un texto predeterminado en el idioma de tu tienda), Style y Width (Fit o Fill). Siempre abre la colección de la tarjeta.
La tarjeta de colección siempre muestra sus partes en el mismo orden: imagen, título, número de productos y botón.
Bueno saberlo
- Las esquinas, los bordes y las sombras de las tarjetas vienen de tu tema. Los colores de las tarjetas vienen del esquema de colores.
- ¿No aparece el distintivo de ahorro? El producto necesita un precio rebajado, consulta ¿Cómo pongo precios, descuentos y precios por mercado a mis productos?