Equal heights of elements with Vanilla js in Shopify

Home » Equal heights of elements with Vanilla js in Shopify

This function (original from CSS-tricks) helps to equalise the heights of anything, especially useful in a loop. So in Shopify (or anywhere really) I might have titles that sometimes are pretty long, and on a mobile, they are wrapping and causing heights to be uneven. Here, we add a class to the html (in this case I have added two – ‘matchage’ and ‘matchageb’ to the title and vendor title respectively. This will force each title to be the same height as each other and each vendor title to do the same. All the vedor titles will have be same height, all the product titles will be the same height.).

//in shopify product-card-grid.liquid:
<div class="product-name text-truncate matchage">
      {{ product.title }}
    </div>

    {% if section.settings.show_vendor %}
      <div class="vendor text-truncate matchageb">
        {{ product.vendor }}
      </div>
    {% endif %}

//function
var matchFunc = function(passname){
var maxHeight = 0;

$(passname).each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(passname).height(maxHeight);
}


document.addEventListener("DOMContentLoaded", function() {
//run the function if the 'matchage' class is used on the page
 if($('.matchage').length >0 ){
   matchFunc('.matchage');
    matchFunc('.matchageb');
}

});