Solved

When The Product Title Is To Long It Shows 3 Dots ... Recently View Products Mobile/PC

Yusa1
Excursionist
46 0 1

Here an Example What I've been trying to do in RECENTLY VIEWED PRODUCTS it doesn't show up with the 3 DOTS

2023-07-29 23_34_43-.png

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

2023-07-29 23_33_54-All Bar Cabinets – Page 2 – Avo Kitchen _ Buy Kitchen Islands, Kitchen Carts, Ba.png

Accepted Solution (1)
DropAHint-Marc
Shopify Partner
23 3 4

This is an accepted solution.

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: 

Captura de pantalla 2023-07-30 a las 14.45.40.png

 

Hope this help 

Please let me know if it works by giving it a Like or marking it as a solution.

Drop Hint 2.0 - Increase revenue and engagement with hints via Email, SMS and Postal. Free plan.

Appsolute website. support[at]appsolute.us

View solution in original post

Replies 7 (7)

DropAHint-Marc
Shopify Partner
23 3 4

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:

 

  1. Go to your Shopify admin dashboard and navigate to "Online Store" > "Themes."
  2. Click on "Actions" and select "Edit code" for the Theme.
  3. DropAHintMarc_0-1690729319620.png

     

    In the "Assets" folder, locate and click on the "base.css" file to access the theme's main stylesheet.

    DropAHintMarc_1-1690729319636.png

     

  4. 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

Please let me know if it works by giving it a Like or marking it as a solution.

Drop Hint 2.0 - Increase revenue and engagement with hints via Email, SMS and Postal. Free plan.

Appsolute website. support[at]appsolute.us

Yusa1
Excursionist
46 0 1

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.

DropAHint-Marc
Shopify Partner
23 3 4

In the Recently viewed products it's already working. Check screenshot:

Captura de pantalla 2023-07-30 a las 13.35.55.png

 

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,

Please let me know if it works by giving it a Like or marking it as a solution.

Drop Hint 2.0 - Increase revenue and engagement with hints via Email, SMS and Postal. Free plan.

Appsolute website. support[at]appsolute.us

Yusa1
Excursionist
46 0 1

That picture doesn't show proof of it working. 

Yusa1
Excursionist
46 0 1

It supposed to show the 3 dots at the end which in that screenshot it doesn't

DropAHint-Marc
Shopify Partner
23 3 4

This is an accepted solution.

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: 

Captura de pantalla 2023-07-30 a las 14.45.40.png

 

Hope this help 

Please let me know if it works by giving it a Like or marking it as a solution.

Drop Hint 2.0 - Increase revenue and engagement with hints via Email, SMS and Postal. Free plan.

Appsolute website. support[at]appsolute.us

Yusa1
Excursionist
46 0 1

Thank You!