¿Cómo puedo hacer que todas las tarjetas tengan la misma altura?

Enlaces destacados

1. Documentación de Company XYZ sobre CSS personalizado
2. Documentación de Shopify sobre cómo añadir CSS personalizado a tu tema
3. Documentación de Shopify sobre el editor de temas

Haz que las tarjetas de una misma fila tengan un aspecto más uniforme estirando cada tarjeta hasta ocupar toda la altura de esa fila. Hasta que haya ajustes específicos disponibles, añade un pequeño fragmento de CSS al ajuste Custom CSS de la sección. Para obtener más información sobre la configuración, consulta la documentación de Shopify sobre cómo añadir CSS personalizado a tu tema

Hacer que las tarjetas tengan la misma altura

1. En el editor de temas, selecciona la sección que quieres actualizar. Para obtener una descripción general, consulta la documentación de Shopify sobre el editor de temas

2. Desplázate hasta la parte inferior de los ajustes de la sección y abre Custom CSS.

3. Pega el siguiente CSS:

   .card {
     height: 100%;
   }

4. Guarda los cambios.

Colocar el texto de la tarjeta debajo de las imágenes

De forma predeterminada, el texto de la tarjeta puede estar anclado en la parte inferior de una tarjeta con la misma altura. Para colocar el texto directamente debajo de la imagen, añade también este CSS:

.card__content {
  justify-content: flex-start;
}

Notas de uso

1. Aplica el CSS por sección. Añade el código a cada sección en la que quieras que las tarjetas tengan la misma altura.
2. Elige la alineación del texto intencionadamente. Añade el segundo fragmento solo cuando quieras que el texto de la tarjeta comience directamente debajo de su imagen.
3. Guarda antes de obtener una vista previa. Guarda los cambios y, a continuación, revisa la sección para confirmar que el diseño de las tarjetas se ve correctamente.