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

Store Design
, , , ,

Topic summary

A user working with the Venue theme needs product titles to display consistently across a collection grid. The requirement is twofold: titles exceeding two lines should truncate with an ellipsis, while single-line titles should reserve space equivalent to two lines to maintain uniform card heights.

Proposed Solutions:

Multiple responders suggested similar CSS-based approaches:

  • Use -webkit-line-clamp: 2 with display: -webkit-box to limit titles to two lines
  • Add min-height: 2.4em with line-height: 1.2 to reserve consistent vertical space
  • Set overflow: hidden to truncate excess text

Implementation Steps:

  1. Navigate to Shopify Admin → Online Store → Themes → Edit code
  2. Locate theme.liquid file
  3. Insert the CSS code above the </head> tag
  4. Apply the .product-title class to title elements in collection/product grid files

One responder offered hands-on implementation assistance. The discussion remains open pending confirmation from the original poster.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Oleh_0-1738719411241.png
Oleh_0-1738719411241.png573×1258 406 KB

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

1 Like
2

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 tag:

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 :heart_eyes:

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 tag:

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 :heart_eyes:

4

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 tag:

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 :heart_eyes:

5

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