Shopify themes, liquid, logos, and UX
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/
Solved! Go to the solution
This is an accepted solution.
Try the following code, remove the old one:
h3.product-title>a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
Please provide website url and if your store is password protected then also provide password
Website is on top
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!
Didn't play any role,
You mean the above code is not working?
Did you tried to put that. Let me know.
Thanks!
See below, is it not correct ?
I found it and added the code, he caused the overlap to see picture 1
I can see your second screenshot. You have drawn a rectangle but can't see code there. The code should work.
Thanks!
@dmwwebartisan No, no, I just added the code, which caused the product name in Figure 1 to overlap, so I deleted it.
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 ?
@dmwwebartisan yes,But I added the code, and the product titles on the homepage overlapped
Let me see.
Thanks!
That's strange. Here is the home page screenshot from my side.
@dmwwebartisan @I have deleted the code now, if I add it, it will be the same as the picture I sent yo
This is an accepted solution.
Try the following code, remove the old one:
h3.product-title>a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
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
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024