Solved

Can I limit product title length to 19 characters on Shopify?

David235
Tourist
27 0 3

My product has too many titles displayed on the homepage. Can I change the code and set the title to 19 letters?
https://www.whicestyle.com/

David235_0-1606449812608.png

 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@David235 

Try the following code, remove the old one:

h3.product-title>a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;   
    display: block;
    }

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 25 (25)

Hardik29418
Shopify Partner
2858 407 1073

Please provide website url and if your store is password protected then also provide password

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
David235
Tourist
27 0 3

Website is on top

dmwwebartisan
Shopify Partner
12280 2546 3694

@David235 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

h3.product-title>a{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

 

Hope this works. This is for the collection page.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
David235
Tourist
27 0 3

Didn't play any role,

dmwwebartisan
Shopify Partner
12280 2546 3694

@David235 

You mean the above code is not working?

Did you tried to put that. Let me know.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
David235
Tourist
27 0 3
Yes, I tried, I didn't find that directory

##-请在此行上方输入您的回复-##
dmwwebartisan
Shopify Partner
12280 2546 3694

@David235 

See below, is it not correct ?

title.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
David235
Tourist
27 0 3

David235_0-1606460293997.pngDavid235_1-1606460335848.png

I found it and added the code, he caused the overlap to see picture 1

dmwwebartisan
Shopify Partner
12280 2546 3694

@David235 

I can see your second screenshot. You have drawn a rectangle but can't see code there. The code should work.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
David235
Tourist
27 0 3
No, no, I just added the code, which caused the product name in Figure 1 to overlap, so I deleted it.
David235
Tourist
27 0 3

@dmwwebartisan No, no, I just added the code, which caused the product name in Figure 1 to overlap, so I deleted it.

dmwwebartisan
Shopify Partner
12280 2546 3694

@David235 

Can you put that again?

I will check. You want the product title in one line right? 

Like I have shown in my previous screenshot ?

title.jpg

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
David235
Tourist
27 0 3

@dmwwebartisan yes,But I added the code, and the product titles on the homepage overlapped

dmwwebartisan
Shopify Partner
12280 2546 3694

@David235 

Let me see.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
David235
Tourist
27 0 3

@dmwwebartisan  This is what it looks like after adding the code

David235_0-1606480345696.png

 

dmwwebartisan
Shopify Partner
12280 2546 3694

@David235 

That's strange. Here is the home page screenshot from my side.

fullhomepage.png

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
David235
Tourist
27 0 3

@dmwwebartisan @I have deleted the code now, if I add it, it will be the same as the picture I sent yo

David235
Tourist
27 0 3

@dmwwebartisan I have added the code now, you can check again

David235_0-1606481090178.png

 

David235
Tourist
27 0 3

@dmwwebartisan Added the code you sent me and it is now

David235_0-1606481260447.png

 

David235
Tourist
27 0 3

@dmwwebartisan I deleted it first, my store is still in

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

@David235 

Try the following code, remove the old one:

h3.product-title>a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;   
    display: block;
    }

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
David235
Tourist
27 0 3

@dmwwebartisan Perfect solution, thank you

olifarhaan
Visitor
3 0 0

Screenshot 2023-07-28 202055.png

olifarhaan
Visitor
3 0 0

I have added the same code on my website but the ellipsis is not showing instead it is getting abnormally cut from the right side. Can you please help in this regard

David235
Tourist
27 0 3

Find the theme code:  product-grid-item.liquid ,Add in (<p class="product-item__title">{{ product.title) | truncate:19 This code 19 number represents the letter length of the name。
I did not find these codes