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

Explorer
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 https://outofthesandbox.com/blogs/shopify-theme-blog/75213317-tips-for-solving-photo-alignment-and-p... . 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.

0 Likes
Astronaut
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.
  }

 

0 Likes
Explorer
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!

JD

0 Likes
Tourist
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. 

0 Likes