Align products in store with 1 or 2 line titles

  • dalexgray

    (@dalexgray)


    9 years, 1 month ago

    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)
  • James Koster

    (@jameskoster)

    9 years, 1 month ago

    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)

    9 years, 1 month ago

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

    James Koster

    (@jameskoster)

    9 years, 1 month ago

    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)

    9 years, 1 month ago

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

    James Koster

    (@jameskoster)

    9 years ago

    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.