Issue Identified:
A user is experiencing inconsistent text truncation with ellipsis (three dots “…”) in their Shopify store. Product titles display ellipsis correctly on product pages but not in the “Recently Viewed Products” section.
Solution Provided:
A support representative from Drop Hint 2.0 offered custom CSS code to fix the truncation:
Resolution Process:
#recently-viewed-products-webkit-line-clamp: 2 to limit titles to 2 lines with ellipsisStatus: Resolved with custom CSS implementation.
Here an Example What I’ve been trying to do in RECENTLY VIEWED PRODUCTS it doesn’t show up with the 3 DOTS
But in the product page it does show the 3 dots can someone help me code this for the Recently viewed products? For Mobile and PC URL -www.avokitchen.com
Hello,
This is Marc from Drop Hint 2.0 Email SMS Postal.
I understand that the Theme doesn’t provide an option to change the text of the product.
However, fear not, as we can easily achieve this through custom code. Allow me to guide you through the process step-by-step:
Go to your Shopify admin dashboard and navigate to “Online Store” > “Themes.”
Click on “Actions” and select “Edit code” for the Theme.
In the “Assets” folder, locate and click on the “base.css” file to access the theme’s main stylesheet.
Scroll to the bottom of the file and add the following code to adjust the title:
.card-information__text.h3 a.full-unstyled-link {
overflow: visible;
display: block;
}
Once you’ve made the desired changes, click on “Save” to apply the modifications.
Best regards,
Marc/Drop a Hint 2.0
It didn’t work i’m trying to apply it to The recently viewed products only. But when ever i add the code the 3 dots for the other products collections it end up deleting them.
In the Recently viewed products it’s already working. Check screenshot:
If you want it applied to another section, let me know which section you’d like it in, and I’ll promptly send you the customized CSS.
Feel free to reach out with your preferences, and I’ll be more than happy to assist you further.
Best regards,
That picture doesn’t show proof of it working.
It supposed to show the 3 dots at the end which in that screenshot it doesn’t
Then just add this:
#recently-viewed-products .h3.grid-view-item__title.product-card__title {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
And you will get this:
Hope this help
Thank You!
