Does someone know how to Truncate product titles on featured collection ?

Rauf
New Member
11 0 0

Hi, I would like to truncate the product titles in featured collection so that the titles that are longer than one line end with "...".  any suggestions would be greatly appreciated. Thanks !

Replies 15 (15)

codewithpaul
Shopify Partner
123 13 22

Hey mate!

 

Yup pretty simple to do with some css.

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

 

Great article there showing how to do it (presuming you know how to add css to the theme)

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Rauf
New Member
11 0 0

 

Capture d’écran 2023-02-12 à 21.46.44.png

 

Rauf
New Member
11 0 0

Hi, thanks for the reply. Thats the problem Im new the coding and know very little. Ive tried first to add 

 

.card__heading { width: 100%; white-space: nowrap; overflow: hidden;

text-overflow: ellipsis; font-size: 0.8em; }

 

without succes.

 

i now tried adding the code on the page you provided 

 

h1 {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  padding: 20px;
  font-size: 1.3rem;
  margin: 0;
  background: white;
  resize: horizontal;
} 
and
.truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

but it shows as in the screenshot. 
Rauf
New Member
11 0 0

I added this to base.css file. if you have any ideas please let me know

GemPages
Shopify Partner
5588 1261 1206

Hello @Rauf 

I would like to give you the recommendation to support you so kindly follow steps below:

 

1. Go to your Online store > Themes > Edit code
2. Open your product-card-grid file
3. Paste the below code :

  | truncate: 10

(replace 10 with the number which you want )

Like this :  https://prnt.sc/MN5WfMfQ19zL

Code: 

 

<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title | truncate: 10 }}</div>

 

I hope the above is useful to you.
Best regards,
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Rauf
New Member
11 0 0

Hi, thank you for your reply. I would like a code that adapts to the size of the container instead of a fixed number of letters, So that it works for mobile, desktop and other devices. If you have any ideas please let me know. Thank you.

codewithpaul
Shopify Partner
123 13 22

Hey Rauf,

 

I don't know how comfortable you are adding code but i created the below codepen that will add ellipses to the text based on container size (resize the window on the below codepen to see)

 

https://codepen.io/PaulRyan17/pen/JjajJyE 

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Rauf
New Member
11 0 0

Hi, thanks a lot for your message. Unfortunately I just began with the coding. I imagine the css must be added in base.css file and replace box with card__heading? and Html in another file? If you can tell me exactly it would be with pleasure. (Its on Dawn theme) thanks a lot

codewithpaul
Shopify Partner
123 13 22

can you link me your store as I have no idea what class needs to be targeted, I don't have the dawn theme locally/

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Rauf
New Member
11 0 0

https://glamourgoddesss.myshopify.com/ thanks, for the moment I added 

 

.full-unstyled-link {
width: 50vw;
border: 1px solid red;
height: 150px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

 

I tried with .card and .card__heading but I can't manage to have the code adapt to the size of the container. when the title is longer, it goes out of the container.

codewithpaul
Shopify Partner
123 13 22

sorry the `width: 50vw` and `height:150px` was just an example, the old code you need to put in is 

```

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

```

If I helped then please Like and Accept the Solution
Contact me at contact@codewithpaul.com
For Shopify Design Changes | Shopify App Development | Custom Modifications Into Shopify Theme
Rauf
New Member
11 0 0

I have already tried this code with .card and .card__heading added in base.css, but for some reason the text continues on 1 line and goes out of the container. Do you know if this feature is complicated and requires a bit more complicated coding? (having "..." at the end ot the the container if the text is longer than 1 line, without a max width so that it adapts to the size of the container and works on all devices. I have been trying since yesterday and it seems that something is not making it possible or maybe I am missing something.

Rauf
New Member
11 0 0

.card {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

with this code, the only problem is I don't see the "..." at the end of the container for the titles that are longer. Is it normal? Is a width needed to be added or can it be done in a way that the width adapts to the container so it works directly for mobile and desktop? If you have any idea what is the best solution please let me know. Otherwise I'll check to hire someone, thanks

Rauf
New Member
11 0 0

Ok I finally found the solution it was much easier than I fought. For anyone having the same problem here's how it worked for me 

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

Memo17
Visitor
1 0 0

Hello Rauf,

I currently have the same challenge as you had above and I have a question regarding your solution: Where did you add the following code:         

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

I am looking forward for your reply!