Shorten the length of homepage and collection page titles

Technical Q&A
, ,
1

Theme：Horizon 3.1.0 Whisper
Shorten the length of homepage and collection page titles, especially on mobile devices, by changing them to fixed three lines or fixed word count

2

Hey @youwei

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hey @youwei!

Thanks for posting your Query. Could you please share your store url and password [if applicable] so that I can take a look and provide you with the solution code.

Thanks

4
5

Hey @youwei

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
product-card-link p {
    font-size: 11px !important;
}
</style>

RESULT:

image
image374×665 54.2 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

6

Hi @youwei ,

From the Shopify Admin go to Edit Theme and look for Theme settings (cog icon on the left sidebar)

image
image391×933 26.4 KB

From there scroll down until you find Custom CSS and add the following snippet

.product-card h5,
product-card-link p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

The result of this is that mobile will look like this

image
image405×890 101 KB

7

@youwei hello, you can shorten the length by either css or editing the title code. CSS can help you to make font size smaller as mentioned by others, but if you need less letters then we need to edit the code. I can do that for you.