Align products in store with 1 or 2 line titles

  • Most of my product titles are long enough to wrap onto a second line. A few are short enough to be only one line. Storefront ends up displaying them jaggedly.
    I can force a line break with <br /> but that shows up in the breadcrumbs and can cause other problems.

    Is there a way to keep everything nicely aligned even if some products have a single line title and others have two line titles?

Viewing 5 replies - 1 through 5 (of 5 total)

  • You can, with some JS. You’d need to find the ‘tallest’ product title on a page, then apply some css to set the height of all other titles. It’s fairly intrusive and would impact performance. I wouldn’t really recommend it personally, it’s not worth it.

    Thread Starter dalexgray

    (@dalexgray)

    Thanks, I guess I’ll stick to line break tags and disable breadcrumbs.

    I wouldn’t recommend that. You’re gaining absolutely nothing except something cosmetic which is totally subjective anyway. Most people don’t care about the buttons lining up, it’s certainly not going to impact your conversions. However by removing breadcrumbs you’re making navigation that little bit less efficient which could have a negative impact on usability / performance.

    Just my opinion, but it’s totally not worth it.

    Thread Starter dalexgray

    (@dalexgray)

    Thanks for the advice. Even though the “add to cart” buttons don’t line up exactly, all the product images do.

    That’s because the product images are the first item of content in each row. The add to cart buttons don’t line up because you probably have some products with longer titles than others.

    Another option would be to truncate your product titles so they’re always 1 line long. That might impact your SEO though.

    Like I said, it’s not really worth it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Align products in store with 1 or 2 line titles’ is closed to new replies.