How to limit product descriptions to two lines without overlapping?

Hi my product description and price overlap I need to make it so the description stops at line 2. Or just not overlap

example

gucci

wjdjdkddkdldldkdkdkkd

shsjskskskskslsksksk…

$565

my site is https://luxurymrkt.com/pages/perfectshoeparker

1 Like

Hi @Luxurymrkt

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.grid-product__title.grid-product__title--body {
    line-height: 1.2;
}
.grid-product__price {
    margin-top: 5px;
}

So this solution works but what I want to do is stop the description at 2 lines so it’ll all look the same like the product with arrow.

1 Like

Oh, Okay we can adjust the letter spacing. Like this.

Same Instruction.

.grid-product__title.grid-product__title--body {
    letter-spacing: -1px;
}

And Save.

Result:

No way lol that looks horrible.

I want it to look like this

The line automatically drop out if its already full on the 1st line. So when it creates 3rd line it means it have more longer sentence than to other one. The css cannot control the length of the senctence but can control the spaces and designs. We can also do breaking the words.

Yea maybe breaking the words? Can you send a code and how it looks. Thank you. Mike

You can use the truncate method by defining how many letters you want to appear in the title.

I add this to my theme.liquid?

also it would be for all products Whats the “ADD THE ID HERE FOR THE TITLE?

Hi @Luxurymrkt

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the


Hope this can help you solve the issue

Best regards,

Noah | PageFly