Long product descriptions are great for SEO but terrible for design — a wall of text pushes your Add to Cart button far down the page and makes product grids look messy. The fix? Show the first few lines and tuck the rest behind a clean cut-off.

With a few lines of CSS in a Custom Liquid section, you can clamp any text to 1, 2, 3 or 4 lines — with a beautiful fade or even an elegant Read More toggle that needs zero JavaScript. Below are 6 ready-made truncation styles with live previews. Copy your favourite and tidy up your store in minutes.

1. Fashion Store – Minimal 2-Line Clamp

The classic fashion fix — descriptions trimmed to exactly two lines so every product card stays the same height and grids stay razor-aligned.

Preview

Aurora Silk Dress — trimmed to 2 lines

Liquid Code

{% comment %} LayoutKart snippet: shopify-shorten-long-product-text v1 - paste into a Custom Liquid section {% endcomment %}
<style>
.f2v1-card{max-width:420px;margin:0 auto;font-family:Arial,Helvetica,sans-serif;border:1px solid #eee;padding:20px}
.f2v1-title{font-size:18px;font-weight:700;margin:0 0 8px}
.f2v1-text{font-size:14px;color:#555;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
</style>
<div class="f2v1-card"><p class="f2v1-title">Aurora Silk Dress</p><p class="f2v1-text">Crafted from mulberry silk with a fluid drape, this midi dress features a flattering wrap silhouette, delicate mother-of-pearl buttons and a fully lined bodice for all-day comfort.</p></div>

2. Electronics Store – 3-Line Fade

Specs stay readable but tidy — three lines with a soft fade at the bottom that hints there is more to read.

Preview

Nova X5 Headphones — 3 lines with fade mask

Liquid Code

{% comment %} LayoutKart snippet: shopify-shorten-long-product-text v2 - paste into a Custom Liquid section {% endcomment %}
<style>
.f2v2-card{max-width:420px;margin:0 auto;font-family:'Trebuchet MS',Verdana,sans-serif;border:1px solid #dde;padding:20px}
.f2v2-title{font-size:18px;font-weight:700;margin:0 0 8px;color:#0e2a4d}
.f2v2-text{font-size:14px;color:#334;line-height:1.6;max-height:4.8em;overflow:hidden;position:relative}
.f2v2-text::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2.2em;background:linear-gradient(transparent,#fff)}
</style>
<div class="f2v2-card"><p class="f2v2-title">Nova X5 Headphones</p><p class="f2v2-text">40mm titanium drivers, hybrid active noise cancellation, 60-hour battery life, multipoint Bluetooth 5.3 and memory-foam earcups — engineered for studio-grade sound on the move, with a foldable design for travel.</p></div>

3. Beauty Store – 1-Line Ellipsis

One graceful line with an ellipsis — ideal for short ingredient highlights and shade names on beauty cards.

Preview

Velvet Matte Lipstick — single elegant line

Liquid Code

{% comment %} LayoutKart snippet: shopify-shorten-long-product-text v3 - paste into a Custom Liquid section {% endcomment %}
<style>
.f2v3-card{max-width:420px;margin:0 auto;font-family:Georgia,serif;background:#fdf6f8;padding:20px}
.f2v3-title{font-size:18px;font-style:italic;color:#a1234f;margin:0 0 8px}
.f2v3-text{font-size:14px;color:#8e1f4d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
</style>
<div class="f2v3-card"><p class="f2v3-title">Velvet Matte Lipstick</p><p class="f2v3-text">Weightless matte formula with shea butter, vitamin E and 12-hour wear in 24 flattering shades.</p></div>

4. Bookstore – Read More Toggle (No JS)

A real working Read More toggle with zero JavaScript — pure CSS checkbox magic. Click it in the preview; it actually works!

Preview

The Midnight Library — click Read more, it works live

Liquid Code

{% comment %} LayoutKart snippet: shopify-shorten-long-product-text v4 - paste into a Custom Liquid section {% endcomment %}
<style>
.f2v4-card{max-width:420px;margin:0 auto;font-family:Georgia,serif;border:1px solid #e5dcc8;background:#fffdf6;padding:20px}
.f2v4-title{font-size:18px;margin:0 0 8px;color:#4a3f2c}
.f2v4-toggle{display:none}
.f2v4-text{font-size:14px;color:#4a3f2c;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.f2v4-toggle:checked ~ .f2v4-text{-webkit-line-clamp:unset;display:block}
.f2v4-more{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#8a6d2f;cursor:pointer;text-decoration:underline}
.f2v4-more .f2v4-close{display:none}
.f2v4-toggle:checked ~ .f2v4-more .f2v4-open{display:none}
.f2v4-toggle:checked ~ .f2v4-more .f2v4-close{display:inline}
</style>
<div class="f2v4-card"><p class="f2v4-title">The Midnight Library</p><input type="checkbox" id="f2v4-t" class="f2v4-toggle"><p class="f2v4-text">Between life and death there is a library, and within that library, the shelves go on forever. Every book provides a chance to try another life you could have lived, to see how things would be if you had made other choices. Would any of these other lives truly have been better?</p><label for="f2v4-t" class="f2v4-more"><span class="f2v4-open">+ Read more</span><span class="f2v4-close">− Show less</span></label></div>

5. Grocery Store – Compact 2-Line

Tiny and tidy — a compact two-line cut that keeps grocery grids perfectly aligned on every screen size.

Preview

Organic Honey 500g — compact clamp

Liquid Code

{% comment %} LayoutKart snippet: shopify-shorten-long-product-text v5 - paste into a Custom Liquid section {% endcomment %}
<style>
.f2v5-card{max-width:420px;margin:0 auto;font-family:Verdana,Geneva,sans-serif;background:#f2faf4;border:1px solid #cfe8d4;padding:16px}
.f2v5-title{font-size:15px;font-weight:700;margin:0 0 6px;color:#257a36}
.f2v5-text{font-size:13px;color:#2c5b34;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
</style>
<div class="f2v5-card"><p class="f2v5-title">Organic Honey 500g</p><p class="f2v5-text">Raw, unfiltered Himalayan honey, cold-extracted to preserve natural enzymes. No added sugar, lab-tested for purity, in a reusable glass jar.</p></div>

6. Jewelry Store – Serif Fade 3-Line

Old-world elegance — three serif lines dissolving into midnight black, made for fine jewelry descriptions.

Preview

Aurelia Gold Necklace — luxury fade

Liquid Code

{% comment %} LayoutKart snippet: shopify-shorten-long-product-text v6 - paste into a Custom Liquid section {% endcomment %}
<style>
.f2v6-card{max-width:420px;margin:0 auto;font-family:Georgia,serif;background:#141422;color:#e8dcc0;padding:22px}
.f2v6-title{font-size:18px;color:#e9c767;margin:0 0 8px;letter-spacing:1px}
.f2v6-text{font-size:14px;line-height:1.7;max-height:5.1em;overflow:hidden;position:relative}
.f2v6-text::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2.4em;background:linear-gradient(transparent,#141422)}
</style>
<div class="f2v6-card"><p class="f2v6-title">Aurelia Gold Necklace</p><p class="f2v6-text">Handcrafted in 18k gold with a brilliant-cut diamond pendant, this timeless piece arrives in a signature gift box with lifetime craftsmanship warranty and certification.</p></div>

How to Add Product Text Truncation to Shopify

Every snippet above is built for Shopify’s Custom Liquid section, so you don’t need to touch a single theme file. Here’s the 2-minute setup:

1. From your Shopify admin, go to Online Store → Themes.
2. Click Customize next to your live theme (works with Dawn and all OS 2.0 themes).
3. Open the template where you want the feature, then click Add section.
4. Choose Custom Liquid from the section list.
5. Copy the Liquid code from your favourite variation above and paste it into the Custom Liquid box.
6. Click Save — it’s live on your storefront instantly. No app, no coding, no risk.

Customize the Text Truncation

Make it yours:

• Lines to show — change the -webkit-line-clamp value to 1, 2, 3 or more.
• Fade or hard cut — delete the ::after block for a clean cut instead of a fade.
• Apply site-wide — point the selector at your theme’s description class instead of the demo card.
• Toggle text — rename “Read more” to your own language in the label.
• Mobile only — wrap the CSS in @media (max-width: 749px) to clamp text on phones only.

More Shopify Code Sections

Keep upgrading your store with these free Liquid tutorials:

• How to Limit Product Description Text in Shopify
• How to Add Custom Product Description Code in Shopify
• Shopify Product Card Hover Effect (Liquid + CSS)
• Shopify Collection Product Grid Custom CSS
• Shopify Product Page Custom Offer Box
• Shopify Animated Gradient Text Effect
• Shopify Liquid Typing Text Effect
• Shopify Testimonial Auto Slider

Conclusion

A tidy product page sells more — that is the whole idea behind text truncation. Whether you pick the minimal 2-line clamp or the interactive Read More toggle, your descriptions now respect your design instead of fighting it. Paste your favourite into a Custom Liquid section and enjoy cleaner cards, happier scrollers, and a sharper storefront.

Want more copy-paste Shopify sections? LayoutKart publishes free Liquid tutorials every week — no apps, no monthly fees, just clean code. Bookmark this page and check back for new effects!