How can I line up product prices horizontally within a collection page?

57 0 30

I would like to have all the product prices lined up horizontally on products on a collection page. Currently, some product titles are longer than others (which I cannot change), so this alters the position of the product prices.

It seems that I should be able to somehow make the product title area a set height, which in turn would make all the product prices line up.

I am not a programmer, and I do not know CSS. I searched for a solution to this issue and found this article . I looked at the theme.scss.liquid file to see if I could find a place to set the height of the product titles (not font size - but "container" height), but I do not see anything in that file that looks like the title "container" height.

I am using the Classic Theme.

Does anyone know of a way I can accomplish this task of getting all the product prices to line up horizontally within a collection?

Thank you in advance for any input.

1890 0 384

There is a JavaScript function (equalHeights) built into the theme.  We can use this to set the product title heights to be that of the largest height.  (e.g. If the longest title is 5 lines, all other product titles will be set to the height of 5 lines.)

Open Assets/theme.js.  Look for the section of code below and add in the indicated line.

  function resizeElements() {
    expo.cache.$productGridImages.css('height', 'auto').equalHeights();
    expo.cache.$featuredGridImages.css('height', 'auto').equalHeights();
    $('.grid-link__title').css('height', 'auto').equalHeights();          // Add this line to have equal heights for product titles.


57 0 30

Alex - you are awesome!

That worked perfectly. I sincerely thank you for your knowledge and your help.

I am learning something new every day - thanks again. You've made my day!


4 0 1

I got the same problem but I can't see this code in my theme.js.

We're using Porto theme.


thank you for your help Alex.