How to Design Product Cards with a Fixed Height in Shopify

  • 1 min read

Designing Product cards with images in Shopify is tricky. I decided to share this code for everyone using Viola Theme.

In the custom CSS under “Featured Collection” section use the following code:

.card__content .product-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 70px;
}

Make sure the Image Ratio is set to Square:

Here’s the result:

Now, you can create product cards with a fixed height to ensure a uniform and professional look across your online store.

  • Post author:
  • Post comments:0 Comments
  • Reading time:2 mins read

Leave a Reply