Layout theme is Venue or How to make a title with 2 lines

[Oleh]

How to Add Ellipsis Based on Title Length:

1. If the title exceeds two lines, add an ellipsis (...) at the end.
2. If the title is only one line, reserve space as if it were two lines.

https://sollowellness.com/collections/all-coffee

[B2Bridge]

Hi @Oleh ,

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>
.product-card__title {
   white-space: nowrap;      
   overflow: hidden;         
   text-overflow: ellipsis;
   max-width: 100%;
}
</style>

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 😍

[B2Bridge]

Hi @Oleh ,

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>
.product-card__title {
   white-space: nowrap;      
   overflow: hidden;         
   text-overflow: ellipsis;
   max-width: 100%;
}
</style>

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 😍

[B2Bridge]

Hi @Oleh ,

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>
.product-card__title {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
}
</style>

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 😍

[TheUntechnickle]

Hey @Oleh,

I can help with the title truncation issue in your Shopify theme. The solution involves a simple CSS tweak that adds proper ellipsis and maintains consistent card heights.

Step 1: Add this CSS

.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  line-height: 1.2;
}

Step 2: Update your theme file

Modify collection-grid.liquid or product-grid.liquid to apply the class to the title element:

<h3 class="product-title">
  {{ product.title }}
</h3>

If you'd like us to implement this for you, just let us know, and we’ll help set it up properly! We'll ensure it integrates smoothly with your current design.

Let me know if you have any questions! 

Cheers!
Shubham | Untechnickle