Shorten product title on feature collect on homepage

[clementjaw001]

I wonder if anyone can also advise on how to make the feature collection product title just display 2 rows in desktop and mobile view? Just like the screenshot for this store below? (This store only allows product titles to display 1 row, but for me, I prefer 2 rows.),  I also want the discount price and original price displayed in the same row as this store under desktop view. The color of the original price can be changed to green. 

Under mobile view, the after discounted price is on top of the original price, and the font size is slightly bigger than the original price font size, just like this store below mobile view.

https://trendingcustom.com/

This is my store home page currently feature collection display

[BSSCommerce-HDL]

Hi @clementjaw001, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.collection .card__heading.h5 a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 260px;
    display: block;
}
</style>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[GTLOfficial]

Hello @clementjaw001 
1) to display collection product title just display 2 rows:
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> style.scss.css ---> line number 17529
seach this code

.new-featured-collection-section .product-list .thumbnail .product-details .title, .recently-viewed__section .product-list .thumbnail .product-details .title, .recommendation-products__section .product-list .thumbnail .product-details .title {
font-weight: 700;
font-size: 14px;
line-height: 20px;
color: #222;
text-align: left;
-webkit-line-clamp: 1;
margin-bottom: 4px;
}

and replace with this code

.new-featured-collection-section .product-list .thumbnail .product-details .title, .recently-viewed__section .product-list .thumbnail .product-details .title, .recommendation-products__section .product-list .thumbnail .product-details .title {
font-weight: 700;
font-size: 14px;
line-height: 20px;
color: #222;
text-align: left;
-webkit-line-clamp: 2;
margin-bottom: 4px;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[clementjaw001]

My theme dont have this "style.scss.css " in assets.

[Huptech-Web]

Hey @clementjaw001 
please remove this code 

<li>{{ product.title | truncatewords: 5 }}</li>

truncatewords

Shortens a string down to the number of words passed as an argument. If the specified number of words is less than the number of words in the string, an ellipsis (…) is appended to the string.

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[clementjaw001]

Hi K.K,

Where to remove the code you mention?

[Huptech-Web]

@clementjaw001 find the card-product.liquid file and find truncatewords

[GTLOfficial]

2) the font size is slightly bigger than the original price
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> style.scss.css ---> line number 17529
add this code at the end of the file.

.new-featured-collection-section .product-list .thumbnail .product-details .price span.money {
font-size: 14px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[clementjaw001]

I do not has this style.scss.css, can please help?

[Sweans]

Hi @clementjaw001 ,

Please follow the steps below to implement the solution:

1. In your Shopify admin, navigate to Online Store under Sales Channels. Click the three dots next to the theme you want to edit, and select Edit Code.

2. Locate the main CSS file in your theme, such as `main.css`, `theme.css`, `base.css`, or `style.css`, and add the following CSS code:

#To display title in two lines

.featured-collection__products.container .product-details .title {
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#Ensure the offer price and original price are on the same line if space allows. Otherwise, they will appear on two lines. */

span.price.sale {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#To change the original price color

.new-featured-collection-section .product-list .thumbnail .product-details .price span.money {

  color: green;

}

#To change the size of both prices

.new-featured-collection-section .product-list .thumbnail .product-details .price .was_price span.money,
.new-featured-collection-section .product-list .thumbnail .product-details .price span.money {
  font-size: 14px;
}

The provided CSS should meet your requirements. However, you may need to adjust the class names to match those used in your theme.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,

Sweans

[clementjaw001]

Hi Sweans,

I have apply all the code above to bass.css, but nothing change.

[Sweans]

Hi,

I've updated the class names to better align with your site's structure. Please replace the previous code with the following:

.card--standard > .card__content .card__information .card__heading a { 
    width: 100% !important; 
    overflow: hidden !important; 
    display: -webkit-box !important; 
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important;
}

.price--on-sale .price__sale {
    display: flex !important; 
    align-items: center !important; 
    flex-wrap: wrap !important;
}

.price .price-item, span.price-item.price-item--sale {
    font-size: 14px !important;
}

If the issue persists, please share the store link so I can assist further.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,

Sweans