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

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

Oleh
Visitor
1 0 1

Oleh_0-1738719411241.png

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

 

Replies 4 (4)

B2Bridge
New Member
30 2 3

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: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.

B2Bridge
New Member
30 2 3

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: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.

B2Bridge
New Member
30 2 3

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: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.

TheUntechnickle
Shopify Partner
229 24 70

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

Helping for free – just email me: hello@untechnickle.com


Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App